Fix: integrations form (#4655)

## About the changes
Fix submitting integrations form

frontend/src/component/common/util.ts

@@ -16,6 +16,12 @@ export const filterByConfig =
             return Boolean(flags[r.flag]);
         }
 
+        if (r.notFlag) {
+            const flags = config.flags as unknown as Record<string, boolean>;
+
+            return !(flags[r.notFlag] === true);
+        }
+
         if (r.configFlag) {
             // Check if the route's `configFlag` is enabled in IUiConfig.
             return Boolean(config[r.configFlag]);

frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx

@@ -43,6 +43,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { IntegrationDelete } from './IntegrationDelete/IntegrationDelete';
 import { IntegrationStateSwitch } from './IntegrationStateSwitch/IntegrationStateSwitch';
 import { capitalizeFirst } from 'utils/capitalizeFirst';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 type IntegrationFormProps = {
     provider?: AddonTypeSchema;
@@ -75,6 +76,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
         label: event,
     }));
     const { uiConfig } = useUiConfig();
+    const integrationsRework = useUiFlag('integrationsRework');
     const [formValues, setFormValues] = useState(initialValues);
     const [errors, setErrors] = useState<{
         containsErrors: boolean;
@@ -218,14 +220,14 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
         try {
             if (editMode) {
                 await updateAddon(formValues as AddonSchema);
-                navigate('/addons');
+                navigate(integrationsRework ? '/integrations' : '/addons');
                 setToastData({
                     type: 'success',
                     title: 'Addon updated successfully',
                 });
             } else {
                 await createAddon(formValues as Omit<AddonSchema, 'id'>);
-                navigate('/addons');
+                navigate(integrationsRework ? '/integrations' : '/addons');
                 setToastData({
                     type: 'success',
                     confetti: true,
@@ -271,6 +273,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
                             color="primary"
                             variant="contained"
                             permission={editMode ? UPDATE_ADDON : CREATE_ADDON}
+                            onClick={onSubmit}
                         >
                             {submitText}
                         </PermissionButton>
@@ -382,9 +385,7 @@ export const IntegrationForm: VFC<IntegrationFormProps> = ({
                         </div>
                     </StyledConfigurationSection>
                     <ConditionallyRender
-                        condition={Boolean(
+                        condition={Boolean(integrationsRework && editMode)}
-                            uiConfig?.flags?.integrationsRework && editMode
-                        )}
                         show={() => (
                             <>
                                 <Divider />

frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx

@@ -1,5 +1,5 @@
 import { type VFC } from 'react';
-import { Typography, styled } from '@mui/material';
+import { Box, Typography, styled } from '@mui/material';
 import type { AddonTypeSchema } from 'openapi';
 import useLoading from 'hooks/useLoading';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -58,23 +58,21 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
         >
             <StyledContainer>
                 <StyledSection>
-                    <div>
-                        <Typography component="h3" variant="h2">
-                            Title
-                        </Typography>
-                        <Typography variant="body2" color="text.secondary">
-                            Description
-                        </Typography>
-                    </div>
                     <StyledCardsGrid>
                         {providers?.map(
-                            ({ name, displayName, description }) => (
+                            ({
+                                name,
+                                displayName,
+                                description,
+                                deprecated,
+                            }) => (
                                 <IntegrationCard
                                     key={name}
                                     icon={name}
                                     title={displayName || name}
                                     description={description}
                                     link={`/integrations/create/${name}`}
+                                    deprecated={deprecated}
                                 />
                             )
                         )}
@@ -109,16 +107,17 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                             icon="unleash"
                             title="Unleash Edge"
                             description="Unleash Edge is built to help you scale Unleash. As a successor of Unleash Proxy it's even faster and more versitile."
-                            link="/integrations/create/unleash-proxy"
+                            link="/integrations/view/edge"
                             configureActionText="Learn more"
                         />
                         <IntegrationCard
                             icon="unleash"
                             title="Unleash Proxy"
                             description="The Unleash Proxy is a lightweight, stateless proxy that sits between your Unleash client SDKs and the Unleash API."
-                            link="/integrations/create/unleash-proxy"
+                            link="https://docs.getunleash.io/reference/unleash-proxy"
                             configureActionText="View documentation"
                             deprecated="Try Unleash Edge instead. It has all the features of Unleash Proxy and more."
+                            isExternal
                         />
                     </StyledCardsGrid>
                 </StyledSection>
@@ -140,7 +139,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                             </a>
                         </Typography>
                     </div>
-                    <div>
+                    <Box sx={theme => ({ marginTop: theme.spacing(2) })}>
                         <Typography component="h4" variant="h4">
                             Server-side SDKs
                         </Typography>
@@ -148,7 +147,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                             Server-side clients run on your server and
                             communicate directly with your Unleash instance.
                         </Typography>
-                    </div>
+                    </Box>
                     <StyledCardsGrid small>
                         {serverSdks?.map(
                             ({
@@ -169,7 +168,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                             )
                         )}
                     </StyledCardsGrid>
-                    <div>
+                    <Box sx={theme => ({ marginTop: theme.spacing(2) })}>
                         <Typography component="h4" variant="h4">
                             Client-side SDKs
                         </Typography>
@@ -192,7 +191,7 @@ export const AvailableIntegrations: VFC<IAvailableIntegrationsProps> = ({
                             </a>
                             , but not to the regular Unleash client API.
                         </Typography>
-                    </div>
+                    </Box>
                     <StyledCardsGrid small>
                         {clientSdks?.map(
                             ({

frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap

@@ -312,6 +312,7 @@ exports[`returns all baseRoutes 1`] = `
       "advanced": true,
       "mobile": true,
     },
+    "notFlag": "integrationsRework",
     "path": "/addons",
     "title": "Addons",
     "type": "protected",

frontend/src/component/menu/routes.ts

@@ -327,6 +327,7 @@ export const routes: IRoute[] = [
         // TODO: use AddonRedirect after removing `integrationsRework` menu flag
         hidden: false,
         type: 'protected',
+        notFlag: 'integrationsRework',
         menu: { mobile: true, advanced: true },
         // TODO: remove 'addons' from menu after removing `integrationsRework` menu flag
     },
@@ -508,6 +509,7 @@ export const getCondensedRoutes = (routes: IRoute[]): INavigationMenuItem[] => {
             title: route.title,
             menu: route.menu,
             configFlag: route.configFlag,
+            notFlag: route.notFlag,
         };
     });
 };

frontend/src/interfaces/route.ts

@@ -8,6 +8,7 @@ export interface IRoute {
     layout?: string;
     parent?: string;
     flag?: keyof UiFlags;
+    notFlag?: keyof UiFlags;
     configFlag?: keyof IUiConfig;
     hidden?: boolean;
     enterprise?: boolean;
@@ -21,6 +22,7 @@ export interface INavigationMenuItem {
     title: string;
     menu: IRouteMenu;
     flag?: keyof UiFlags;
+    notFlag?: keyof UiFlags;
     configFlag?: keyof IUiConfig;
     group?: string;
 }