feat: updated ui to reflect secret import and approval

frontend/src/hooks/api/secretApprovalRequest/queries.tsx

@@ -220,6 +220,7 @@ export const useGetSecretApprovalRequestCount = ({
 }) =>
   useQuery({
     queryKey: secretApprovalRequestKeys.count({ workspaceId }),
+    refetchInterval: 5000,
     queryFn: () => fetchSecretApprovalRequestCount({ workspaceId }),
     enabled: Boolean(workspaceId) && (options?.enabled ?? true)
   });

frontend/src/hooks/api/secretApprovalRequest/types.ts

@@ -44,6 +44,7 @@ export type TSecretApprovalSecChange = {
 
 export type TSecretApprovalRequest<J extends unknown = EncryptedSecret> = {
   id: string;
+  isReplication?: boolean;
   slug: string;
   createdAt: string;
   committerId: string;

frontend/src/hooks/api/secretImports/types.ts

@@ -10,6 +10,7 @@ export type TSecretImport = {
   position: string;
   createdAt: string;
   updatedAt: string;
+  isReplication?: boolean;
 };
 
 export type TGetImportedFoldersByEnvDTO = {

frontend/src/hooks/api/secrets/queries.tsx

@@ -67,6 +67,7 @@ export const decryptSecrets = (
       env: encSecret.environment,
       key: secretKey,
       value: secretValue,
+      isReplicated: encSecret.isReplicated,
       tags: encSecret.tags,
       comment: secretComment,
       reminderRepeatDays: encSecret.secretReminderRepeatDays,

frontend/src/hooks/api/secrets/types.ts

@@ -14,6 +14,7 @@ export type EncryptedSecret = {
   secretValueIV: string;
   secretValueTag: string;
   __v: number;
+  isReplicated?: boolean;
   createdAt: string;
   updatedAt: string;
   skipMultilineEncoding?: boolean;
@@ -31,6 +32,7 @@ export type DecryptedSecret = {
   key: string;
   value: string;
   comment: string;
+  isReplicated?: boolean;
   reminderRepeatDays?: number | null;
   reminderNote?: string | null;
   tags: WsTag[];

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx

@@ -212,7 +212,8 @@ export const SecretApprovalRequest = () => {
                     createdAt,
                     policy,
                     reviewers,
-                    status
+                    status,
+                    isReplication
                   } = secretApproval;
                   const isApprover = policy?.approvers?.indexOf(myMembershipId || "") !== -1;
                   const isReviewed =
@@ -240,8 +241,9 @@ export const SecretApprovalRequest = () => {
                         Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
                         {membersGroupById?.[committerId]?.user?.firstName}{" "}
                         {membersGroupById?.[committerId]?.user?.lastName} (
-                        {membersGroupById?.[committerId]?.user?.email}){" "}
-                        {isApprover && !isReviewed && status === "open" && "- Review required"}
+                        {membersGroupById?.[committerId]?.user?.email})
+                        {isReplication && "via replication"}
+                        {isApprover && !isReviewed && status === "open" && " - Review required"}
                       </span>
                     </div>
                   );

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -185,6 +185,7 @@ export const SecretApprovalRequestChanges = ({
           <div className="flex flex-grow flex-col">
             <div className="mb-1 text-lg">
               {generateCommitText(secretApprovalRequestDetails.commits)}
+              {secretApprovalRequestDetails.isReplication && <span className="text-sm text-bunker-300"> (replication)</span>}
             </div>
             <div className="flex items-center text-sm text-bunker-300">
               {committer?.user?.firstName}

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"
                         }