feat: updated ui to reflect secret import and approval

frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx

@@ -11,7 +11,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { EmptyState, IconButton, SecretInput, TableContainer } from "@app/components/v2";
+import { EmptyState, IconButton, SecretInput, TableContainer, Tag } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
 
@@ -19,6 +19,7 @@ type Props = {
   onDelete: () => void;
   environment: string;
   secretPath?: string;
+  isReplication?: boolean;
   importEnvName: string;
   importEnvPath: string;
   importedSecrets: { key: string; value: string; overriden: { env: string; secretPath: string } }[];
@@ -27,11 +28,20 @@ type Props = {
 };
 
 // to show the environment and folder icon
-export const EnvFolderIcon = ({ env, secretPath }: { env: string; secretPath: string }) => (
+export const EnvFolderIcon = ({
+  env,
+  secretPath,
+  isReplication
+}: {
+  env: string;
+  secretPath: string;
+  isReplication?: boolean;
+}) => (
   <div className="inline-flex items-center space-x-2">
     <div style={{ minWidth: "96px" }}>{env || "-"}</div>
     {secretPath && (
       <div className="inline-flex items-center space-x-2 border-l border-mineshaft-600 pl-2">
+        {isReplication && <Tag size="xs">Replication Mode</Tag>}
         <FontAwesomeIcon icon={faFolder} className="text-md text-green-700" />
         <span>{secretPath}</span>
       </div>
@@ -44,6 +54,7 @@ export const SecretImportItem = ({
   id,
   importEnvName,
   importEnvPath,
+  isReplication,
   importedSecrets = [],
   searchTerm = "",
   secretPath,
@@ -92,7 +103,11 @@ export const SecretImportItem = ({
           <FontAwesomeIcon icon={faFileImport} />
         </div>
         <div className="flex flex-grow items-center px-4 py-2">
-          <EnvFolderIcon env={importEnvName || ""} secretPath={importEnvPath} />
+          <EnvFolderIcon
+            env={importEnvName || ""}
+            secretPath={importEnvPath}
+            isReplication={isReplication}
+          />
         </div>
         <div className="flex items-center space-x-4 border-l border-mineshaft-600 px-4 py-2">
           <ProjectPermissionCan

frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportListView.tsx

@@ -90,7 +90,7 @@ export const SecretImportListView = ({
   const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
     "deleteSecretImport"
   ] as const);
-  
+
   const sensors = useSensors(
     useSensor(MouseSensor, {}),
     useSensor(TouchSensor, {}),
@@ -159,12 +159,13 @@ export const SecretImportListView = ({
       >
         <SortableContext items={items} strategy={verticalListSortingStrategy}>
           {items?.map((item) => {
-            const { importPath, importEnv, id } = item;
+            const { importPath, importEnv, id, isReplication } = item;
             return (
               <SecretImportItem
                 searchTerm={searchTerm}
                 key={`imported-env-${id}`}
                 id={id}
+                isReplication={isReplication}
                 importEnvPath={importPath}
                 importEnvName={importEnv.name}
                 importedSecrets={computeImportedSecretRows(
@@ -185,9 +186,8 @@ export const SecretImportListView = ({
         isOpen={popUp.deleteSecretImport.isOpen}
         deleteKey="unlink"
         title="Do you want to remove this secret import?"
-        subTitle={`This will unlink secrets from environment ${
-          (popUp.deleteSecretImport?.data as TSecretImport)?.importEnv
-        } of path ${(popUp.deleteSecretImport?.data as TSecretImport)?.importPath}?`}
+        subTitle={`This will unlink secrets from environment ${(popUp.deleteSecretImport?.data as TSecretImport)?.importEnv
+          } of path ${(popUp.deleteSecretImport?.data as TSecretImport)?.importPath}?`}
         onChange={(isOpen) => handlePopUpToggle("deleteSecretImport", isOpen)}
         onDeleteApproved={handleSecretImportDelete}
       />

frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx

@@ -420,9 +420,8 @@ export const SecretItem = memo(
                       <Tooltip
                         content={
                           secretReminderRepeatDays && secretReminderRepeatDays > 0
-                            ? `Every ${secretReminderRepeatDays} day${
-                                Number(secretReminderRepeatDays) > 1 ? "s" : ""
-                              }
+                            ? `Every ${secretReminderRepeatDays} day${Number(secretReminderRepeatDays) > 1 ? "s" : ""
+                            }
                           `
                             : "Reminder"
                         }