Merge pull request #4864 from Infisical/feat/secrets-sharing-validity-info

[PLATFRM-87] feat: adds secret sharing validity info

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

@@ -59,6 +59,8 @@ export type TViewSharedSecretResponse = {
     tag: string;
     accessType: SecretSharingAccessType;
     orgName?: string;
+    expiresAt?: Date | string;
+    expiresAfterViews?: number | null;
   };
 };
 

frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx

@@ -13,6 +13,8 @@ import { Button, IconButton } from "@app/components/v2";
 import { useTimedReset, useToggle } from "@app/hooks";
 import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
 
+import { SecretShareInfo } from "./SecretShareInfo";
+
 type Props = {
   secret: TViewSharedSecretResponse["secret"];
   secretKey: string | null;
@@ -71,6 +73,7 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
           </IconButton>
         </div>
       </div>
+      <SecretShareInfo secret={secret} />
       <Button
         className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
         colorSchema="primary"

frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx

@@ -0,0 +1,52 @@
+import { faClock, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
+
+type Props = {
+  secret: TViewSharedSecretResponse["secret"];
+};
+
+export const SecretShareInfo = ({ secret }: Props) => {
+  let timeRemaining: string | null = null;
+
+  if (secret.expiresAt) {
+    try {
+      timeRemaining = format(new Date(secret.expiresAt), "yyyy-MM-dd 'at' HH:mm a");
+    } catch {
+      timeRemaining = null;
+    }
+  }
+
+  let viewsRemaining: number | null = null;
+
+  if (secret.expiresAfterViews) {
+    viewsRemaining = secret.expiresAfterViews - 1;
+  }
+
+  if (!timeRemaining && viewsRemaining === null) {
+    return null;
+  }
+
+  return (
+    <div className="mt-4 flex flex-col gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-700/50 p-3 text-sm text-gray-300">
+      {timeRemaining && (
+        <div className="flex items-center gap-2">
+          <FontAwesomeIcon icon={faClock} className="text-mineshaft-400" />
+          <span>Expires on {timeRemaining}</span>
+        </div>
+      )}
+      {viewsRemaining !== null && (
+        <div className="flex items-center gap-2">
+          <FontAwesomeIcon icon={faEye} className="text-mineshaft-400" />
+          <span>
+            {viewsRemaining === 0
+              ? "This is the last time you can view this secret"
+              : `${viewsRemaining} more view${viewsRemaining === 1 ? "" : "s"} remaining`}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};