From dcf315a5249e1702d66a2b50de3f349b85cd5c2b Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Thu, 13 Jun 2024 00:09:35 +0800 Subject: [PATCH] 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]" + > + + +