feat: added option to share secret directly from main page

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

@@ -61,6 +61,7 @@ type Props = {
   onCreateTag: () => void;
   environment: string;
   secretPath: string;
+  handleSecretShare: () => void;
 };
 
 export const SecretItem = memo(
@@ -75,7 +76,8 @@ export const SecretItem = memo(
     onCreateTag,
     onToggleSecretSelect,
     environment,
-    secretPath
+    secretPath,
+    handleSecretShare
   }: Props) => {
     const { currentWorkspace } = useWorkspace();
     const { permission } = useProjectPermission();
@@ -420,8 +422,9 @@ export const SecretItem = memo(
                       <Tooltip
                         content={
                           secretReminderRepeatDays && secretReminderRepeatDays > 0
-                            ? `Every ${secretReminderRepeatDays} day${Number(secretReminderRepeatDays) > 1 ? "s" : ""
-                            }
+                            ? `Every ${secretReminderRepeatDays} day${
+                                Number(secretReminderRepeatDays) > 1 ? "s" : ""
+                              }
                           `
                             : "Reminder"
                         }
@@ -461,6 +464,20 @@ export const SecretItem = memo(
                         </PopoverTrigger>
                       )}
                     </ProjectPermissionCan>
+                    <IconButton
+                      className="w-0 overflow-hidden p-0 group-hover:mr-2 group-hover:w-5 data-[state=open]:w-6"
+                      variant="plain"
+                      size="md"
+                      ariaLabel="share-secret"
+                      onClick={handleSecretShare}
+                    >
+                      <Tooltip content="Share Secret">
+                        <FontAwesomeSymbol
+                          className="h-3.5 w-3.5"
+                          symbolName={FontAwesomeSpriteName.ShareSecret}
+                        />
+                      </Tooltip>
+                    </IconButton>
                     <PopoverContent
                       className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
                       sticky="always"

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

@@ -13,6 +13,7 @@ import { secretKeys } from "@app/hooks/api/secrets/queries";
 import { DecryptedSecret, SecretType } from "@app/hooks/api/secrets/types";
 import { secretSnapshotKeys } from "@app/hooks/api/secretSnapshots/queries";
 import { UserWsKeyPair, WsTag } from "@app/hooks/api/types";
+import { AddShareSecretModal } from "@app/views/ShareSecretPage/components/AddShareSecretModal";
 
 import { useSelectedSecretActions, useSelectedSecrets } from "../../SecretMainPage.store";
 import { Filter, GroupBy, SortDir } from "../../SecretMainPage.types";
@@ -95,7 +96,8 @@ export const SecretListView = ({
   const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
     "deleteSecret",
     "secretDetail",
-    "createTag"
+    "createTag",
+    "createSharedSecret"
   ] as const);
 
   // strip of side effect queries
@@ -365,6 +367,11 @@ export const SecretListView = ({
                   onDeleteSecret={onDeleteSecret}
                   onDetailViewSecret={onDetailViewSecret}
                   onCreateTag={onCreateTag}
+                  handleSecretShare={() =>
+                    handlePopUpOpen("createSharedSecret", {
+                      value: secret.valueOverride ?? secret.value
+                    })
+                  }
                 />
               ))}
             </div>
@@ -396,6 +403,12 @@ export const SecretListView = ({
         isOpen={popUp.createTag.isOpen}
         onToggle={(isOpen) => handlePopUpToggle("createTag", isOpen)}
       />
+      <AddShareSecretModal
+        popUp={popUp}
+        handlePopUpToggle={handlePopUpToggle}
+        isPublic={false}
+        inModal
+      />
     </>
   );
 };

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.utils.ts

@@ -10,6 +10,7 @@ import {
   faCopy,
   faEllipsis,
   faKey,
+  faShare,
   faTags
 } from "@fortawesome/free-solid-svg-icons";
 import { z } from "zod";
@@ -66,7 +67,8 @@ export enum FontAwesomeSpriteName {
   Override = "secret-override",
   Close = "close",
   CheckedCircle = "check-circle",
-  ReplicatedSecretKey = "secret-replicated"
+  ReplicatedSecretKey = "secret-replicated",
+  ShareSecret = "share-secret"
 }
 
 // this is an optimization technique
@@ -82,5 +84,6 @@ export const FontAwesomeSpriteSymbols = [
   { icon: faCodeBranch, symbol: FontAwesomeSpriteName.Override },
   { icon: faClose, symbol: FontAwesomeSpriteName.Close },
   { icon: faCheckCircle, symbol: FontAwesomeSpriteName.CheckedCircle },
-  { icon: faClone, symbol: FontAwesomeSpriteName.ReplicatedSecretKey }
+  { icon: faClone, symbol: FontAwesomeSpriteName.ReplicatedSecretKey },
+  { icon: faShare, symbol: FontAwesomeSpriteName.ShareSecret }
 ];