Hide "New" & "Delete" certificate buttons when provider is readOnly

PeculiarVentures · Sep 20, 2024 · e632b3c · e632b3c
1 parent 0319208
commit e632b3c
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 75 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -33,6 +33,7 @@ export function App() {
   } = useApp();
 
   const currentProviderId = currentProvider?.id;
+  const isCurrentProviderReadOnly = Boolean(currentProvider?.readOnly);
 
   const {
     searchedText,
@@ -120,6 +121,7 @@ export function App() {
       <CertificatesTopbar
         searchValue={searchedText}
         isDisabled={!currentProviderId}
+        isReadOnly={isCurrentProviderReadOnly}
         className={styles.top_bar}
         onSearch={handleSearch}
         onImport={handleCertificateImportDialogOpen}
@@ -144,6 +146,7 @@ export function App() {
         loading={!fetching.certificates || fetching.certificates === "pending"}
         highlightedText={searchedText}
         isLoggedIn={isCurrentProviderLogedin}
+        isReadOnly={isCurrentProviderReadOnly}
       />
       <FetchingStatusOwerlay
         fetching={fetching}

diff --git a/src/components/certificates-list/CertificatesList.tsx b/src/components/certificates-list/CertificatesList.tsx
@@ -58,6 +58,7 @@ interface CertificatesListProps {
   highlightedText?: string;
   loading?: boolean;
   isLoggedIn: boolean;
+  isReadOnly: boolean;
 }
 
 export const CertificatesList: React.FunctionComponent<
@@ -71,6 +72,7 @@ export const CertificatesList: React.FunctionComponent<
     highlightedText,
     loading,
     isLoggedIn,
+    isReadOnly = false,
     onSort,
     onViewDetails,
     onDelete,
@@ -247,22 +249,24 @@ export const CertificatesList: React.FunctionComponent<
                       >
                         <DownloadIcon />
                       </IconButton>
-                      <IconButton
-                        tabIndex={0}
-                        title={t("certificates.list.action.delete")}
-                        onClick={() =>
-                          onDelete({
-                            certificateIndex: index,
-                            providerId: providerID,
-                            label: certificateName,
-                          })
-                        }
-                        size="small"
-                        className={styles.action_icon_button}
-                        disabled={!isLoggedIn}
-                      >
-                        <DeleteIcon />
-                      </IconButton>
+                      {!isReadOnly ? (
+                        <IconButton
+                          tabIndex={0}
+                          title={t("certificates.list.action.delete")}
+                          onClick={() =>
+                            onDelete({
+                              certificateIndex: index,
+                              providerId: providerID,
+                              label: certificateName,
+                            })
+                          }
+                          size="small"
+                          className={styles.action_icon_button}
+                          disabled={!isLoggedIn}
+                        >
+                          <DeleteIcon />
+                        </IconButton>
+                      ) : null}
                     </div>
                   </TableCell>
                 </TableRow>

diff --git a/src/components/certificates-topbar/CertificatesTopbar.test.tsx b/src/components/certificates-topbar/CertificatesTopbar.test.tsx
@@ -5,6 +5,7 @@ describe("<CertificatesTopbar />", () => {
   const defaultProps = {
     isLoggedIn: true,
     isDisabled: false,
+    isReadOnly: false,
     onReload: vi.fn(),
     onLoginLogout: vi.fn(),
     onCreate: vi.fn(),
@@ -47,6 +48,14 @@ describe("<CertificatesTopbar />", () => {
     expect(screen.getByRole("button", { name: /New/ })).toBeEnabled();
   });
 
+  it("Should render as read only", async () => {
+    render(<CertificatesTopbar {...defaultProps} isReadOnly={true} />);
+
+    expect(
+      screen.queryByRole("button", { name: /New/ })
+    ).not.toBeInTheDocument();
+  });
+
   it("Should handle onReload", async () => {
     const onReloadMock = vi.fn();
     render(<CertificatesTopbar {...defaultProps} onReload={onReloadMock} />);

diff --git a/src/components/certificates-topbar/CertificatesTopbar.tsx b/src/components/certificates-topbar/CertificatesTopbar.tsx
@@ -26,6 +26,7 @@ interface CertificatesTopbarProps {
   searchValue?: string;
   isDisabled: boolean;
   isLoggedIn: boolean;
+  isReadOnly: boolean;
   onSearch: (value: string) => void;
   onImport: () => void;
   onCreate: (type: "csr" | "x509") => void;
@@ -41,6 +42,7 @@ export const CertificatesTopbar: React.FunctionComponent<
     searchValue = "",
     isDisabled = true,
     isLoggedIn,
+    isReadOnly = false,
     onSearch,
     onImport,
     onCreate,
@@ -129,68 +131,72 @@ export const CertificatesTopbar: React.FunctionComponent<
           {isLoggedIn ? <LogoutIcon /> : <LoginIcon />}
         </IconButton>
       </div>
-      <div>
-        {isDisabled || !isLoggedIn ? (
-          <Tooltip
-            color="white"
-            size="large"
-            arrow={true}
-            placement="bottom-end"
-            offset={10}
-            title={
-              !isLoggedIn
-                ? t("topbar.create-certificate-disabled-tooltip")
-                : undefined
-            }
-          >
-            <Button
-              color="primary"
-              variant="contained"
+      {!isReadOnly ? (
+        <div>
+          {isDisabled || !isLoggedIn ? (
+            <Tooltip
+              color="white"
               size="large"
-              startIcon={<PlusIcon />}
-              disabled={true}
+              arrow={true}
+              placement="bottom-end"
+              offset={10}
+              title={
+                !isLoggedIn
+                  ? t("topbar.create-certificate-disabled-tooltip")
+                  : undefined
+              }
             >
-              {t("topbar.create-certificate")}
-            </Button>
-          </Tooltip>
-        ) : (
-          <Menu
-            popoverProps={{
-              className: styles.creation_menu,
-            }}
-            options={[
-              {
-                label: t("topbar.create-certificate-scr"),
-                startIcon: (
-                  <CertificatCSRIcon className={styles.creation_menu_icon} />
-                ),
-                onClick: () => onCreate("csr"),
-              },
-              {
-                label: t("topbar.create-certificate-ssc"),
-                startIcon: (
-                  <CertificatSSCIcon className={styles.creation_menu_icon} />
-                ),
-                onClick: () => onCreate("x509"),
-              },
-              {
-                label: t("topbar.import-certificate"),
-                startIcon: <ImportIcon className={styles.creation_menu_icon} />,
-                onClick: onImport,
-              },
-            ]}
-          >
-            <Button
-              color="primary"
-              variant="contained"
-              size="large"
-              startIcon={<PlusIcon />}
+              <Button
+                color="primary"
+                variant="contained"
+                size="large"
+                startIcon={<PlusIcon />}
+                disabled={true}
+              >
+                {t("topbar.create-certificate")}
+              </Button>
+            </Tooltip>
+          ) : (
+            <Menu
+              popoverProps={{
+                className: styles.creation_menu,
+              }}
+              options={[
+                {
+                  label: t("topbar.create-certificate-scr"),
+                  startIcon: (
+                    <CertificatCSRIcon className={styles.creation_menu_icon} />
+                  ),
+                  onClick: () => onCreate("csr"),
+                },
+                {
+                  label: t("topbar.create-certificate-ssc"),
+                  startIcon: (
+                    <CertificatSSCIcon className={styles.creation_menu_icon} />
+                  ),
+                  onClick: () => onCreate("x509"),
+                },
+                {
+                  label: t("topbar.import-certificate"),
+                  startIcon: (
+                    <ImportIcon className={styles.creation_menu_icon} />
+                  ),
+                  onClick: onImport,
+                },
+              ]}
             >
-              {t("topbar.create-certificate")}
-            </Button>
-          </Menu>
-        )}
-      </div>
+              <Button
+                color="primary"
+                variant="contained"
+                size="large"
+                startIcon={<PlusIcon />}
+              >
+                {t("topbar.create-certificate")}
+              </Button>
+            </Menu>
+          )}
+        </div>
+      ) : null}
     </div>
   );
 };