Integrations - frontend adjustments (#4527)

## About the changes - [x] Create a feature flag - [x] Rename page title - [x] Rename menu item - [x] Update frontend URL (add redirect from old one) https://linear.app/unleash/issue/1-1263/integrations-frontend-adjustments
Unleash · Aug 22, 2023 · 573518e · 573518e
1 parent 8a3889d
commit 573518e
Show file tree

Hide file tree

Showing 25 changed files with 225 additions and 94 deletions.
diff --git a/frontend/src/component/addons/AddonList/AddonList.tsx b/frontend/src/component/addons/AddonList/AddonList.tsx
diff --git a/frontend/src/component/integrations/AddonRedirect/AddonRedirect.tsx b/frontend/src/component/integrations/AddonRedirect/AddonRedirect.tsx
@@ -0,0 +1,19 @@
+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>
+    );
+};
diff --git a/...ponent/addons/CreateAddon/CreateAddon.tsx → ...s/CreateIntegration/CreateIntegration.tsx b/...ponent/addons/CreateAddon/CreateAddon.tsx → ...s/CreateIntegration/CreateIntegration.tsx
@@ -1,5 +1,5 @@
 import useAddons from 'hooks/api/getters/useAddons/useAddons';
-import { AddonForm } from '../AddonForm/AddonForm';
+import { IntegrationForm } from '../IntegrationForm/IntegrationForm';
 import cloneDeep from 'lodash.clonedeep';
 import { IAddon } from 'interfaces/addons';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@@ -14,7 +14,7 @@ export const DEFAULT_DATA = {
     environments: [],
 } as unknown as IAddon; // TODO: improve type
 
-export const CreateAddon = () => {
+export const CreateIntegration = () => {
     const providerId = useRequiredPathParam('providerId');
     const { providers, refetchAddons } = useAddons();
 
@@ -29,7 +29,7 @@ export const CreateAddon = () => {
     };
 
     return (
-        <AddonForm
+        <IntegrationForm
             editMode={editMode}
             provider={provider}
             fetch={refetchAddons}

diff --git a/.../component/addons/EditAddon/EditAddon.tsx → ...tions/EditIntegration/EditIntegration.tsx b/.../component/addons/EditAddon/EditAddon.tsx → ...tions/EditIntegration/EditIntegration.tsx
@@ -1,11 +1,11 @@
 import useAddons from 'hooks/api/getters/useAddons/useAddons';
-import { AddonForm } from '../AddonForm/AddonForm';
+import { IntegrationForm } from '../IntegrationForm/IntegrationForm';
 import cloneDeep from 'lodash.clonedeep';
 import { IAddon } from 'interfaces/addons';
-import { DEFAULT_DATA } from '../CreateAddon/CreateAddon';
+import { DEFAULT_DATA } from '../CreateIntegration/CreateIntegration';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 
-export const EditAddon = () => {
+export const EditIntegration = () => {
     const addonId = useRequiredPathParam('addonId');
     const { providers, addons, refetchAddons } = useAddons();
 
@@ -18,7 +18,7 @@ export const EditAddon = () => {
         : undefined;
 
     return (
-        <AddonForm
+        <IntegrationForm
             editMode={editMode}
             provider={provider}
             fetch={refetchAddons}

diff --git a/...ent/addons/AddonForm/AddonForm.styles.tsx → ...ntegrationForm/IntegrationForm.styles.tsx b/...ent/addons/AddonForm/AddonForm.styles.tsx → ...ntegrationForm/IntegrationForm.styles.tsx
diff --git a/.../component/addons/AddonForm/AddonForm.tsx → ...tions/IntegrationForm/IntegrationForm.tsx b/.../component/addons/AddonForm/AddonForm.tsx → ...tions/IntegrationForm/IntegrationForm.tsx
@@ -16,16 +16,16 @@ import {
 import produce from 'immer';
 import { trim } from 'component/common/util';
 import { IAddon, IAddonProvider } from 'interfaces/addons';
-import { AddonParameters } from './AddonParameters/AddonParameters';
-import { AddonInstall } from './AddonInstall/AddonInstall';
+import { IntegrationParameters } from './IntegrationParameters/IntegrationParameters';
+import { IntegrationInstall } from './IntegrationInstall/IntegrationInstall';
 import cloneDeep from 'lodash.clonedeep';
 import { useNavigate } from 'react-router-dom';
 import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
-import { AddonMultiSelector } from './AddonMultiSelector/AddonMultiSelector';
+import { IntegrationMultiSelector } from './IntegrationMultiSelector/IntegrationMultiSelector';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
@@ -42,7 +42,7 @@ import {
     StyledContainer,
     StyledButtonContainer,
     StyledButtonSection,
-} from './AddonForm.styles';
+} from './IntegrationForm.styles';
 import { useTheme } from '@mui/system';
 import { GO_BACK } from 'constants/navigate';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -54,7 +54,7 @@ interface IAddonFormProps {
     editMode: boolean;
 }
 
-export const AddonForm: VFC<IAddonFormProps> = ({
+export const IntegrationForm: VFC<IAddonFormProps> = ({
     editMode,
     provider,
     addon: initialValues,
@@ -272,7 +272,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                     <ConditionallyRender
                         condition={Boolean(installation)}
                         show={() => (
-                            <AddonInstall
+                            <IntegrationInstall
                                 url={installation!.url}
                                 title={installation!.title}
                                 helpText={installation!.helpText}
@@ -321,7 +321,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                     </StyledFormSection>
 
                     <StyledFormSection>
-                        <AddonMultiSelector
+                        <IntegrationMultiSelector
                             options={selectableEvents || []}
                             selectedItems={formValues.events}
                             onChange={setEventValues}
@@ -333,7 +333,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                         />
                     </StyledFormSection>
                     <StyledFormSection>
-                        <AddonMultiSelector
+                        <IntegrationMultiSelector
                             options={selectableProjects}
                             selectedItems={formValues.projects || []}
                             onChange={setProjects}
@@ -342,7 +342,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                         />
                     </StyledFormSection>
                     <StyledFormSection>
-                        <AddonMultiSelector
+                        <IntegrationMultiSelector
                             options={selectableEnvironments}
                             selectedItems={formValues.environments || []}
                             onChange={setEnvironments}
@@ -351,7 +351,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                         />
                     </StyledFormSection>
                     <StyledFormSection>
-                        <AddonParameters
+                        <IntegrationParameters
                             provider={provider}
                             config={formValues}
                             parametersErrors={errors.parameters}

diff --git a/...s/AddonForm/AddonInstall/AddonInstall.tsx → ...IntegrationInstall/IntegrationInstall.tsx b/...s/AddonForm/AddonInstall/AddonInstall.tsx → ...IntegrationInstall/IntegrationInstall.tsx
@@ -3,7 +3,7 @@ import {
     StyledFormSection,
     StyledHelpText,
     StyledTitle,
-} from '../AddonForm.styles';
+} from '../IntegrationForm.styles';
 import { Button } from '@mui/material';
 import { Link } from 'react-router-dom';
 
@@ -13,7 +13,7 @@ export interface IAddonInstallProps {
     helpText?: string;
 }
 
-export const AddonInstall = ({
+export const IntegrationInstall = ({
     url,
     title = 'Install addon',
     helpText = 'Click this button to install this addon.',

diff --git a/...MultiSelector/AddonMultiSelector.test.tsx → ...elector/IntegrationMultiSelector.test.tsx b/...MultiSelector/AddonMultiSelector.test.tsx → ...elector/IntegrationMultiSelector.test.tsx
@@ -4,15 +4,15 @@ import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from 'utils/testRenderer';
 import {
-    IAddonMultiSelectorProps,
-    AddonMultiSelector,
-} from './AddonMultiSelector';
+    IIntegrationMultiSelectorProps,
+    IntegrationMultiSelector,
+} from './IntegrationMultiSelector';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 
 const onChange = vi.fn();
 const onFocus = vi.fn();
 
-const mockProps: IAddonMultiSelectorProps = {
+const mockProps: IIntegrationMultiSelectorProps = {
     options: [
         { label: 'Project1', value: 'project1' },
         { label: 'Project2', value: 'project2' },
@@ -35,7 +35,9 @@ describe('AddonMultiSelector', () => {
     });
 
     it('renders with default state', () => {
-        render(<AddonMultiSelector {...mockProps} selectedItems={['*']} />);
+        render(
+            <IntegrationMultiSelector {...mockProps} selectedItems={['*']} />
+        );
 
         const checkbox = screen.getByLabelText(
             /all current and future projects/i
@@ -49,7 +51,9 @@ describe('AddonMultiSelector', () => {
 
     it('can toggle "ALL" checkbox', async () => {
         const user = userEvent.setup();
-        render(<AddonMultiSelector {...mockProps} selectedItems={['*']} />);
+        render(
+            <IntegrationMultiSelector {...mockProps} selectedItems={['*']} />
+        );
 
         await user.click(screen.getByTestId('select-all-projects'));
 
@@ -70,7 +74,10 @@ describe('AddonMultiSelector', () => {
 
     it('renders with autocomplete enabled if default value is not a wildcard', () => {
         render(
-            <AddonMultiSelector {...mockProps} selectedItems={['project1']} />
+            <IntegrationMultiSelector
+                {...mockProps}
+                selectedItems={['project1']}
+            />
         );
 
         const checkbox = screen.getByLabelText(
@@ -87,7 +94,7 @@ describe('AddonMultiSelector', () => {
         it("doesn't show up for less than 3 options", async () => {
             const user = userEvent.setup();
             render(
-                <AddonMultiSelector
+                <IntegrationMultiSelector
                     {...mockProps}
                     selectedItems={[]}
                     options={[
@@ -108,7 +115,7 @@ describe('AddonMultiSelector', () => {
     it('can filter options', async () => {
         const user = userEvent.setup();
         render(
-            <AddonMultiSelector
+            <IntegrationMultiSelector
                 {...mockProps}
                 selectedItems={[]}
                 options={[

diff --git a/...AddonMultiSelector/AddonMultiSelector.tsx → ...ultiSelector/IntegrationMultiSelector.tsx b/...AddonMultiSelector/AddonMultiSelector.tsx → ...ultiSelector/IntegrationMultiSelector.tsx
@@ -22,9 +22,9 @@ import {
     StyledHelpText,
     StyledSelectAllFormControlLabel,
     StyledTitle,
-} from '../AddonForm.styles';
+} from '../IntegrationForm.styles';
 
-export interface IAddonMultiSelectorProps {
+export interface IIntegrationMultiSelectorProps {
     options: IAutocompleteBoxOption[];
     selectedItems: string[];
     onChange: (value: string[]) => void;
@@ -44,7 +44,7 @@ const StyledCheckbox = styled(Checkbox)(() => ({
 
 const CustomPaper = ({ ...props }) => <Paper elevation={8} {...props} />;
 
-export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
+export const IntegrationMultiSelector: VFC<IIntegrationMultiSelectorProps> = ({
     options,
     selectedItems,
     onChange,
@@ -138,9 +138,9 @@ export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
 
     const DefaultHelpText = () => (
         <StyledHelpText>
-            Selecting {entityName}(s) here will filter events so that your addon
-            will only receive events that are tagged with one of your{' '}
-            {entityName}s.
+            Selecting {entityName}(s) here will filter events so that your
+            integration will only receive events that are tagged with one of
+            your {entityName}s.
         </StyledHelpText>
     );
 

diff --git a/...ameters/AddonParameter/AddonParameter.tsx → ...grationParameter/IntegrationParameter.tsx b/...ameters/AddonParameter/AddonParameter.tsx → ...grationParameter/IntegrationParameter.tsx
@@ -1,7 +1,7 @@
 import { TextField, Typography } from '@mui/material';
 import { IAddonConfig, IAddonProviderParams } from 'interfaces/addons';
 import { ChangeEventHandler } from 'react';
-import { StyledAddonParameterContainer } from '../../AddonForm.styles';
+import { StyledAddonParameterContainer } from '../../IntegrationForm.styles';
 
 const resolveType = ({ type = 'text', sensitive = false }, value: string) => {
     if (sensitive && value === MASKED_VALUE) {
@@ -15,19 +15,19 @@ const resolveType = ({ type = 'text', sensitive = false }, value: string) => {
 
 const MASKED_VALUE = '*****';
 
-export interface IAddonParameterProps {
+export interface IIntegrationParameterProps {
     parametersErrors: Record<string, string>;
     definition: IAddonProviderParams;
     setParameterValue: (param: string) => ChangeEventHandler<HTMLInputElement>;
     config: IAddonConfig;
 }
 
-export const AddonParameter = ({
+export const IntegrationParameter = ({
     definition,
     config,
     parametersErrors,
     setParameterValue,
-}: IAddonParameterProps) => {
+}: IIntegrationParameterProps) => {
     const value = config.parameters[definition.name] || '';
     const type = resolveType(definition, value);
     const error = parametersErrors[definition.name];

diff --git a/...nForm/AddonParameters/AddonParameters.tsx → ...ationParameters/IntegrationParameters.tsx b/...nForm/AddonParameters/AddonParameters.tsx → ...ationParameters/IntegrationParameters.tsx
@@ -1,26 +1,26 @@
 import React from 'react';
 import { IAddonProvider } from 'interfaces/addons';
 import {
-    AddonParameter,
-    IAddonParameterProps,
-} from './AddonParameter/AddonParameter';
-import { StyledTitle } from '../AddonForm.styles';
+    IntegrationParameter,
+    IIntegrationParameterProps,
+} from './IntegrationParameter/IntegrationParameter';
+import { StyledTitle } from '../IntegrationForm.styles';
 
-interface IAddonParametersProps {
+interface IIntegrationParametersProps {
     provider?: IAddonProvider;
-    parametersErrors: IAddonParameterProps['parametersErrors'];
+    parametersErrors: IIntegrationParameterProps['parametersErrors'];
     editMode: boolean;
-    setParameterValue: IAddonParameterProps['setParameterValue'];
-    config: IAddonParameterProps['config'];
+    setParameterValue: IIntegrationParameterProps['setParameterValue'];
+    config: IIntegrationParameterProps['config'];
 }
 
-export const AddonParameters = ({
+export const IntegrationParameters = ({
     provider,
     config,
     parametersErrors,
     setParameterValue,
     editMode,
-}: IAddonParametersProps) => {
+}: IIntegrationParametersProps) => {
     if (!provider) return null;
     return (
         <React.Fragment>
@@ -33,7 +33,7 @@ export const AddonParameters = ({
                 </p>
             ) : null}
             {provider.parameters.map(parameter => (
-                <AddonParameter
+                <IntegrationParameter
                     key={parameter.name}
                     definition={parameter}
                     parametersErrors={parametersErrors}