invalidate cache

frontend/src/pages/admin/OverviewPage/OverviewPage.tsx

@@ -31,6 +31,7 @@ import {
 import { IdentityPanel } from "@app/pages/admin/OverviewPage/components/IdentityPanel";
 
 import { AuthPanel } from "./components/AuthPanel";
+import { CachingPanel } from "./components/CachingPanel";
 import { EncryptionPanel } from "./components/EncryptionPanel";
 import { IntegrationPanel } from "./components/IntegrationPanel";
 import { UserPanel } from "./components/UserPanel";
@@ -42,7 +43,8 @@ enum TabSections {
   Integrations = "integrations",
   Users = "users",
   Identities = "identities",
-  Kmip = "kmip"
+  Kmip = "kmip",
+  Caching = "caching"
 }
 
 enum SignUpModes {
@@ -164,6 +166,7 @@ export const OverviewPage = () => {
                     <Tab value={TabSections.Integrations}>Integrations</Tab>
                     <Tab value={TabSections.Users}>User Identities</Tab>
                     <Tab value={TabSections.Identities}>Machine Identities</Tab>
+                    <Tab value={TabSections.Caching}>Caching</Tab>
                   </div>
                 </TabList>
                 <TabPanel value={TabSections.Settings}>
@@ -408,6 +411,9 @@ export const OverviewPage = () => {
                 <TabPanel value={TabSections.Identities}>
                   <IdentityPanel />
                 </TabPanel>
+                <TabPanel value={TabSections.Caching}>
+                  <CachingPanel />
+                </TabPanel>
               </Tabs>
             </div>
           )}

frontend/src/pages/admin/OverviewPage/components/CachingPanel.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { useOrgPermission } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useInvalidateCache } from "@app/hooks/api";
+import { CacheType } from "@app/hooks/api/admin/types";
+
+export const CachingPanel = () => {
+  const { mutateAsync: invalidateCache } = useInvalidateCache();
+  const { membership } = useOrgPermission();
+
+  const [type, setType] = useState<CacheType>(CacheType.ALL);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "invalidateCache"
+  ] as const);
+
+  const handleInvalidateCacheSubmit = async () => {
+    try {
+      setIsLoading(true);
+
+      await invalidateCache({ type });
+
+      createNotification({
+        text: `Successfully purged ${type} cache`,
+        type: "success"
+      });
+
+      setIsLoading(false);
+      handlePopUpClose("invalidateCache");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to purge ${type} cache`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className="mb-6 flex flex-wrap items-end justify-between gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex flex-col">
+          <span className="mb-2 text-xl font-semibold text-mineshaft-100">Secrets Cache</span>
+          <span className="max-w-xl text-sm text-mineshaft-400">
+            The secrets cache encompasses all secrets stored within the system and provides a
+            temporary, secure storage location for frequently accessed credentials.
+          </span>
+        </div>
+
+        <Button
+          colorSchema="danger"
+          isLoading={isLoading}
+          onClick={() => {
+            setType(CacheType.SECRETS);
+            handlePopUpOpen("invalidateCache");
+          }}
+          isDisabled={Boolean(membership && membership.role !== "admin") || isLoading}
+        >
+          Invalidate Secrets Cache
+        </Button>
+      </div>
+
+      {/* Uncomment this when we have more than one cache type */}
+      {/* <div className="mb-6 flex flex-wrap items-end justify-between gap-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="flex flex-col">
+          <span className="mb-2 text-xl font-semibold text-mineshaft-100">All Cache</span>
+          <span className="max-w-xl text-sm text-mineshaft-400">
+            All cache refers to the entirety of cached data throughout the system, including secrets
+            and miscellaneous information.
+          </span>
+        </div>
+
+        <Button
+          colorSchema="danger"
+          isLoading={isLoading}
+          onClick={() => {
+            setType(CacheType.ALL);
+            handlePopUpOpen("invalidateCache");
+          }}
+          isDisabled={Boolean(membership && membership.role !== "admin") || isLoading}
+        >
+          Invalidate All Cache
+        </Button>
+      </div> */}
+
+      <DeleteActionModal
+        isOpen={popUp.invalidateCache.isOpen}
+        title={`Are you sure want to invalidate ${type} cache?`}
+        subTitle="This action cannot be undone."
+        onChange={(isOpen) => handlePopUpToggle("invalidateCache", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={handleInvalidateCacheSubmit}
+      />
+    </>
+  );
+};