Merge pull request #1535 from pangeacyber/store_button_style

Password modal bug fix, button style update

Author: ggallien13

packages/react-mui-store-file-viewer/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.69] - 2024-09-25
+
+### Fixed
+
+- Don't show password copy modal after Get Link modal
+
+### Changed
+
+- Updated "Share via Email" and "Get Link" button style to outlined
+
 ## [0.0.68] - 2024-09-19
 
 ### Fixed

packages/react-mui-store-file-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pangeacyber/react-mui-store-file-viewer",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "description": "An extension of material ui data-grid for Pangea store file objects",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/react-mui-store-file-viewer/src/components/CreateNewShareButton/CreateSharesButton/CreateShareModal.tsx

@@ -88,6 +88,7 @@ const CreateShareModal: FC<Props> = ({ object, open, onClose, onDone }) => {
 
   const [settingsObj, setSettingsObj] = useState(obj);
   const [settingsError, setSettingsError] = useState(false);
+  const [linkCreated, setLinkCreated] = useState(false);
 
   useEffect(() => {
     var date = configurations?.settings?.defaultExpiresAt;
@@ -122,7 +123,7 @@ const CreateShareModal: FC<Props> = ({ object, open, onClose, onDone }) => {
   }, [isLarge, open]);
 
   const handleClose = () => {
-    const sharePassword = password;
+    const sharePassword = shareType === "link" ? "" : password;
     resetContext();
     onClose(sharePassword);
   };
@@ -239,6 +240,7 @@ const CreateShareModal: FC<Props> = ({ object, open, onClose, onDone }) => {
               (v, k) => !!v && ShareCreateRequestFields.has(k)
             )
           ).then((isSuccess) => {
+            setLinkCreated(true);
             if (isSuccess && shareType === "email") {
               handleClose();
             }
@@ -297,7 +299,9 @@ const CreateShareModal: FC<Props> = ({ object, open, onClose, onDone }) => {
         }}
         disabled={loading || settingsError}
         clearable={true}
-        clearButtonLabel={shareType === "link" ? "Done" : "Cancel"}
+        clearButtonLabel={
+          shareType === "link" && linkCreated ? "Done" : "Cancel"
+        }
         onCancel={handleClose}
         autoSave={shareType === "link" ? true : false}
         // @ts-ignore

packages/react-mui-store-file-viewer/src/components/CreateNewShareButton/CreateSharesButton/ShareLinkDetails.tsx

@@ -43,6 +43,7 @@ const ShareLinkDetails = () => {
           ":hover": {
             bgcolor: modify(theme.palette.info.main, 0.8),
           },
+          textWrap: "nowrap",
         }}
         fullWidth
         data-testid={"Share-Copy-Btn"}

packages/react-mui-store-file-viewer/src/components/CreateNewShareButton/CreateSharesButton/index.tsx

@@ -1,7 +1,8 @@
-import { Box, Button, ButtonProps } from "@mui/material";
-import { FC, useEffect, useState } from "react";
+import { Button, ButtonProps } from "@mui/material";
+import { FC, useState } from "react";
 
 import AddIcon from "@mui/icons-material/Add";
+import LinkIcon from "@mui/icons-material/Link";
 import { ObjectStore } from "../../../types";
 import { ShareCreateProvider } from "../../../hooks/context";
 import CreateShareModal from "./CreateShareModal";
@@ -42,7 +43,13 @@ const CreateSharesButton: FC<Props> = ({
       <Button
         variant="text"
         {...ButtonProps}
-        startIcon={<AddIcon fontSize="small" />}
+        startIcon={
+          shareType === "email" ? (
+            <AddIcon fontSize="small" />
+          ) : (
+            <LinkIcon fontSize="small" />
+          )
+        }
         data-testid="New-Share-Btn"
         onClick={() => setOpen(true)}
       >

packages/react-mui-store-file-viewer/src/components/CreateNewShareButton/GetEmailLinkField.tsx

@@ -53,7 +53,7 @@ const UnControlledGetEmailLinkField: FC<FieldComponentProps> = ({
       <Typography variant="caption" color="textSecondary" mt={1}>
         Enter an email to protect the link with a one-time authentication code
       </Typography>
-      <Stack width="100%" direction="row" spacing={1}>
+      <Stack width="100%" direction="row" spacing={1} alignItems="flex-start">
         <TextField
           value={newValue}
           name="recipient_email"
@@ -82,7 +82,10 @@ const UnControlledGetEmailLinkField: FC<FieldComponentProps> = ({
           variant="outlined"
           onClick={handleSubmitValue}
           disabled={!newValue || !!newValueError || loading}
-          sx={{ minWidth: "100px" }}
+          sx={{
+            minWidth: "100px",
+            textWrap: "nowrap",
+          }}
         >
           {loading ? "Saving..." : "Get Link"}
         </Button>

packages/react-mui-store-file-viewer/src/components/CreateNewShareButton/GetPasswordLinkField.tsx

@@ -60,6 +60,7 @@ const UnControlledGetPasswordLinkField: FC<FieldComponentProps> = ({
         width="100%"
         direction="row"
         gap={1}
+        alignItems="flex-start"
         sx={{
           "& .MuiFormGroup-root": {
             width: "calc(100% - 100px)",
@@ -77,7 +78,10 @@ const UnControlledGetPasswordLinkField: FC<FieldComponentProps> = ({
           variant="outlined"
           onClick={handleSubmitValue}
           disabled={!password || !!passwordError || error || loading}
-          sx={{ minWidth: "100px" }}
+          sx={{
+            minWidth: "100px",
+            textWrap: "nowrap",
+          }}
         >
           {loading ? "Saving..." : "Get Link"}
         </Button>

packages/react-mui-store-file-viewer/src/components/CreateNewShareButton/GetPhoneLinkField.tsx

@@ -59,7 +59,7 @@ const UnControlledGetPhoneLinkField: FC<FieldComponentProps> = ({
         Enter a phone number to protect the link with a one-time authentication
         code
       </Typography>
-      <Stack width="100%" direction="row" spacing={1}>
+      <Stack width="100%" direction="row" spacing={1} alignItems="flex-start">
         <TextField
           value={newValue}
           name="recipient_phone"
@@ -95,7 +95,10 @@ const UnControlledGetPhoneLinkField: FC<FieldComponentProps> = ({
           variant="outlined"
           onClick={handleSubmitValue}
           disabled={!newValue || !!newValueError || loading}
-          sx={{ minWidth: "100px" }}
+          sx={{
+            minWidth: "100px",
+            textWrap: "nowrap",
+          }}
         >
           {loading ? "Saving..." : "Get Link"}
         </Button>

packages/react-mui-store-file-viewer/src/components/CreateNewShareButton/SharePasswordField.tsx

@@ -99,7 +99,13 @@ const UnControlledSharePasswordField: FC<FieldComponentProps> = ({
 
   return (
     <Stack gap={1} width="100%">
-      <Stack width="100%" direction="row" mt={1} gap={0.5}>
+      <Stack
+        width="100%"
+        direction="row"
+        mt={1}
+        gap={0.5}
+        alignItems="flex-start"
+      >
         <TextField
           value={emailValue}
           name="recipient_email"

packages/react-mui-store-file-viewer/src/components/CreateNewShareButton/SharePhonesField.tsx

@@ -133,7 +133,13 @@ const UnControlledSharePhonesField: FC<FieldComponentProps> = ({
 
   return (
     <Stack gap={1} width="100%">
-      <Stack width="100%" direction="row" mt={1} gap={0.5}>
+      <Stack
+        width="100%"
+        direction="row"
+        mt={1}
+        gap={0.5}
+        alignItems="flex-start"
+      >
         <TextField
           value={emailValue}
           name="recipient_email"