Finish preliminary standardization of project settings page

2026-10-17 12:56:29 +00:00 · 2023-06-30 16:38:54 +07:00
parent a32df58f46
commit 104c752f9a
28 changed files with 1497 additions and 1254 deletions
@@ -0,0 +1,89 @@
+import { faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  EmptyState,
+  IconButton,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr,
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+    handlePopUpOpen: (
+        popUpName: keyof UsePopUpState<["updateEnv", "deleteEnv", "deleteEnv", "upgradePlan"]>,
+        {
+            name,
+            slug
+        }: {
+            name: string;
+            slug: string;
+        }
+    ) => void;
+};
+
+export const EnvironmentTable = ({
+    handlePopUpOpen
+}: Props) => {
+    const { currentWorkspace, isLoading } = useWorkspace();
+    return (
+        <TableContainer>
+            <Table>
+                <THead>
+                    <Tr>
+                    <Th>Name</Th>
+                    <Th>Slug</Th>
+                    <Th aria-label="button" />
+                    </Tr>
+                </THead>
+                <TBody>
+                    {isLoading && <TableSkeleton columns={3} key="project-envs" />}
+                    {!isLoading && currentWorkspace && currentWorkspace.environments.map(({ name, slug }) => (
+                        <Tr key={name}>
+                            <Td>{name}</Td>
+                            <Td>{slug}</Td>
+                            <Td className="flex items-center justify-end">
+                                <IconButton
+                                    className="mr-3 py-2"
+                                    onClick={() => {
+                                        handlePopUpOpen("updateEnv", { name, slug });
+                                    }}
+                                    colorSchema="primary"
+                                    variant="plain"
+                                    ariaLabel="update"
+                                >
+                                    <FontAwesomeIcon icon={faPencil} />
+                                </IconButton>
+                                <IconButton
+                                    onClick={() => {
+                                        handlePopUpOpen("deleteEnv", { name, slug });
+                                    }}
+                                    size="lg"
+                                    colorSchema="danger"
+                                    variant="plain"
+                                    ariaLabel="update"
+                                >
+                                    <FontAwesomeIcon icon={faXmark} />
+                                </IconButton>
+                            </Td>
+                        </Tr>
+                    ))}
+                    {!isLoading && currentWorkspace && currentWorkspace.environments?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={3}>
+                            <EmptyState title="No environments found" />
+                        </Td>
+                    </Tr>
+                    )}
+                </TBody>
+            </Table>
+        </TableContainer>
+    );
+}