requested changes

frontend/src/hooks/api/secretSharing/mutations.ts

@@ -5,7 +5,7 @@ import { apiRequest } from "@app/config/request";
 import { secretSharingKeys } from "./queries";
 import {
   TCreatedSharedSecret,
-  TCreateSecretRequestRequest,
+  TCreateSecretRequestRequestDTO,
   TCreateSharedSecretRequest,
   TDeleteSecretRequestDTO,
   TDeleteSharedSecretRequestDTO,
@@ -48,7 +48,7 @@ export const useCreatePublicSharedSecret = () => {
 export const useCreateSecretRequest = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: async (inputData: TCreateSecretRequestRequest) => {
+    mutationFn: async (inputData: TCreateSecretRequestRequestDTO) => {
       const { data } = await apiRequest.post<TCreatedSharedSecret>(
         "/api/v1/secret-sharing/requests",
         inputData

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

@@ -6,6 +6,7 @@ export type TSharedSecret = {
   updatedAt: Date;
   name: string | null;
   lastViewedAt?: Date;
+  accessType: SecretSharingAccessType;
   expiresAt: Date;
   expiresAfterViews: number | null;
   encryptedValue: string;
@@ -33,7 +34,7 @@ export type TCreateSharedSecretRequest = {
   accessType?: SecretSharingAccessType;
 };
 
-export type TCreateSecretRequestRequest = {
+export type TCreateSecretRequestRequestDTO = {
   name?: string;
   accessType?: SecretSharingAccessType;
   expiresAt: Date;

frontend/src/pages/organization/SecretSharingPage/ShareSecretSection.tsx

@@ -3,7 +3,6 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 
 import { Badge, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
-import { usePopUp } from "@app/hooks";
 
 import { RequestSecretTab } from "./components/RequestSecret/RequestSecretTab";
 import { ShareSecretTab } from "./components/ShareSecret/ShareSecretTab";
@@ -14,14 +13,6 @@ enum SecretSharingPageTabs {
 }
 
 export const ShareSecretSection = () => {
-  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
-    "createSharedSecret",
-    "deleteSharedSecretConfirmation",
-    "createSecretRequest",
-    "deleteSecretRequestConfirmation",
-    "revealSecretRequestValue"
-  ] as const);
-
   const navigate = useNavigate();
 
   const { selectedTab } = useSearch({
@@ -54,20 +45,10 @@ export const ShareSecretSection = () => {
           </Tab>
         </TabList>
         <TabPanel value={SecretSharingPageTabs.ShareSecret}>
-          <ShareSecretTab
-            handlePopUpOpen={handlePopUpOpen}
-            popUp={popUp}
-            handlePopUpToggle={handlePopUpToggle}
-            handlePopUpClose={handlePopUpClose}
-          />
+          <ShareSecretTab />
         </TabPanel>
         <TabPanel value={SecretSharingPageTabs.RequestSecret}>
-          <RequestSecretTab
-            handlePopUpOpen={handlePopUpOpen}
-            popUp={popUp}
-            handlePopUpToggle={handlePopUpToggle}
-            handlePopUpClose={handlePopUpClose}
-          />
+          <RequestSecretTab />
         </TabPanel>
       </Tabs>
     </div>

frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretForm.tsx

@@ -98,7 +98,12 @@ export const RequestSecretForm = () => {
         name="expiresIn"
         defaultValue="3600000"
         render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-          <FormControl label="Expires In" errorText={error?.message} isError={Boolean(error)}>
+          <FormControl
+            label="Expires In"
+            errorText={error?.message}
+            tooltipText="Select for how long someone is able to input the secret. If a secret is shared with you in time, it will remain available to you, even after the expiration."
+            isError={Boolean(error)}
+          >
             <Select
               defaultValue={field.value}
               {...field}

frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestSecretTab.tsx

@@ -4,41 +4,21 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { useDeleteSecretRequest } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
+import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AddSecretRequestModal } from "./AddSecretRequestModal";
 import { RequestedSecretsTable } from "./RequestedSecretsTable";
 import { RevealSecretValueModal } from "./RevealSecretValueModal";
 
-type Props = {
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<
-      ["createSecretRequest", "deleteSecretRequestConfirmation", "revealSecretRequestValue"]
-    >,
-    data?: any
-  ) => void;
-  popUp: UsePopUpState<
-    ["createSecretRequest", "deleteSecretRequestConfirmation", "revealSecretRequestValue"]
-  >;
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<
-      ["createSecretRequest", "deleteSecretRequestConfirmation", "revealSecretRequestValue"]
-    >,
-    state?: boolean
-  ) => void;
-  handlePopUpClose: (
-    popUpName: keyof UsePopUpState<["deleteSecretRequestConfirmation", "revealSecretRequestValue"]>
-  ) => void;
-};
-
 type DeleteModalData = { name: string; id: string };
 
-export const RequestSecretTab = ({
-  handlePopUpOpen,
-  popUp,
-  handlePopUpToggle,
-  handlePopUpClose
-}: Props) => {
+export const RequestSecretTab = () => {
+  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+    "createSecretRequest",
+    "deleteSecretRequestConfirmation",
+    "revealSecretRequestValue"
+  ] as const);
+
   const { mutateAsync: deleteSecretRequest } = useDeleteSecretRequest();
 
   const onDeleteApproved = async () => {

frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestedSecretsRow.tsx

@@ -4,7 +4,11 @@ import { format } from "date-fns";
 
 import { createNotification } from "@app/components/notifications";
 import { Badge, IconButton, Td, Tooltip, Tr } from "@app/components/v2";
-import { TSharedSecret, useRevealSecretRequestValue } from "@app/hooks/api/secretSharing";
+import {
+  SecretSharingAccessType,
+  TSharedSecret,
+  useRevealSecretRequestValue
+} from "@app/hooks/api/secretSharing";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 export const RequestedSecretsRow = ({
@@ -36,6 +40,23 @@ export const RequestedSecretsRow = ({
           </Badge>
         )}
       </Td>
+      <Td>
+        <Badge variant="primary">
+          <Tooltip
+            content={
+              row.accessType === SecretSharingAccessType.Anyone
+                ? "Anyone can input the secret."
+                : "Only members of the organization can input the secret."
+            }
+          >
+            <div>
+              {row.accessType === SecretSharingAccessType.Anyone
+                ? "Anyone"
+                : "Organization Members"}
+            </div>
+          </Tooltip>
+        </Badge>
+      </Td>
       <Td>{`${format(new Date(row.createdAt), "yyyy-MM-dd - HH:mm a")}`}</Td>
       <Td>{row.expiresAt ? format(new Date(row.expiresAt), "yyyy-MM-dd - HH:mm a") : "-"}</Td>
       <Td>
@@ -43,7 +64,7 @@ export const RequestedSecretsRow = ({
           <Tooltip
             content={
               row.encryptedSecret
-                ? "Reveal shared secret"
+                ? "Reveal secret"
                 : "Secret value must be provided before it can be viewed."
             }
           >
@@ -72,28 +93,30 @@ export const RequestedSecretsRow = ({
             </IconButton>
           </Tooltip>
 
-          <IconButton
-            isDisabled={Boolean(row.encryptedSecret) || isExpired}
-            className={Boolean(row.encryptedSecret) || isExpired ? "opacity-50" : ""}
-            onClick={async (e) => {
-              e.stopPropagation();
+          <Tooltip content="Copy link">
+            <IconButton
+              isDisabled={Boolean(row.encryptedSecret) || isExpired}
+              className={Boolean(row.encryptedSecret) || isExpired ? "opacity-50" : ""}
+              onClick={async (e) => {
+                e.stopPropagation();
 
-              navigator.clipboard.writeText(
-                `${window.location.origin}/secret-request/secret/${row.id}`
-              );
+                navigator.clipboard.writeText(
+                  `${window.location.origin}/secret-request/secret/${row.id}`
+                );
 
-              createNotification({
-                text: "Shared secret link copied to clipboard.",
-                type: "success"
-              });
-            }}
-            variant="plain"
-            ariaLabel="copy link"
-          >
-            <FontAwesomeIcon icon={faCopy} />
-          </IconButton>
+                createNotification({
+                  text: "Shared secret link copied to clipboard.",
+                  type: "success"
+                });
+              }}
+              variant="plain"
+              ariaLabel="copy link"
+            >
+              <FontAwesomeIcon icon={faCopy} />
+            </IconButton>
+          </Tooltip>
 
-          <Tooltip content="Delete Secret Request">
+          <Tooltip content="Delete">
             <IconButton
               onClick={(e) => {
                 e.stopPropagation();

frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RequestedSecretsTable.tsx

@@ -38,6 +38,7 @@ export const RequestedSecretsTable = ({ handlePopUpOpen }: Props) => {
           <Tr>
             <Th>Name</Th>
             <Th>Status</Th>
+            <Th>Access Type</Th>
             <Th>Created At</Th>
             <Th>Valid Until</Th>
             <Th aria-label="button" className="w-5" />
@@ -64,7 +65,7 @@ export const RequestedSecretsTable = ({ handlePopUpOpen }: Props) => {
           />
         )}
       {!isPending && !data?.secrets?.length && (
-        <EmptyState title="No secrets shared yet" icon={faKey} />
+        <EmptyState title="No secrets requested yet" icon={faKey} />
       )}
     </TableContainer>
   );

frontend/src/pages/organization/SecretSharingPage/components/RequestSecret/RevealSecretValueModal.tsx

@@ -27,7 +27,7 @@ const Content = ({ secretValue, secretRequestName }: ContentProps) => {
         </p>
       )}
 
-      <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+      <div className="mb-8 flex items-center justify-between rounded-md bg-mineshaft-700 p-2 text-base text-gray-400">
         <p className="mr-4 break-all">{secretValue}</p>
         <Tooltip content="Click to copy">
           <IconButton
@@ -46,7 +46,7 @@ const Content = ({ secretValue, secretRequestName }: ContentProps) => {
 
       <div className="mt-8 flex w-full items-center justify-between gap-2">
         <ModalClose asChild>
-          <Button colorSchema="primary">Close</Button>
+          <Button colorSchema="secondary">Close</Button>
         </ModalClose>
       </div>
     </>

frontend/src/pages/organization/SecretSharingPage/components/ShareSecret/ShareSecretTab.tsx

@@ -4,32 +4,19 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createNotification } from "@app/components/notifications";
 import { Button, DeleteActionModal } from "@app/components/v2";
 import { useDeleteSharedSecret } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
+import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AddShareSecretModal } from "./AddShareSecretModal";
 import { ShareSecretsTable } from "./ShareSecretsTable";
 
-type Props = {
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["createSharedSecret", "deleteSharedSecretConfirmation"]>,
-    data?: any
-  ) => void;
-  popUp: UsePopUpState<["createSharedSecret", "deleteSharedSecretConfirmation"]>;
-  handlePopUpToggle: (
-    popUpName: keyof UsePopUpState<["createSharedSecret", "deleteSharedSecretConfirmation"]>,
-    state?: boolean
-  ) => void;
-  handlePopUpClose: (popUpName: keyof UsePopUpState<["deleteSharedSecretConfirmation"]>) => void;
-};
-
 type DeleteModalData = { name: string; id: string };
 
-export const ShareSecretTab = ({
-  handlePopUpOpen,
-  popUp,
-  handlePopUpToggle,
-  handlePopUpClose
-}: Props) => {
+export const ShareSecretTab = () => {
+  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+    "createSharedSecret",
+    "deleteSharedSecretConfirmation"
+  ] as const);
+
   const deleteSecretShare = useDeleteSharedSecret();
 
   const onDeleteApproved = async () => {

frontend/src/pages/public/ViewSecretRequestByIDPage/components/SecretErrorContainer.tsx

@@ -6,7 +6,7 @@ export const SecretRequestErrorContainer = () => {
     <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-8">
       <div className="text-center">
         <FontAwesomeIcon icon={faKey} size="2x" />
-        <p className="mt-4">The secret request you are looking is missing or has expired.</p>
+        <p className="mt-4">The secret request you are looking for is missing or has expired.</p>
       </div>
     </div>
   );