From f30a8a66b0c7fb8f72d970793dc582c079305f9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Tue, 14 Feb 2023 16:03:53 +0000 Subject: [PATCH] refactor: remove old components after variants per env (#3110) https://linear.app/unleash/issue/2-427/clean-up-previous-components-from-the-old-ui Major clean up after we fully migrated to variants per environment, removing old components. You can read more about it in the original PR: https://github.com/Unleash/unleash/pull/2453 --- frontend/src/component/common/util.ts | 2 +- .../FeatureOverviewEnvSwitch.tsx | 160 ------ .../FeatureOverviewEnvSwitches.tsx | 103 ---- .../FeatureOverviewMetaData.tsx | 10 - .../FeatureOverviewTags.tsx | 170 ------ .../FeatureEnvironmentVariants.tsx | 3 + .../FeatureVariants/FeatureVariants.styles.ts | 9 - .../FeatureVariants/FeatureVariants.tsx | 10 - .../AddFeatureVariant/AddFeatureVariant.tsx | 400 -------------- .../OverrideConfig/OverrideConfig.tsx | 152 ------ .../AddFeatureVariant/useOverrides.test.ts | 154 ------ .../AddFeatureVariant/useOverrides.ts | 41 -- .../FeatureVariantsList.tsx | 489 ------------------ .../PayloadOverridesCell.tsx | 26 - .../VariantsActionsCell.tsx | 55 -- .../useDeleteVariantMarkup.tsx | 31 -- .../feature/FeatureView/FeatureView.tsx | 7 +- .../enums.ts => constants/weightTypes.ts} | 0 18 files changed, 9 insertions(+), 1813 deletions(-) delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.styles.ts delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/useOverrides.test.ts delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/useOverrides.ts delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/PayloadOverridesCell/PayloadOverridesCell.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/VariantsActionsCell/VariantsActionsCell.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/useDeleteVariantMarkup.tsx rename frontend/src/{component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/enums.ts => constants/weightTypes.ts} (100%) diff --git a/frontend/src/component/common/util.ts b/frontend/src/component/common/util.ts index ad28583e0f..ce6348664a 100644 --- a/frontend/src/component/common/util.ts +++ b/frontend/src/component/common/util.ts @@ -1,4 +1,4 @@ -import { weightTypes } from '../feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/enums'; +import { weightTypes } from 'constants/weightTypes'; import { IUiConfig } from 'interfaces/uiConfig'; import { INavigationMenuItem } from 'interfaces/route'; import { IFeatureVariant } from 'interfaces/featureToggle'; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx deleted file mode 100644 index b0ccc91e61..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import { ENVIRONMENT_STRATEGY_ERROR } from 'constants/apiErrors'; -import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi'; -import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; -import useToast from 'hooks/useToast'; -import { IFeatureEnvironment } from 'interfaces/featureToggle'; -import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch'; -import StringTruncator from 'component/common/StringTruncator/StringTruncator'; -import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions'; -import React from 'react'; -import { formatUnknownError } from 'utils/formatUnknownError'; -import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; -import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle'; -import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog'; -import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage'; -import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled'; -import { styled } from '@mui/material'; -import { FeatureOverviewSidePanelEnvironmentHider } from '../../FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider'; - -interface IFeatureOverviewEnvSwitchProps { - env: IFeatureEnvironment; - callback?: () => void; - text?: string; - showInfoBox: () => void; - hiddenEnvironments: Set; - setHiddenEnvironments: (environment: string) => void; -} - -const StyledContainer = styled('div')({ - display: 'flex', - alignItems: 'center', -}); - -const StyledLabel = styled('label')({ - display: 'inline-flex', - alignItems: 'center', - cursor: 'pointer', -}); - -const FeatureOverviewEnvSwitch = ({ - env, - callback, - text, - showInfoBox, - hiddenEnvironments, - setHiddenEnvironments, -}: IFeatureOverviewEnvSwitchProps) => { - const projectId = useRequiredPathParam('projectId'); - const featureId = useRequiredPathParam('featureId'); - const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } = - useFeatureApi(); - const { refetchFeature } = useFeature(projectId, featureId); - const { setToastData, setToastApiError } = useToast(); - const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId); - const { - onChangeRequestToggle, - onChangeRequestToggleClose, - onChangeRequestToggleConfirm, - changeRequestDialogDetails, - } = useChangeRequestToggle(projectId); - - const handleToggleEnvironmentOn = async () => { - try { - await toggleFeatureEnvironmentOn(projectId, featureId, env.name); - setToastData({ - type: 'success', - title: `Available in ${env.name}`, - text: `${featureId} is now available in ${env.name} based on its defined strategies.`, - }); - refetchFeature(); - if (callback) { - callback(); - } - } catch (error: unknown) { - if ( - error instanceof Error && - error.message === ENVIRONMENT_STRATEGY_ERROR - ) { - showInfoBox(); - } else { - setToastApiError(formatUnknownError(error)); - } - } - }; - - const handleToggleEnvironmentOff = async () => { - try { - await toggleFeatureEnvironmentOff(projectId, featureId, env.name); - setToastData({ - type: 'success', - title: `Unavailable in ${env.name}`, - text: `${featureId} is unavailable in ${env.name} and its strategies will no longer have any effect.`, - }); - refetchFeature(); - if (callback) { - callback(); - } - } catch (error: unknown) { - setToastApiError(formatUnknownError(error)); - } - }; - - const toggleEnvironment = async (e: React.ChangeEvent) => { - if (isChangeRequestConfigured(env.name)) { - e.preventDefault(); - onChangeRequestToggle(featureId, env.name, !env.enabled); - return; - } - if (env.enabled) { - await handleToggleEnvironmentOff(); - return; - } - await handleToggleEnvironmentOn(); - }; - - let content = text ? ( - text - ) : ( - <> - {' '} - {env.enabled ? 'enabled' : 'disabled'} in -   - - - ); - - return ( - - - - {content} - - - - } - /> - - ); -}; - -export default FeatureOverviewEnvSwitch; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx deleted file mode 100644 index 8c741f9c77..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { useState } from 'react'; -import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi'; -import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; -import EnvironmentStrategyDialog from 'component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog'; -import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch'; -import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; -import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; -import { styled } from '@mui/material'; - -const StyledContainer = styled('div')(({ theme }) => ({ - borderRadius: theme.shape.borderRadiusLarge, - backgroundColor: theme.palette.background.paper, - display: 'flex', - flexDirection: 'column', - padding: '1.5rem', - maxWidth: '350px', - minWidth: '350px', - marginRight: '1rem', - marginTop: '1rem', - [theme.breakpoints.down(1000)]: { - marginBottom: '1rem', - width: '100%', - maxWidth: 'none', - minWidth: 'auto', - }, -})); - -const StyledHeader = styled('h3')(({ theme }) => ({ - display: 'flex', - gap: theme.spacing(1), - alignItems: 'center', - fontSize: theme.fontSizes.bodySize, - fontWeight: 'normal', - margin: 0, - marginBottom: '0.5rem', - - // Make the help icon align with the text. - '& > :last-child': { - position: 'relative', - top: 1, - }, -})); - -interface IFeatureOverviewEnvSwitchesProps { - hiddenEnvironments: Set; - setHiddenEnvironments: (environment: string) => void; -} - -const FeatureOverviewEnvSwitches = ({ - hiddenEnvironments, - setHiddenEnvironments, -}: IFeatureOverviewEnvSwitchesProps) => { - const projectId = useRequiredPathParam('projectId'); - const featureId = useRequiredPathParam('featureId'); - const { feature } = useFeature(projectId, featureId); - useFeatureApi(); - - const [showInfoBox, setShowInfoBox] = useState(false); - const [environmentName, setEnvironmentName] = useState(''); - - const closeInfoBox = () => { - setShowInfoBox(false); - }; - - const renderEnvironmentSwitches = () => { - return feature?.environments.map(env => { - return ( - { - setEnvironmentName(env.name); - setShowInfoBox(true); - }} - /> - ); - }); - }; - - return ( - - - Feature toggle status - - - {renderEnvironmentSwitches()} - - - ); -}; - -export default FeatureOverviewEnvSwitches; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx index 0320a74e83..05f0a1bbb7 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx @@ -6,10 +6,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { Edit } from '@mui/icons-material'; import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions'; -import useFeatureTags from 'hooks/api/getters/useFeatureTags/useFeatureTags'; -import FeatureOverviewTags from './FeatureOverviewTags/FeatureOverviewTags'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; const StyledContainer = styled('div')(({ theme }) => ({ borderRadius: theme.shape.borderRadiusLarge, @@ -31,11 +28,6 @@ const StyledPaddingContainerTop = styled('div')({ padding: '1.5rem 1.5rem 0 1.5rem', }); -const StyledPaddingContainerBottom = styled('div')(({ theme }) => ({ - padding: '0 1.5rem 1.5rem 1.5rem', - borderTop: `1px solid ${theme.palette.divider}`, -})); - const StyledMetaDataHeader = styled('div')({ display: 'flex', alignItems: 'center', @@ -66,10 +58,8 @@ const StyledDescriptionContainer = styled('div')(({ theme }) => ({ })); const FeatureOverviewMetaData = () => { - const { uiConfig } = useUiConfig(); const projectId = useRequiredPathParam('projectId'); const featureId = useRequiredPathParam('featureId'); - const { tags } = useFeatureTags(featureId); const { feature } = useFeature(projectId, featureId); const { project, description, type } = feature; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx deleted file mode 100644 index cee5999d8d..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import React, { useContext, useState } from 'react'; -import { Chip, styled } from '@mui/material'; -import { Close, Label } from '@mui/icons-material'; -import useFeatureTags from 'hooks/api/getters/useFeatureTags/useFeatureTags'; -import slackIcon from 'assets/icons/slack.svg'; -import jiraIcon from 'assets/icons/jira.svg'; -import webhookIcon from 'assets/icons/webhooks.svg'; -import { formatAssetPath } from 'utils/formatPath'; -import useTagTypes from 'hooks/api/getters/useTagTypes/useTagTypes'; -import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi'; -import { Dialogue } from 'component/common/Dialogue/Dialogue'; -import { ITag } from 'interfaces/tags'; -import useToast from 'hooks/useToast'; -import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import AccessContext from 'contexts/AccessContext'; -import { formatUnknownError } from 'utils/formatUnknownError'; -import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; - -interface IFeatureOverviewTagsProps { - projectId: string; -} - -const StyledContainer = styled('div')(({ theme }) => ({ - borderRadius: theme.shape.borderRadiusLarge, - backgroundColor: theme.palette.primary.main, - display: 'flex', - flexDirection: 'column', - marginRight: theme.spacing(2), - marginTop: theme.spacing(2), - [theme.breakpoints.down(800)]: { - width: '100%', - maxWidth: 'none', - }, -})); - -const StyledTagChip = styled(Chip)(({ theme }) => ({ - marginRight: theme.spacing(0.5), - marginTop: theme.spacing(1), - backgroundColor: theme.palette.text.tertiaryContrast, - fontSize: theme.fontSizes.smallBody, -})); - -const StyledCloseIcon = styled(Close)(({ theme }) => ({ - color: theme.palette.primary.light, - '&:hover': { - color: theme.palette.primary.light, - }, -})); - -const FeatureOverviewTags: React.FC = ({ - projectId, - ...rest -}) => { - const [showDelDialog, setShowDelDialog] = useState(false); - const [selectedTag, setSelectedTag] = useState({ - value: '', - type: '', - }); - const featureId = useRequiredPathParam('featureId'); - const { tags, refetch } = useFeatureTags(featureId); - const { tagTypes } = useTagTypes(); - const { deleteTagFromFeature } = useFeatureApi(); - const { setToastData, setToastApiError } = useToast(); - const { hasAccess } = useContext(AccessContext); - const canDeleteTag = hasAccess(UPDATE_FEATURE, projectId); - - const handleDelete = async () => { - try { - await deleteTagFromFeature( - featureId, - selectedTag.type, - selectedTag.value - ); - refetch(); - setToastData({ - type: 'success', - title: 'Tag deleted', - text: 'Successfully deleted tag', - }); - } catch (error: unknown) { - setToastApiError(formatUnknownError(error)); - } - }; - - const tagIcon = (typeName: string) => { - let tagType = tagTypes.find(type => type.name === typeName); - - const style = { width: '20px', height: '20px', marginRight: '5px' }; - - if (tagType && tagType.icon) { - switch (tagType.name) { - case 'slack': - return ( - Slack - ); - case 'jira': - return ( - JIRA - ); - case 'webhook': - return ( - Webhook - ); - default: - return