Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-09 13:47:13 +02:00
Code Issues Projects Releases Wiki Activity

rename frontend components from addons to integrations

Browse Source
This commit is contained in:
Tymoteusz Czech 2023-08-18 11:39:43 +02:00
parent 9ec8ff9a51
commit 583dc8048a
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
17 changed files with 81 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/addons/CreateAddon/CreateAddon.tsx → frontend/src/component/integrations/CreateIntegration/CreateIntegration.tsx
View File

@ -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}

8
frontend/src/component/addons/EditAddon/EditAddon.tsx → frontend/src/component/integrations/EditIntegration/EditIntegration.tsx
View File

@ -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}

0
frontend/src/component/addons/AddonForm/AddonForm.styles.tsx → frontend/src/component/integrations/IntegrationForm/IntegrationForm.styles.tsx
View File

20
frontend/src/component/addons/AddonForm/AddonForm.tsx → frontend/src/component/integrations/IntegrationForm/IntegrationForm.tsx
View File

@ -16,8 +16,8 @@ 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';
@ -25,7 +25,7 @@ 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}

4
frontend/src/component/addons/AddonForm/AddonInstall/AddonInstall.tsx → frontend/src/component/integrations/IntegrationForm/IntegrationInstall/IntegrationInstall.tsx
View File

@ -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.',

18
frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.test.tsx → frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.test.tsx
View File

@ -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,7 @@ 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 +49,7 @@ 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 +70,7 @@ 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 +87,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 +108,7 @@ describe('AddonMultiSelector', () => {
it('can filter options', async () => {
const user = userEvent.setup();
render(
<AddonMultiSelector
<IntegrationMultiSelector
{...mockProps}
selectedItems={[]}
options={[

8
frontend/src/component/addons/AddonForm/AddonMultiSelector/AddonMultiSelector.tsx → frontend/src/component/integrations/IntegrationForm/IntegrationMultiSelector/IntegrationMultiSelector.tsx
View File

@ -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,7 +138,7 @@ export const AddonMultiSelector: VFC<IAddonMultiSelectorProps> = ({
const DefaultHelpText = () => (
<StyledHelpText>
Selecting {entityName}(s) here will filter events so that your addon
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>

8
frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx → frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameter/IntegrationParameter.tsx
View File

@ -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];

22
frontend/src/component/addons/AddonForm/AddonParameters/AddonParameters.tsx → frontend/src/component/integrations/IntegrationForm/IntegrationParameters/IntegrationParameters.tsx
View File

@ -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}

18
frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx → frontend/src/component/integrations/IntegrationList/AvailableIntegrations/AvailableIntegrations.tsx
View File

@ -16,9 +16,9 @@ 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 { ConfigureAddonButton } from './ConfigureAddonButton/ConfigureAddonButton';
import { AddonIcon } from '../AddonIcon/AddonIcon';
import { AddonNameCell } from '../AddonNameCell/AddonNameCell';
import { ConfigureIntegrationButton } from './ConfigureIntegrationButton/ConfigureIntegrationButton';
import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
import { IntegrationNameCell } from '../IntegrationNameCell/IntegrationNameCell';
import { IAddonInstallation } from 'interfaces/addons';
interface IProvider {
@ -32,15 +32,15 @@ interface IProvider {
deprecated?: string;
}
interface IAvailableAddonsProps {
interface IAvailableIntegrationsProps {
providers: IProvider[];
loading: boolean;
}
export const AvailableAddons = ({
export const AvailableIntegrations = ({
providers,
loading,
}: IAvailableAddonsProps) => {
}: IAvailableIntegrationsProps) => {
const data = useMemo(() => {
if (loading) {
return Array(5).fill({
@ -70,7 +70,7 @@ export const AvailableAddons = ({
},
}: any) => {
return (
<IconCell icon={<AddonIcon name={name as string} />} />
<IconCell icon={<IntegrationIcon name={name as string} />} />
);
},
},
@ -79,7 +79,7 @@ export const AvailableAddons = ({
accessor: 'name',
width: '90%',
Cell: ({ row: { original } }: any) => (
<AddonNameCell provider={original} />
<IntegrationNameCell provider={original} />
),
sortType: 'alphanumeric',
},
@ -88,7 +88,7 @@ export const AvailableAddons = ({
align: 'center',
Cell: ({ row: { original } }: any) => (
<ActionCell>
<ConfigureAddonButton provider={original} />
<ConfigureIntegrationButton provider={original} />
</ActionCell>
),
width: 150,

6
frontend/src/component/addons/AddonList/AvailableAddons/ConfigureAddonButton/ConfigureAddonButton.tsx → frontend/src/component/integrations/IntegrationList/AvailableIntegrations/ConfigureIntegrationButton/ConfigureIntegrationButton.tsx
View File

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

12
frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx → frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx
View File

@ -13,11 +13,11 @@ import { useTable, useSortBy } from 'react-table';
import { PageHeader } from 'component/common/PageHeader/PageHeader';
import { SortableTableHeader, TablePlaceholder } from 'component/common/Table';
import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
import { AddonIcon } from '../AddonIcon/AddonIcon';
import { ConfiguredAddonsActionsCell } from './ConfiguredAddonsActionCell/ConfiguredAddonsActionsCell';
import { AddonNameCell } from '../AddonNameCell/AddonNameCell';
import { IntegrationIcon } from '../IntegrationIcon/IntegrationIcon';
import { ConfiguredAddonsActionsCell } from './ConfiguredIntegrationsActionCell/ConfiguredIntegrationActionsCell';
import { IntegrationNameCell } from '../IntegrationNameCell/IntegrationNameCell';
export const ConfiguredAddons = () => {
export const ConfiguredIntegrations = () => {
const { refetchAddons, addons, providers, loading } = useAddons();
const { updateAddon, removeAddon } = useAddonsApi();
const { setToastData, setToastApiError } = useToast();
@ -73,7 +73,7 @@ export const ConfiguredAddons = () => {
original: { provider },
},
}: any) => (
<IconCell icon={<AddonIcon name={provider as string} />} />
<IconCell icon={<IntegrationIcon name={provider as string} />} />
),
disableSortBy: true,
},
@ -86,7 +86,7 @@ export const ConfiguredAddons = () => {
original: { provider, description },
},
}: any) => (
<AddonNameCell
<IntegrationNameCell
provider={{
...(providers.find(
({ name }) => name === provider

0
frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddonsActionCell/ConfiguredAddonsActionsCell.tsx → frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrationsActionCell/ConfiguredIntegrationActionsCell.tsx
View File

4
frontend/src/component/addons/AddonList/AddonIcon/AddonIcon.tsx → frontend/src/component/integrations/IntegrationList/IntegrationIcon/IntegrationIcon.tsx
View File

@ -14,11 +14,11 @@ const style: React.CSSProperties = {
marginRight: '16px',
};
interface IAddonIconProps {
interface IIntegrationIconProps {
name: string;
}
export const AddonIcon = ({ name }: IAddonIconProps) => {
export const IntegrationIcon = ({ name }: IIntegrationIconProps) => {
switch (name) {
case 'slack':
case 'slack-app':

10
frontend/src/component/addons/AddonList/AddonList.tsx → frontend/src/component/integrations/IntegrationList/IntegrationList.tsx
View File

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

4
frontend/src/component/addons/AddonList/AddonNameCell/AddonNameCell.tsx → frontend/src/component/integrations/IntegrationList/IntegrationNameCell/IntegrationNameCell.tsx
View File

@ -10,14 +10,14 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
marginLeft: theme.spacing(1),
}));
interface IAddonNameCellProps {
interface IIntegrationNameCellProps {
provider: Pick<
IAddonProvider,
'displayName' | 'description' | 'deprecated'
>;
}
export const AddonNameCell = ({ provider }: IAddonNameCellProps) => (
export const IntegrationNameCell = ({ provider }: IIntegrationNameCellProps) => (
<HighlightCell
value={provider.displayName}
subtitle={provider.description}

14
frontend/src/component/menu/routes.ts
View File

@ -2,7 +2,7 @@ import { FeatureToggleListTable } from 'component/feature/FeatureToggleList/Feat
import { StrategyView } from 'component/strategies/StrategyView/StrategyView';
import { StrategiesList } from 'component/strategies/StrategiesList/StrategiesList';
import { TagTypeList } from 'component/tags/TagTypeList/TagTypeList';
import { AddonList } from 'component/addons/AddonList/AddonList';
import { IntegrationList } from 'component/integrations/IntegrationList/IntegrationList';
import Login from 'component/user/Login/Login';
import { EEA, P, SE } from 'component/common/flags';
import { NewUser } from 'component/user/NewUser/NewUser';
@ -22,8 +22,8 @@ import { ApplicationEdit } from 'component/application/ApplicationEdit/Applicati
import { ApplicationList } from 'component/application/ApplicationList/ApplicationList';
import ContextList from 'component/context/ContextList/ContextList/ContextList';
import RedirectFeatureView from 'component/feature/RedirectFeatureView/RedirectFeatureView';
import { CreateAddon } from 'component/addons/CreateAddon/CreateAddon';
import { EditAddon } from 'component/addons/EditAddon/EditAddon';
import { CreateIntegration } from 'component/integrations/CreateIntegration/CreateIntegration';
import { EditIntegration } from 'component/integrations/EditIntegration/EditIntegration';
import { CopyFeatureToggle } from 'component/feature/CopyFeature/CopyFeature';
import { EventPage } from 'component/events/EventPage/EventPage';
import { CreateStrategy } from 'component/strategies/CreateStrategy/CreateStrategy';
@ -305,7 +305,7 @@ export const routes: IRoute[] = [
path: '/addons/create/:providerId',
parent: '/addons',
title: 'Create',
component: CreateAddon,
component: CreateIntegration,
type: 'protected',
menu: {},
},
@ -313,14 +313,14 @@ export const routes: IRoute[] = [
path: '/addons/edit/:addonId',
parent: '/addons',
title: 'Edit',
component: EditAddon,
component: EditIntegration,
type: 'protected',
menu: {},
},
{
path: '/addons',
title: 'Addons',
component: AddonList,
component: IntegrationList,
hidden: false,
type: 'protected',
menu: { mobile: true, advanced: true },
@ -329,7 +329,7 @@ export const routes: IRoute[] = [
{
path: '/integrations',
title: 'Integrations',
component: AddonList,
component: IntegrationList,
hidden: false,
type: 'protected',
menu: { mobile: true, advanced: true },