revert renaming addons list

frontend/src/component/integrations/AddonRedirect/AddonRedirect.tsx

@@ -0,0 +1,18 @@
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import { PageContent } from 'component/common/PageContent/PageContent';
+
+export const AddonRedirect = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        navigate(`/integrations${location.pathname.replace('/addons', '')}`);
+    }, [location.pathname, navigate]);
+
+    return (
+        <PageContent>
+            Addons where renamed to <Link to="/integrations">/integrations</Link>
+        </PageContent>
+    );
+};

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

@@ -16,10 +16,11 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { sortTypes } from 'utils/sortTypes';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
-import { ConfigureIntegrationButton } from './ConfigureIntegrationButton/ConfigureIntegrationButton';
+import { ConfigureAddonsButton } from './ConfigureAddonButton/ConfigureAddonsButton';
 import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
 import { IntegrationNameCell } from '../IntegrationNameCell/IntegrationNameCell';
 import { IAddonInstallation } from 'interfaces/addons';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IProvider {
     name: string;
@@ -32,15 +33,15 @@ interface IProvider {
     deprecated?: string;
 }
 
-interface IAvailableIntegrationsProps {
+interface IAvailableAddonsProps {
     providers: IProvider[];
     loading: boolean;
 }
 
-export const AvailableIntegrations = ({
+export const AvailableAddons = ({
     providers,
     loading,
-}: IAvailableIntegrationsProps) => {
+}: IAvailableAddonsProps) => {
     const data = useMemo(() => {
         if (loading) {
             return Array(5).fill({
@@ -70,7 +71,9 @@ export const AvailableIntegrations = ({
                     },
                 }: any) => {
                     return (
-                        <IconCell icon={<IntegrationIcon name={name as string} />} />
+                        <IconCell
+                            icon={<IntegrationIcon name={name as string} />}
+                        />
                     );
                 },
             },
@@ -88,7 +91,7 @@ export const AvailableIntegrations = ({
                 align: 'center',
                 Cell: ({ row: { original } }: any) => (
                     <ActionCell>
-                        <ConfigureIntegrationButton provider={original} />
+                        <ConfigureAddonsButton provider={original} />
                     </ActionCell>
                 ),
                 width: 150,
@@ -133,7 +136,11 @@ export const AvailableIntegrations = ({
     return (
         <PageContent
             isLoading={loading}
-            header={<PageHeader title={`Available addons (${rows.length})`} />}
+            header={
+                <PageHeader
+                    title={`Available addons (${rows.length})`}
+                />
+            }
         >
             <Table {...getTableProps()}>
                 <SortableTableHeader headerGroups={headerGroups} />

frontend/src/component/integrations/IntegrationList/AvailableAddons/ConfigureAddonButton/ConfigureAddonsButton.tsx

@@ -3,13 +3,13 @@ import { CREATE_ADDON } from 'component/providers/AccessProvider/permissions';
 import { IAddonProvider } from 'interfaces/addons';
 import { useNavigate } from 'react-router-dom';
 
-interface IConfigureIntegrationButtonProps {
+interface IConfigureAddonsButtonProps {
     provider: IAddonProvider;
 }
 
-export const ConfigureIntegrationButton = ({
+export const ConfigureAddonsButton = ({
     provider,
-}: IConfigureIntegrationButtonProps) => {
+}: IConfigureAddonsButtonProps) => {
     const navigate = useNavigate();
 
     return (

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

@@ -14,10 +14,10 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { SortableTableHeader, TablePlaceholder } from 'component/common/Table';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
-import { ConfiguredAddonsActionsCell } from './ConfiguredIntegrationsActionCell/ConfiguredIntegrationActionsCell';
+import { ConfiguredAddonsActionsCell } from './ConfiguredAddonsActionCell/ConfiguredAddonsActionsCell';
 import { IntegrationNameCell } from '../IntegrationNameCell/IntegrationNameCell';
 
-export const ConfiguredIntegrations = () => {
+export const ConfiguredAddons = () => {
     const { refetchAddons, addons, providers, loading } = useAddons();
     const { updateAddon, removeAddon } = useAddonsApi();
     const { setToastData, setToastApiError } = useToast();
@@ -73,7 +73,9 @@ export const ConfiguredIntegrations = () => {
                         original: { provider },
                     },
                 }: any) => (
-                    <IconCell icon={<IntegrationIcon name={provider as string} />} />
+                    <IconCell
+                        icon={<IntegrationIcon name={provider as string} />}
+                    />
                 ),
                 disableSortBy: true,
             },
@@ -175,7 +177,11 @@ export const ConfiguredIntegrations = () => {
     return (
         <PageContent
             isLoading={loading}
-            header={<PageHeader title={`Configured addons (${rows.length})`} />}
+            header={
+                <PageHeader
+                    title={`Configured addons (${rows.length})`}
+                />
+            }
             sx={theme => ({ marginBottom: theme.spacing(2) })}
         >
             <Table {...getTableProps()}>

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

@@ -1,19 +1,21 @@
-import React from 'react';
+import { ConfiguredAddons } from './ConfiguredAddons/ConfiguredAddons';
-import { ConfiguredIntegrations } from './ConfiguredIntegrations/ConfiguredIntegrations';
+import { AvailableAddons } from './AvailableAddons/AvailableAddons';
-import { AvailableIntegrations } from './AvailableIntegrations/AvailableIntegrations';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useAddons from 'hooks/api/getters/useAddons/useAddons';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 export const IntegrationList = () => {
     const { providers, addons, loading } = useAddons();
+    const { uiConfig } = useUiConfig();
+    const integrationsRework = uiConfig?.flags?.integrationsRework || false;
 
     return (
         <>
             <ConditionallyRender
                 condition={addons.length > 0}
-                show={<ConfiguredIntegrations />}
+                show={<ConfiguredAddons />}
             />
-            <AvailableIntegrations loading={loading} providers={providers} />
+            <AvailableAddons loading={loading} providers={providers} />
         </>
     );
 };

frontend/src/component/menu/routes.ts

@@ -306,6 +306,7 @@ export const routes: IRoute[] = [
         parent: '/addons',
         title: 'Create',
         component: CreateIntegration,
+        // TODO: use AddonRedirect after removing `integrationsRework` menu flag
         type: 'protected',
         menu: {},
     },
@@ -314,6 +315,7 @@ export const routes: IRoute[] = [
         parent: '/addons',
         title: 'Edit',
         component: EditIntegration,
+        // TODO: use AddonRedirect after removing `integrationsRework` menu flag
         type: 'protected',
         menu: {},
     },
@@ -321,11 +323,28 @@ export const routes: IRoute[] = [
         path: '/addons',
         title: 'Addons',
         component: IntegrationList,
+        // TODO: use AddonRedirect after removing `integrationsRework` menu flag
         hidden: false,
         type: 'protected',
         menu: { mobile: true, advanced: true },
+        // TODO: remove 'addons' from menu after removing `integrationsRework` menu flag
+    },
+    {
+        path: '/integrations/create/:providerId',
+        parent: '/integrations',
+        title: 'Create',
+        component: CreateIntegration,
+        type: 'protected',
+        menu: {},
+    },
+    {
+        path: '/integrations/edit/:addonId',
+        parent: '/integrations',
+        title: 'Edit',
+        component: EditIntegration,
+        type: 'protected',
+        menu: {},
     },
-    // TODO: remove 'addons' from menu after removing Integrations menu flag
     {
         path: '/integrations',
         title: 'Integrations',