Finished migration

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -14,8 +14,6 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import NavHeader from "@app/components/navigation/NavHeader";
 import { PermissionDeniedBanner } from "@app/components/permissions";
 import {
-  Alert,
-  AlertDescription,
   Button,
   EmptyState,
   IconButton,
@@ -31,6 +29,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { UpgradeProjectAlert } from "@app/components/v2/UpgradeProjectAlert";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
   useCreateFolder,
@@ -39,8 +38,7 @@ import {
   useGetFoldersByEnv,
   useGetProjectSecretsAllEnv,
   useGetUserWsKey,
-  useUpdateSecretV3,
-  useUpgradeProject
+  useUpdateSecretV3
 } from "@app/hooks/api";
 
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
@@ -107,7 +105,6 @@ export const SecretOverviewPage = () => {
     environments: userAvailableEnvs.map(({ slug }) => slug)
   });
 
-  const upgradeProject = useUpgradeProject();
   const { mutateAsync: createSecretV3 } = useCreateSecretV3();
   const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
   const { mutateAsync: deleteSecretV3 } = useDeleteSecretV3();
@@ -201,24 +198,6 @@ export const SecretOverviewPage = () => {
     }
   };
 
-  const onUpgradeProject = useCallback(async () => {
-    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
-
-    if (!PRIVATE_KEY) {
-      createNotification({
-        type: "error",
-        text: "Private key not found"
-      });
-
-      return;
-    }
-
-    await upgradeProject.mutateAsync({
-      projectId: workspaceId,
-      privateKey: PRIVATE_KEY
-    });
-  }, []);
-
   const handleResetSearch = () => setSearchFilter("");
 
   const handleFolderClick = (path: string) => {
@@ -338,22 +317,7 @@ export const SecretOverviewPage = () => {
         </p>
       </div>
 
-      {currentWorkspace?.version === "v1" && (
-        <div className="mt-8">
-          <Alert variant="danger">
-            <AlertDescription className="prose">
-              Upgrade your project. More filler text More filler text More filler text More filler
-              text More filler text More filler text More filler text More filler text More filler
-              text More filler text More filler text More filler text{" "}
-            </AlertDescription>
-            <div className="mt-2">
-              <Button isLoading={upgradeProject.isLoading} onClick={onUpgradeProject}>
-                Upgrade
-              </Button>
-            </div>
-          </Alert>
-        </div>
-      )}
+      {currentWorkspace?.version === "v1" && <UpgradeProjectAlert project={currentWorkspace} />}
       <div className="mt-8 flex items-center justify-between">
         <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
         <div className="w-80">