From e4a126c048e18571f80a0ff90fd9cf2f2c0b712b Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 1 Nov 2024 11:04:11 +0100 Subject: [PATCH 1/7] chore: conditionally move import button to filter row --- .../ProjectFeatureToggles.tsx | 53 ++++++++++++++++--- .../src/component/project/Project/Project.tsx | 10 ++-- 2 files changed, 50 insertions(+), 13 deletions(-) diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index 73524c4f5b21..50bee4226d99 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -1,3 +1,4 @@ +import { ReactComponent as ImportSvg } from 'assets/icons/import.svg'; import { useCallback, useMemo, useState } from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { PageContent } from 'component/common/PageContent/PageContent'; @@ -49,6 +50,10 @@ import { ProjectOnboarded } from 'component/onboarding/flow/ProjectOnboarded'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { ArchivedFeatureActionCell } from '../../../archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureActionCell'; import { ArchiveBatchActions } from '../../../archive/ArchiveTable/ArchiveBatchActions'; +import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton'; +import { UPDATE_FEATURE } from '@server/types/permissions'; +import { ImportModal } from '../Import/ImportModal'; +import { IMPORT_BUTTON } from 'utils/testIds'; interface IPaginatedProjectFeatureTogglesProps { environments: string[]; @@ -66,6 +71,19 @@ const Container = styled('div')(({ theme }) => ({ gap: theme.spacing(2), })); +const FilterRow = styled('div')(({ theme }) => ({ + display: 'flex', + flexFlow: 'row wrap', + gap: theme.spacing(2), + justifyContent: 'space-between', +})); + +const ButtonGroup = styled('div')(({ theme }) => ({ + display: 'flex', + gap: theme.spacing(1), + paddingInline: theme.spacing(1.5), +})); + export const ProjectFeatureToggles = ({ environments, }: IPaginatedProjectFeatureTogglesProps) => { @@ -74,6 +92,8 @@ export const ProjectFeatureToggles = ({ const projectId = useRequiredPathParam('projectId'); const { project } = useProjectOverview(projectId); const [connectSdkOpen, setConnectSdkOpen] = useState(false); + const simplifyProjectOverview = useUiFlag('simplifyProjectOverview'); + const [modalOpen, setModalOpen] = useState(false); const { features, @@ -561,11 +581,27 @@ export const ProjectFeatureToggles = ({ aria-busy={isPlaceholder} aria-live='polite' > - + + + {simplifyProjectOverview && ( + + setModalOpen(true)} + tooltipProps={{ title: 'Import' }} + data-testid={IMPORT_BUTTON} + data-loading-project + > + + + + )} + @@ -583,7 +619,6 @@ export const ProjectFeatureToggles = ({ } /> {rowActionsDialogs} - {featureToggleModals} @@ -627,6 +662,12 @@ export const ProjectFeatureToggles = ({ /> )} + + ); }; diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 029624a29d04..1e53faa218ed 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -24,12 +24,7 @@ import { } from '@mui/material'; import useToast from 'hooks/useToast'; import useQueryParams from 'hooks/useQueryParams'; -import { - type PropsWithChildren, - useEffect, - useState, - type ReactNode, -} from 'react'; +import { useEffect, useState, type ReactNode } from 'react'; import ProjectEnvironment from '../ProjectEnvironment/ProjectEnvironment'; import { ProjectFeaturesArchive } from './ProjectFeaturesArchive/ProjectFeaturesArchive'; import ProjectFlags from './ProjectFlags'; @@ -266,7 +261,8 @@ export const Project = () => { Date: Fri, 1 Nov 2024 11:14:22 +0100 Subject: [PATCH 2/7] chore: add modal container --- .../src/component/project/Project/Project.tsx | 16 ++++++++++++++ .../project/Project/ProjectStatusModal.tsx | 21 +++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 frontend/src/component/project/Project/ProjectStatusModal.tsx diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 1e53faa218ed..4775f78b5ae6 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -21,6 +21,7 @@ import { Tabs, Typography, styled, + IconButton, } from '@mui/material'; import useToast from 'hooks/useToast'; import useQueryParams from 'hooks/useQueryParams'; @@ -54,6 +55,7 @@ import { ProjectArchived } from './ArchiveProject/ProjectArchived'; import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker'; import { useUiFlag } from 'hooks/useUiFlag'; import { useActionableChangeRequests } from 'hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests'; +import { ProjectStatusModal } from './ProjectStatusModal'; const StyledBadge = styled(Badge)(({ theme }) => ({ position: 'absolute', @@ -115,6 +117,7 @@ export const Project = () => { const projectName = project?.name || projectId; const { favorite, unfavorite } = useFavoriteProjectsApi(); const simplifyProjectOverview = useUiFlag('simplifyProjectOverview'); + const [projectStatusOpen, setProjectStatusOpen] = useState(false); const [showDelDialog, setShowDelDialog] = useState(false); @@ -277,6 +280,15 @@ export const Project = () => { } /> + {simplifyProjectOverview && ( + setProjectStatusOpen(true)} + // data-loading-project + > + HEY + + )} @@ -389,6 +401,10 @@ export const Project = () => { setOpen={setModalOpen} project={projectId} /> + setProjectStatusOpen(false)} + /> ); }; diff --git a/frontend/src/component/project/Project/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatusModal.tsx new file mode 100644 index 000000000000..aa65320b359a --- /dev/null +++ b/frontend/src/component/project/Project/ProjectStatusModal.tsx @@ -0,0 +1,21 @@ +import { styled } from '@mui/material'; +import { SidebarModal } from 'component/common/SidebarModal/SidebarModal'; + +const ModalContentContainer = styled('div')(({ theme }) => ({ + minHeight: '100vh', + display: 'flex', + backgroundColor: theme.palette.background.default, +})); + +type Props = { + open: boolean; + close: () => void; +}; + +export const ProjectStatusModal = ({ open, close }: Props) => { + return ( + + + + ); +}; From 5c089a7c55fb52a5ca2fcd67fd96cf442b7a3ffc Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 1 Nov 2024 11:18:40 +0100 Subject: [PATCH 3/7] chore: use the right button type --- .../src/component/project/Project/Project.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 4775f78b5ae6..e7bd4cabcab5 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -21,7 +21,7 @@ import { Tabs, Typography, styled, - IconButton, + Button, } from '@mui/material'; import useToast from 'hooks/useToast'; import useQueryParams from 'hooks/useQueryParams'; @@ -102,6 +102,12 @@ const ChangeRequestsLabel = () => { ); }; +const ProjectStatusButton = styled(Button)(({ theme }) => ({ + color: theme.palette.text.primary, + fontSize: theme.typography.body1.fontSize, + fontWeight: 'bold', +})); + export const Project = () => { const projectId = useRequiredPathParam('projectId'); const { trackEvent } = usePlausibleTracker(); @@ -281,13 +287,13 @@ export const Project = () => { } /> {simplifyProjectOverview && ( - setProjectStatusOpen(true)} - // data-loading-project + startIcon={} + data-loading-project > - HEY - + Project status + )} From 2e027559c062584159323685dcd66beb4f59a7d4 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 1 Nov 2024 11:23:55 +0100 Subject: [PATCH 4/7] chore: add the project status icon --- frontend/src/assets/icons/projectStatus.svg | 3 +++ frontend/src/component/project/Project/Project.tsx | 6 +++++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 frontend/src/assets/icons/projectStatus.svg diff --git a/frontend/src/assets/icons/projectStatus.svg b/frontend/src/assets/icons/projectStatus.svg new file mode 100644 index 000000000000..8872e15086db --- /dev/null +++ b/frontend/src/assets/icons/projectStatus.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index e7bd4cabcab5..59dd6ec59822 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -2,6 +2,7 @@ import { useNavigate } from 'react-router'; import useLoading from 'hooks/useLoading'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ReactComponent as ImportSvg } from 'assets/icons/import.svg'; +import { ReactComponent as ProjectStatusSvg } from 'assets/icons/projectStatus.svg'; import { StyledDiv, StyledFavoriteIconButton, @@ -106,6 +107,9 @@ const ProjectStatusButton = styled(Button)(({ theme }) => ({ color: theme.palette.text.primary, fontSize: theme.typography.body1.fontSize, fontWeight: 'bold', + svg: { + fill: theme.palette.primary.main, + }, })); export const Project = () => { @@ -289,7 +293,7 @@ export const Project = () => { {simplifyProjectOverview && ( setProjectStatusOpen(true)} - startIcon={} + startIcon={} data-loading-project > Project status From b7d9d90e6481a869271e284047170aef417b382e Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 1 Nov 2024 11:29:45 +0100 Subject: [PATCH 5/7] chore: add fill to the svg so it's not seethrough --- frontend/src/assets/icons/projectStatus.svg | 2 +- frontend/src/component/project/Project/Project.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/assets/icons/projectStatus.svg b/frontend/src/assets/icons/projectStatus.svg index 8872e15086db..713e29eb62d3 100644 --- a/frontend/src/assets/icons/projectStatus.svg +++ b/frontend/src/assets/icons/projectStatus.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx index 59dd6ec59822..0a3f6f0e45c4 100644 --- a/frontend/src/component/project/Project/Project.tsx +++ b/frontend/src/component/project/Project/Project.tsx @@ -107,7 +107,7 @@ const ProjectStatusButton = styled(Button)(({ theme }) => ({ color: theme.palette.text.primary, fontSize: theme.typography.body1.fontSize, fontWeight: 'bold', - svg: { + 'svg *': { fill: theme.palette.primary.main, }, })); From a6e63a7ca39808adc8ec6561c2604782f4eb0198 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 1 Nov 2024 11:56:27 +0100 Subject: [PATCH 6/7] chore: fix label --- frontend/src/component/project/Project/ProjectStatusModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/project/Project/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatusModal.tsx index aa65320b359a..fbea8e31b3e9 100644 --- a/frontend/src/component/project/Project/ProjectStatusModal.tsx +++ b/frontend/src/component/project/Project/ProjectStatusModal.tsx @@ -14,7 +14,7 @@ type Props = { export const ProjectStatusModal = ({ open, close }: Props) => { return ( - + ); From 72b710e48ecba348428dd829c4ef96ba02072d9c Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 1 Nov 2024 11:56:53 +0100 Subject: [PATCH 7/7] chore: fix other label --- frontend/src/component/project/Project/Import/ImportModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/project/Project/Import/ImportModal.tsx b/frontend/src/component/project/Project/Import/ImportModal.tsx index 9147065a723a..7418be897a99 100644 --- a/frontend/src/component/project/Project/Import/ImportModal.tsx +++ b/frontend/src/component/project/Project/Import/ImportModal.tsx @@ -73,7 +73,7 @@ export const ImportModal = ({ open, setOpen, project }: IImportModalProps) => { }; return ( - + Process