diff --git a/frontend/src/component/common/util.ts b/frontend/src/component/common/util.ts index b40834b06b..f1a6764ca8 100644 --- a/frontend/src/component/common/util.ts +++ b/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; + + return !(flags[r.notFlag] === true); + } + if (r.configFlag) { // Check if the route's `configFlag` is enabled in IUiConfig. return Boolean(config[r.configFlag]); diff --git a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx b/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx index 756284226c..51769430dd 100644 --- a/frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx +++ b/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 = ({ 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 = ({ 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); - navigate('/addons'); + navigate(integrationsRework ? '/integrations' : '/addons'); setToastData({ type: 'success', confetti: true, @@ -271,6 +273,7 @@ export const IntegrationForm: VFC = ({ color="primary" variant="contained" permission={editMode ? UPDATE_ADDON : CREATE_ADDON} + onClick={onSubmit} > {submitText} @@ -382,9 +385,7 @@ export const IntegrationForm: VFC = ({ ( <> diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx index efe5ac57e8..36568a19e3 100644 --- a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx +++ b/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 = ({ > -
- - Title - - - Description - -
{providers?.map( - ({ name, displayName, description }) => ( + ({ + name, + displayName, + description, + deprecated, + }) => ( ) )} @@ -109,16 +107,17 @@ export const AvailableIntegrations: VFC = ({ 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" />
@@ -140,7 +139,7 @@ export const AvailableIntegrations: VFC = ({ -
+ ({ marginTop: theme.spacing(2) })}> Server-side SDKs @@ -148,7 +147,7 @@ export const AvailableIntegrations: VFC = ({ Server-side clients run on your server and communicate directly with your Unleash instance. -
+ {serverSdks?.map( ({ @@ -169,7 +168,7 @@ export const AvailableIntegrations: VFC = ({ ) )} -
+ ({ marginTop: theme.spacing(2) })}> Client-side SDKs @@ -192,7 +191,7 @@ export const AvailableIntegrations: VFC = ({ , but not to the regular Unleash client API. -
+ {clientSdks?.map( ({ diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap index 2c96ef3a01..e7ec5ef217 100644 --- a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap +++ b/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", diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts index c0003f479a..3a3eefba01 100644 --- a/frontend/src/component/menu/routes.ts +++ b/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, }; }); }; diff --git a/frontend/src/interfaces/route.ts b/frontend/src/interfaces/route.ts index 06a38243bb..277e5d5e0a 100644 --- a/frontend/src/interfaces/route.ts +++ b/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; }