From 663be06d30600e2569e6fc6508c283d5bb92fd45 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Wed, 26 Jun 2024 00:22:47 +0800
Subject: [PATCH] feat: added share secret to main page side nav

---
 .../SecretListView/SecretDetaiSidebar.tsx     | 19 ++++++++++++++++---
 .../SecretListView/SecretListView.tsx         |  1 +
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
index f1b9a4c353..8890174cdb 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
@@ -7,6 +7,7 @@ import {
   faCircleDot,
   faClock,
   faPlus,
+  faShare,
   faTag
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -57,6 +58,7 @@ type Props = {
   ) => Promise<void>;
   tags: WsTag[];
   onCreateTag: () => void;
+  handleSecretShare: (value: string) => void;
 };
 
 export const SecretDetailSidebar = ({
@@ -69,7 +71,8 @@ export const SecretDetailSidebar = ({
   tags,
   onCreateTag,
   environment,
-  secretPath
+  secretPath,
+  handleSecretShare
 }: Props) => {
   const {
     register,
@@ -381,7 +384,7 @@ export const SecretDetailSidebar = ({
                   rows={5}
                 />
               </FormControl>
-              <div className="my-2 mb-6 border-b border-mineshaft-600 pb-4">
+              <div className="my-2 mb-4 border-b border-mineshaft-600 pb-4">
                 <Controller
                   control={control}
                   name="skipMultilineEncoding"
@@ -412,7 +415,17 @@ export const SecretDetailSidebar = ({
                   )}
                 />
               </div>
-              <div className="dark mb-4 flex-grow text-sm text-bunker-300">
+              <div className="ml-1 flex items-center space-x-2">
+                <Button
+                  className="px-2 py-1"
+                  variant="outline_bg"
+                  leftIcon={<FontAwesomeIcon icon={faShare} />}
+                  onClick={() => handleSecretShare(secret.valueOverride ?? secret.value)}
+                >
+                  Share Secret
+                </Button>
+              </div>
+              <div className="dark mt-4 mb-4 flex-grow text-sm text-bunker-300">
                 <div className="mb-2">Version History</div>
                 <div className="flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
                   {secretVersion?.map(({ createdAt, value, id }, i) => (
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx
index afd7b34752..2709590e2d 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx
@@ -398,6 +398,7 @@ export const SecretListView = ({
         onSaveSecret={handleSaveSecret}
         tags={wsTags}
         onCreateTag={() => handlePopUpOpen("createTag")}
+        handleSecretShare={(value: string) => handlePopUpOpen("createSharedSecret", { value })}
       />
       <CreateTagModal
         isOpen={popUp.createTag.isOpen}