feat: redirect to new feature flag creation (#7679)

Currently found only one instance that is using `create-toggle`. So
changed behaviour for that.

frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx

@@ -9,6 +9,7 @@ import {
 } from 'component/providers/AccessProvider/permissions';
 import { useContext } from 'react';
 import AccessContext from 'contexts/AccessContext';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const WarningContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -108,6 +109,7 @@ type ApplicationIssues =
 
 const FeaturesMissing = ({ features }: IFeaturesMissingProps) => {
     const { hasAccess } = useContext(AccessContext);
+    const improveCreateFlagFlow = useUiFlag('improveCreateFlagFlow');
     const length = features.length;
 
     if (length === 0) {
@@ -128,6 +130,17 @@ const FeaturesMissing = ({ features }: IFeaturesMissingProps) => {
                         <ConditionallyRender
                             condition={hasAccess(CREATE_FEATURE)}
                             show={
+                                <ConditionallyRender
+                                    condition={improveCreateFlagFlow}
+                                    show={
+                                        <StyledLink
+                                            key={feature}
+                                            to={`/projects/default?create=true&name=${feature}`}
+                                        >
+                                            Create feature flag
+                                        </StyledLink>
+                                    }
+                                    elseShow={
                                         <StyledLink
                                             key={feature}
                                             to={`/projects/default/create-toggle?name=${feature}`}
@@ -136,6 +149,8 @@ const FeaturesMissing = ({ features }: IFeaturesMissingProps) => {
                                         </StyledLink>
                                     }
                                 />
+                            }
+                        />
                     </IssueRowContainer>
                 ))}
             </StyledList>

frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx

@@ -46,6 +46,7 @@ const BreadcrumbNav = () => {
                 item !== 'copy' &&
                 item !== 'features' &&
                 item !== 'features2' &&
+                // TODO: this can be removed after new create flag flow goes live
                 item !== 'create-toggle' &&
                 item !== 'settings' &&
                 item !== 'profile' &&

frontend/src/component/feature/FeatureForm/FeatureForm.tsx

@@ -197,6 +197,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                     </StyledInputDescription>
                 }
             />
+            // TODO: this can be removed after new create flag flow goes live
             <FeatureProjectSelect
                 value={project}
                 onChange={(projectId) => {
@@ -213,7 +214,6 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
                 IconComponent={KeyboardArrowDownOutlined}
                 sx={styledSelectInput}
             />
-
             <StyledInputDescription>
                 How would you describe your feature flag?
             </StyledInputDescription>