feat: added new secret input component and updated toolbar key special prop to innerKey

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentTable.tsx

@@ -11,79 +11,79 @@ import {
   Td,
   Th,
   THead,
-  Tr,
+  Tr
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    handlePopUpOpen: (
-        popUpName: keyof UsePopUpState<["updateEnv", "deleteEnv", "upgradePlan"]>,
-        {
-            name,
-            slug
-        }: {
-            name: string;
-            slug: string;
-        }
-    ) => void;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["updateEnv", "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>
-    );
-}
+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} innerKey="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>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx

@@ -18,65 +18,65 @@ import { useGetWsTags } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
-    handlePopUpOpen: (
-      popUpName: keyof UsePopUpState<["deleteTagConfirmation"]>,
-      {
-        name,
-        id
-      }: {
-        name: string;
-        id: string;
-      }
-    ) => void;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteTagConfirmation"]>,
+    {
+      name,
+      id
+    }: {
+      name: string;
+      id: string;
+    }
+  ) => void;
 };
 
-export const SecretTagsTable = ({
-   handlePopUpOpen 
-}: Props) => {
-    const { currentWorkspace }= useWorkspace();
-    const { data, isLoading } = useGetWsTags(currentWorkspace?._id ?? "");
+export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = useGetWsTags(currentWorkspace?._id ?? "");
 
-    return (
-        <TableContainer className="mt-4">
-        <Table>
-          <THead>
-            <Tr>
-              <Th>Tag</Th>
-              <Th>Slug</Th>
-              <Th aria-label="button" />
-            </Tr>
-          </THead>
-          <TBody>
-            {isLoading && <TableSkeleton columns={3} key="secret-tags" />}
-            {!isLoading && data && data.map(({ _id, name, slug }) => (
-                <Tr key={name}>
-                  <Td>{name}</Td>
-                  <Td>{slug}</Td>
-                  <Td className="flex items-center justify-end">
-                    <IconButton
-                      onClick={() =>
-                        handlePopUpOpen("deleteTagConfirmation", {
-                          name,
-                          id: _id
-                        })
-                      }
-                      colorSchema="danger"
-                      ariaLabel="update"
-                    >
-                      <FontAwesomeIcon icon={faTrashCan} />
-                    </IconButton>
-                  </Td>
-                </Tr>
-              ))}
-            {!isLoading && data && data?.length === 0 && (
-              <Tr>
-                <Td colSpan={3}>
-                  <EmptyState title="No secret tags found" icon={faTags} />
+  return (
+    <TableContainer className="mt-4">
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Tag</Th>
+            <Th>Slug</Th>
+            <Th aria-label="button" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={3} innerKey="secret-tags" />}
+          {!isLoading &&
+            data &&
+            data.map(({ _id, name, slug }) => (
+              <Tr key={name}>
+                <Td>{name}</Td>
+                <Td>{slug}</Td>
+                <Td className="flex items-center justify-end">
+                  <IconButton
+                    onClick={() =>
+                      handlePopUpOpen("deleteTagConfirmation", {
+                        name,
+                        id: _id
+                      })
+                    }
+                    colorSchema="danger"
+                    ariaLabel="update"
+                  >
+                    <FontAwesomeIcon icon={faTrashCan} />
+                  </IconButton>
                 </Td>
               </Tr>
-            )}
-          </TBody>
-        </Table>
-      </TableContainer>
-    );
-}
+            ))}
+          {!isLoading && data && data?.length === 0 && (
+            <Tr>
+              <Td colSpan={3}>
+                <EmptyState title="No secret tags found" icon={faTags} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenTable.tsx

@@ -48,7 +48,7 @@ export const ServiceTokenTable = ({ handlePopUpOpen }: Props) => {
           </Tr>
         </THead>
         <TBody>
-          {isLoading && <TableSkeleton columns={4} key="project-service-tokens" />}
+          {isLoading && <TableSkeleton columns={4} innerKey="project-service-tokens" />}
           {!isLoading &&
             data &&
             data.map((row) => (

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/WebhooksTab.tsx

@@ -160,7 +160,7 @@ export const WebhooksTab = () => {
               </Tr>
             </THead>
             <TBody>
-              {isWebhooksLoading && <TableSkeleton columns={5} key="webhooks-loading" />}
+              {isWebhooksLoading && <TableSkeleton columns={5} innerKey="webhooks-loading" />}
               {!isWebhooksLoading && webhooks && webhooks?.length === 0 && (
                 <Tr>
                   <Td colSpan={5}>