From 579948ea6da5be3108ce94eda4aaad752ee03b4d Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Wed, 12 Jun 2024 20:18:39 +0800 Subject: [PATCH 1/8] feat: added projects list view --- .../src/pages/org/[id]/overview/index.tsx | 377 +++++++++++------- 1 file changed, 237 insertions(+), 140 deletions(-) diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx index 17cf8537c..e5d4ffc3c 100644 --- a/frontend/src/pages/org/[id]/overview/index.tsx +++ b/frontend/src/pages/org/[id]/overview/index.tsx @@ -17,10 +17,14 @@ import { faClipboard, faExclamationCircle, faHandPeace, + faList, faMagnifyingGlass, faNetworkWired, faPlug, faPlus, + faProjectDiagram, + faTableCells, + faTableColumns, faUserPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -34,6 +38,9 @@ import onboardingCheck from "@app/components/utilities/checks/OnboardingCheck"; import { Button, Checkbox, + DropdownMenu, + DropdownMenuContent, + DropdownMenuTrigger, FormControl, Input, Modal, @@ -86,6 +93,11 @@ type ItemProps = { link?: string; }; +enum ProjectsViewMode { + GRID = "grid", + LIST = "list" +} + function copyToClipboard(id: string, setState: (value: boolean) => void) { // Get the text field const copyText = document.getElementById(id) as HTMLInputElement; @@ -309,8 +321,9 @@ const LearningItem = ({ href={link} >
null} @@ -321,10 +334,11 @@ const LearningItem = ({ await registerUserAction.mutateAsync(userAction); } }} - className={`group relative flex h-[5.5rem] w-full items-center justify-between overflow-hidden rounded-md border ${complete + className={`group relative flex h-[5.5rem] w-full items-center justify-between overflow-hidden rounded-md border ${ + complete ? "cursor-default border-mineshaft-900 bg-gradient-to-r from-[#0e1f01] to-mineshaft-700" : "cursor-pointer border-mineshaft-600 bg-mineshaft-800 shadow-xl hover:bg-mineshaft-700" - } text-mineshaft-100 duration-200`} + } text-mineshaft-100 duration-200`} >
@@ -402,8 +416,9 @@ const LearningItemSquare = ({ href={link} >
null} @@ -414,10 +429,11 @@ const LearningItemSquare = ({ await registerUserAction.mutateAsync(userAction); } }} - className={`group relative flex w-full items-center justify-between overflow-hidden rounded-md border ${complete + className={`group relative flex w-full items-center justify-between overflow-hidden rounded-md border ${ + complete ? "cursor-default border-mineshaft-900 bg-gradient-to-r from-[#0e1f01] to-mineshaft-700" : "cursor-pointer border-mineshaft-600 bg-mineshaft-800 shadow-xl hover:bg-mineshaft-700" - } text-mineshaft-100 duration-200`} + } text-mineshaft-100 duration-200`} >
@@ -431,8 +447,9 @@ const LearningItemSquare = ({
)}
{complete ? "Complete!" : `About ${time}`}
@@ -496,6 +513,9 @@ const OrganizationPage = withPermission( const createWs = useCreateWorkspace(); const { user } = useUser(); const { data: serverDetails } = useFetchServerStatus(); + const [projectsViewMode, setProjectsViewMode] = useState( + (localStorage.getItem("projectsViewMode") as ProjectsViewMode) || ProjectsViewMode.GRID + ); const onCreateProject = async ({ name, addMembers }: TAddProjectFormData) => { // type check @@ -551,6 +571,90 @@ const OrganizationPage = withPermission( const isWorkspaceEmpty = !isWorkspaceLoading && orgWorkspaces?.length === 0; + const projectsGridView = ( +
+ {isWorkspaceLoading && + Array.apply(0, Array(3)).map((_x, i) => ( +
+
+ +
+
+ +
+
+ +
+
+ ))} + {orgWorkspaces + .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())) + .map((workspace) => ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events +
{ + router.push(`/project/${workspace.id}/secrets/overview`); + localStorage.setItem("projectData.id", workspace.id); + }} + key={workspace.id} + className="min-w-72 group flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4" + > +
{workspace.name}
+
+ {workspace.environments?.length || 0} environments +
+ +
+ ))} +
+ ); + + const projectsListView = ( +
+ {isWorkspaceLoading && + Array.apply(0, Array(3)).map((_x, i) => ( +
+ +
+ ))} + {orgWorkspaces + .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())) + .map((workspace) => ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events +
{ + router.push(`/project/${workspace.id}/secrets/overview`); + localStorage.setItem("projectData.id", workspace.id); + }} + key={workspace.id} + className="min-w-72 group flex h-12 cursor-pointer flex-row items-center justify-between border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700" + > +
+ +
{workspace.name}
+
+
+ {workspace.environments?.length || 0} environments +
+
+ ))} +
+ ); + return (
@@ -580,7 +684,44 @@ const OrganizationPage = withPermission(
)}
-

Projects

+
+

Projects

+ + + + + +
+ + +
+ + +
-
- {isWorkspaceLoading && - Array.apply(0, Array(3)).map((_x, i) => ( -
-
- -
-
- -
-
- -
-
- ))} - {orgWorkspaces - .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())) - .map((workspace) => ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -
{ - router.push(`/project/${workspace.id}/secrets/overview`); - localStorage.setItem("projectData.id", workspace.id); - }} - key={workspace.id} - className="min-w-72 group flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4" - > -
{workspace.name}
-
- {workspace.environments?.length || 0} environments -
- -
- ))} -
+ {projectsViewMode === ProjectsViewMode.LIST ? projectsListView : projectsGridView} {isWorkspaceEmpty && (
-

Onboarding Guide

-
- - {orgWorkspaces.length !== 0 && ( - <> - - - - )} -
- -
-
+
+

Onboarding Guide

+
+ {orgWorkspaces.length !== 0 && ( -
-
-
- - {false && ( -
- -
- )} -
-
Inject secrets locally
-
- Replace .env files with a more secure and efficient alternative. -
+ <> + + + + )} +
+ +
+
+ {orgWorkspaces.length !== 0 && ( +
+
+
+ + {false && ( +
+ +
+ )} +
+
Inject secrets locally
+
+ Replace .env files with a more secure and efficient alternative.
-
- About 2 min -
- - {false &&
} +
+ About 2 min +
- )} - {orgWorkspaces.length !== 0 && ( - - )} -
- )} + + {false &&
} +
+ )} + {orgWorkspaces.length !== 0 && ( + + )} +
+ )} { From dcf315a5249e1702d66a2b50de3f349b85cd5c2b Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Thu, 13 Jun 2024 00:09:35 +0800 Subject: [PATCH 2/8] misc: addressed ui comments --- frontend/src/hooks/api/workspace/types.ts | 3 +- frontend/src/lib/fn/date.ts | 46 ++++++++++ .../src/pages/org/[id]/overview/index.tsx | 85 +++++++++---------- 3 files changed, 86 insertions(+), 48 deletions(-) create mode 100644 frontend/src/lib/fn/date.ts diff --git a/frontend/src/hooks/api/workspace/types.ts b/frontend/src/hooks/api/workspace/types.ts index 8be9beed0..be4ed938c 100644 --- a/frontend/src/hooks/api/workspace/types.ts +++ b/frontend/src/hooks/api/workspace/types.ts @@ -14,6 +14,7 @@ export type Workspace = { orgId: string; version: ProjectVersion; upgradeStatus: string | null; + updatedAt: string; autoCapitalization: boolean; environments: WorkspaceEnv[]; slug: string; @@ -128,4 +129,4 @@ export type TUpdateWorkspaceGroupRoleDTO = { temporaryAccessStartTime: string; } )[]; -}; \ No newline at end of file +}; diff --git a/frontend/src/lib/fn/date.ts b/frontend/src/lib/fn/date.ts new file mode 100644 index 000000000..66423b3cb --- /dev/null +++ b/frontend/src/lib/fn/date.ts @@ -0,0 +1,46 @@ +export const timeAgo = (inputDate: Date, currentDate: Date): string => { + const now = new Date(currentDate).getTime(); + const date = new Date(inputDate).getTime(); + const elapsedMilliseconds = now - date; + const elapsedSeconds = Math.abs(Math.floor(elapsedMilliseconds / 1000)); + const elapsedMinutes = Math.abs(Math.floor(elapsedSeconds / 60)); + const elapsedHours = Math.abs(Math.floor(elapsedMinutes / 60)); + const elapsedDays = Math.abs(Math.floor(elapsedHours / 24)); + const elapsedWeeks = Math.abs(Math.floor(elapsedDays / 7)); + const elapsedMonths = Math.abs(Math.floor(elapsedDays / 30)); + const elapsedYears = Math.abs(Math.floor(elapsedDays / 365)); + + if (elapsedYears > 0) { + return `${elapsedYears} year${elapsedYears === 1 ? "" : "s"} ${ + elapsedMilliseconds >= 0 ? "ago" : "from now" + }`; + } + if (elapsedMonths > 0) { + return `${elapsedMonths} month${elapsedMonths === 1 ? "" : "s"} ${ + elapsedMilliseconds >= 0 ? "ago" : "from now" + }`; + } + if (elapsedWeeks > 0) { + return `${elapsedWeeks} week${elapsedWeeks === 1 ? "" : "s"} ${ + elapsedMilliseconds >= 0 ? "ago" : "from now" + }`; + } + if (elapsedDays > 0) { + return `${elapsedDays} day${elapsedDays === 1 ? "" : "s"} ${ + elapsedMilliseconds >= 0 ? "ago" : "from now" + }`; + } + if (elapsedHours > 0) { + return `${elapsedHours} hour${elapsedHours === 1 ? "" : "s"} ${ + elapsedMilliseconds >= 0 ? "ago" : "from now" + }`; + } + if (elapsedMinutes > 0) { + return `${elapsedMinutes} minute${elapsedMinutes === 1 ? "" : "s"} ${ + elapsedMilliseconds >= 0 ? "ago" : "from now" + }`; + } + return `${elapsedSeconds} second${elapsedSeconds === 1 ? "" : "s"} ${ + elapsedMilliseconds >= 0 ? "ago" : "from now" + }`; +}; diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx index e5d4ffc3c..2c9338bb7 100644 --- a/frontend/src/pages/org/[id]/overview/index.tsx +++ b/frontend/src/pages/org/[id]/overview/index.tsx @@ -12,6 +12,8 @@ import { faFolderOpen } from "@fortawesome/free-regular-svg-icons"; import { faArrowRight, faArrowUpRightFromSquare, + faBorderAll, + faBoxesStacked, faCheck, faCheckCircle, faClipboard, @@ -22,9 +24,6 @@ import { faNetworkWired, faPlug, faPlus, - faProjectDiagram, - faTableCells, - faTableColumns, faUserPlus } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -38,10 +37,8 @@ import onboardingCheck from "@app/components/utilities/checks/OnboardingCheck"; import { Button, Checkbox, - DropdownMenu, - DropdownMenuContent, - DropdownMenuTrigger, FormControl, + IconButton, Input, Modal, ModalContent, @@ -66,6 +63,7 @@ import { // import { fetchUserWsKey } from "@app/hooks/api/keys/queries"; import { useFetchServerStatus } from "@app/hooks/api/serverDetails"; import { usePopUp } from "@app/hooks/usePopUp"; +import { timeAgo } from "@app/lib/fn/date"; const features = [ { @@ -478,7 +476,6 @@ const formSchema = yup.object({ type TAddProjectFormData = yup.InferType; // #TODO: Update all the workspaceIds - const OrganizationPage = withPermission( () => { const { t } = useTranslation(); @@ -641,14 +638,19 @@ const OrganizationPage = withPermission( localStorage.setItem("projectData.id", workspace.id); }} key={workspace.id} - className="min-w-72 group flex h-12 cursor-pointer flex-row items-center justify-between border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700" + className="min-w-72 group grid h-14 cursor-pointer grid-cols-6 border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700" > -
- +
+
{workspace.name}
-
- {workspace.environments?.length || 0} environments +
+
+ {workspace.environments?.length || 0} environments +
+
+ last update: {timeAgo(new Date(workspace.updatedAt), new Date())} +
))} @@ -686,41 +688,30 @@ const OrganizationPage = withPermission(

Projects

- - - - - -
- - -
- - +
+ { + localStorage.setItem("projectsViewMode", ProjectsViewMode.GRID); + setProjectsViewMode(ProjectsViewMode.GRID); + }} + ariaLabel="grid" + className="mr-1 min-w-[2.8rem]" + > + + + { + localStorage.setItem("projectsViewMode", ProjectsViewMode.LIST); + setProjectsViewMode(ProjectsViewMode.LIST); + }} + ariaLabel="list" + className="min-w-[2.8rem]" + > + + +
Date: Wed, 12 Jun 2024 10:12:51 -0700 Subject: [PATCH 3/8] style updates --- .../src/pages/org/[id]/overview/index.tsx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx index 2c9338bb7..255a1c699 100644 --- a/frontend/src/pages/org/[id]/overview/index.tsx +++ b/frontend/src/pages/org/[id]/overview/index.tsx @@ -13,11 +13,11 @@ import { faArrowRight, faArrowUpRightFromSquare, faBorderAll, - faBoxesStacked, faCheck, faCheckCircle, faClipboard, faExclamationCircle, + faFileShield, faHandPeace, faList, faMagnifyingGlass, @@ -618,7 +618,7 @@ const OrganizationPage = withPermission( ); const projectsListView = ( -
+
{isWorkspaceLoading && Array.apply(0, Array(3)).map((_x, i) => (
- -
{workspace.name}
+ +
{workspace.name}
{workspace.environments?.length || 0} environments
- last update: {timeAgo(new Date(workspace.updatedAt), new Date())} + Updated {timeAgo(new Date(workspace.updatedAt), new Date())}
@@ -688,7 +688,16 @@ const OrganizationPage = withPermission(

Projects

-
+
+
+ setSearchFilter(e.target.value)} + leftIcon={} + /> +
{ @@ -696,7 +705,8 @@ const OrganizationPage = withPermission( setProjectsViewMode(ProjectsViewMode.GRID); }} ariaLabel="grid" - className="mr-1 min-w-[2.8rem]" + size="xs" + className={`${projectsViewMode === ProjectsViewMode.GRID ? "bg-mineshaft-500" : "bg-transparent"} hover:bg-mineshaft-600 min-w-[2.4rem] border-none`} > @@ -707,20 +717,12 @@ const OrganizationPage = withPermission( setProjectsViewMode(ProjectsViewMode.LIST); }} ariaLabel="list" - className="min-w-[2.8rem]" + size="xs" + className={`${projectsViewMode === ProjectsViewMode.LIST ? "bg-mineshaft-500" : "bg-transparent"} hover:bg-mineshaft-600 min-w-[2.4rem] border-none`} >
-
-
- setSearchFilter(e.target.value)} - leftIcon={} - /> {(isAllowed) => (
))} - {orgWorkspaces - .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())) - .map((workspace) => ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -
{ - router.push(`/project/${workspace.id}/secrets/overview`); - localStorage.setItem("projectData.id", workspace.id); - }} - key={workspace.id} - className="min-w-72 group flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4" - > -
{workspace.name}
-
- {workspace.environments?.length || 0} environments -
- + {filteredWorkspaces.map((workspace) => ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events +
{ + router.push(`/project/${workspace.id}/secrets/overview`); + localStorage.setItem("projectData.id", workspace.id); + }} + key={workspace.id} + className="min-w-72 group flex h-40 cursor-pointer flex-col justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4" + > +
{workspace.name}
+
+ {workspace.environments?.length || 0} environments
- ))} + +
+ ))}
); @@ -628,32 +629,32 @@ const OrganizationPage = withPermission(
))} - {orgWorkspaces - .filter((ws) => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())) - .map((workspace) => ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -
{ - router.push(`/project/${workspace.id}/secrets/overview`); - localStorage.setItem("projectData.id", workspace.id); - }} - key={workspace.id} - className="min-w-72 group grid h-14 cursor-pointer grid-cols-6 border border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700" - > -
- -
{workspace.name}
+ {filteredWorkspaces.map((workspace, ind) => ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events +
{ + router.push(`/project/${workspace.id}/secrets/overview`); + localStorage.setItem("projectData.id", workspace.id); + }} + key={workspace.id} + className={`min-w-72 group grid h-14 cursor-pointer grid-cols-6 border-t border-l border-r border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${ + ind === filteredWorkspaces.length - 1 && "border-b" + }`} + > +
+ +
{workspace.name}
+
+
+
+ {workspace.environments?.length || 0} environments
-
-
- {workspace.environments?.length || 0} environments -
-
- Updated {timeAgo(new Date(workspace.updatedAt), new Date())} -
+
+ Updated {timeAgo(new Date(workspace.updatedAt), new Date())}
- ))} +
+ ))}
); @@ -697,7 +698,7 @@ const OrganizationPage = withPermission( onChange={(e) => setSearchFilter(e.target.value)} leftIcon={} /> -
+
{ @@ -706,7 +707,9 @@ const OrganizationPage = withPermission( }} ariaLabel="grid" size="xs" - className={`${projectsViewMode === ProjectsViewMode.GRID ? "bg-mineshaft-500" : "bg-transparent"} hover:bg-mineshaft-600 min-w-[2.4rem] border-none`} + className={`${ + projectsViewMode === ProjectsViewMode.GRID ? "bg-mineshaft-500" : "bg-transparent" + } min-w-[2.4rem] border-none hover:bg-mineshaft-600`} > @@ -718,7 +721,9 @@ const OrganizationPage = withPermission( }} ariaLabel="list" size="xs" - className={`${projectsViewMode === ProjectsViewMode.LIST ? "bg-mineshaft-500" : "bg-transparent"} hover:bg-mineshaft-600 min-w-[2.4rem] border-none`} + className={`${ + projectsViewMode === ProjectsViewMode.LIST ? "bg-mineshaft-500" : "bg-transparent" + } min-w-[2.4rem] border-none hover:bg-mineshaft-600`} > From 2a005d26543a81f86c70bc97a075a597a296501b Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Thu, 13 Jun 2024 02:40:08 +0800 Subject: [PATCH 5/8] misc: added rounding to list view --- frontend/src/pages/org/[id]/overview/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx index 46daf7b4e..0f13bee16 100644 --- a/frontend/src/pages/org/[id]/overview/index.tsx +++ b/frontend/src/pages/org/[id]/overview/index.tsx @@ -638,8 +638,8 @@ const OrganizationPage = withPermission( }} key={workspace.id} className={`min-w-72 group grid h-14 cursor-pointer grid-cols-6 border-t border-l border-r border-mineshaft-600 bg-mineshaft-800 px-6 hover:bg-mineshaft-700 ${ - ind === filteredWorkspaces.length - 1 && "border-b" - }`} + ind === 0 && "rounded-t-md" + } ${ind === filteredWorkspaces.length - 1 && "rounded-b-md border-b"}`} >
From 0e5f0eefc100626a218d467ce9b2028f16429f37 Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Thu, 13 Jun 2024 02:56:48 +0800 Subject: [PATCH 6/8] misc: added rounded design to loading entries --- frontend/src/pages/org/[id]/overview/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx index 0f13bee16..b189beeb8 100644 --- a/frontend/src/pages/org/[id]/overview/index.tsx +++ b/frontend/src/pages/org/[id]/overview/index.tsx @@ -624,7 +624,9 @@ const OrganizationPage = withPermission( Array.apply(0, Array(3)).map((_x, i) => (
From 81513e4a750d58b6b93d6b800ff39bbeb5c36f75 Mon Sep 17 00:00:00 2001 From: Maidul Islam Date: Wed, 12 Jun 2024 20:17:09 -0400 Subject: [PATCH 7/8] remove time ago --- frontend/src/pages/org/[id]/overview/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx index b189beeb8..177a6586b 100644 --- a/frontend/src/pages/org/[id]/overview/index.tsx +++ b/frontend/src/pages/org/[id]/overview/index.tsx @@ -63,7 +63,6 @@ import { // import { fetchUserWsKey } from "@app/hooks/api/keys/queries"; import { useFetchServerStatus } from "@app/hooks/api/serverDetails"; import { usePopUp } from "@app/hooks/usePopUp"; -import { timeAgo } from "@app/lib/fn/date"; const features = [ { @@ -647,13 +646,10 @@ const OrganizationPage = withPermission(
{workspace.name}
-
-
+
+
{workspace.environments?.length || 0} environments
-
- Updated {timeAgo(new Date(workspace.updatedAt), new Date())} -
))} From d3932d8f08e85feb3410d5d12069ea20f5587fac Mon Sep 17 00:00:00 2001 From: = Date: Thu, 13 Jun 2024 15:16:00 +0530 Subject: [PATCH 8/8] fix(ui): broken permission page fixed --- .../ProjectRoleModifySection/MultiEnvProjectPermission.tsx | 3 ++- .../ProjectRoleModifySection/SecretRollbackPermission.tsx | 1 + .../ProjectRoleModifySection/SingleProjectPermission.tsx | 1 + .../ProjectRoleModifySection/WsProjectPermission.tsx | 1 + 4 files changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/MultiEnvProjectPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/MultiEnvProjectPermission.tsx index 188d81c65..40b841e0f 100644 --- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/MultiEnvProjectPermission.tsx +++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/MultiEnvProjectPermission.tsx @@ -70,6 +70,7 @@ export const MultiEnvProjectPermission = ({ }, [allRule]); const handlePermissionChange = (val: Permission) => { + if(!val) return switch (val) { case Permission.NoAccess: { const permissions = getValue("permissions"); @@ -106,7 +107,7 @@ export const MultiEnvProjectPermission = ({ className={twMerge( "rounded-md bg-mineshaft-800 px-10 py-6", (selectedPermissionCategory !== Permission.NoAccess || isCustom) && - "border-l-2 border-primary-600" + "border-l-2 border-primary-600" )} >
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx index 03fa41b68..8d1fb1db3 100644 --- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx +++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SecretRollbackPermission.tsx @@ -53,6 +53,7 @@ export const SecretRollbackPermission = ({ isNonEditable, setValue, control }: P }, [selectedPermissionCategory]); const handlePermissionChange = (val: Permission) => { + if(!val) return; if (val === Permission.Custom) setIsCustom.on(); else setIsCustom.off(); diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx index fd65cfd58..51a17d7fe 100644 --- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx +++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx @@ -98,6 +98,7 @@ export const SingleProjectPermission = ({ }, [selectedPermissionCategory]); const handlePermissionChange = (val: Permission) => { + if(!val) return; if (val === Permission.Custom) setIsCustom.on(); else setIsCustom.off(); diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx index 9b04c5236..c13a6abde 100644 --- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx +++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx @@ -52,6 +52,7 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props) }, [selectedPermissionCategory]); const handlePermissionChange = (val: Permission) => { + if(!val) return; if (val === Permission.Custom) setIsCustom.on(); else setIsCustom.off();