Merge pull request #229 from daita-technologies/feat/get-upload-pip-daita-token

feat: get upload pip daita token

Author: ttattl

src/components/UploadFile/UploadGuideDialog.tsx

@@ -1,13 +1,34 @@
+import { ContentCopy, Visibility, VisibilityOff } from "@mui/icons-material";
 import {
   Box,
   Dialog,
   DialogContent,
   DialogContentText,
   DialogTitle,
+  FormControl,
+  Grid,
+  IconButton,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+  Popover,
   Typography,
 } from "@mui/material";
+import MyButton from "components/common/MyButton";
+import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
+import { toast } from "react-toastify";
 import { selectorUserInfo } from "reduxes/auth/selector";
+import {
+  selectorCurrentProjectId,
+  selectorCurrentProjectName,
+} from "reduxes/project/selector";
+import { projectApi } from "services";
+import { copy } from "utils/clipboard";
+
+const DEFAULT_UPLOAD_TOKEN_VALUE = "Get your upload token now!";
+
+const copyPopoverTextId = "copy-popover-text";
 
 const UploadGuideDialog = function ({
   isOpen,
@@ -20,6 +41,61 @@ const UploadGuideDialog = function ({
   const generalStyle = { margin: 0 };
   const commentStyle = { ...generalStyle, color: "#858e93" };
   const colorStringStyle = { color: "#98cae8" };
+
+  const [isShowToken, setIsShowToken] = useState(false);
+  const [uploadTokenValue, setUploadTokenValue] = useState(
+    DEFAULT_UPLOAD_TOKEN_VALUE
+  );
+
+  const [isGettingToken, setIsGettingToken] = useState(false);
+
+  const currentProjectId = useSelector(selectorCurrentProjectId);
+  const currentProjectName = useSelector(selectorCurrentProjectName);
+
+  const [copiedPopoverAnchorEl, setCopiedPopoverAnchorEl] =
+    useState<HTMLButtonElement | null>(null);
+  const isShowCopiedPopover = useMemo(
+    () => Boolean(copiedPopoverAnchorEl),
+    [copiedPopoverAnchorEl]
+  );
+  const handleCloseCopiedPopover = () => {
+    setCopiedPopoverAnchorEl(null);
+  };
+
+  const handleClickShowToken = () => {
+    setIsShowToken(!isShowToken);
+  };
+
+  const handleClickCopy = async (
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    const isCopied = await copy(uploadTokenValue);
+
+    if (isCopied) {
+      setCopiedPopoverAnchorEl(event.target as HTMLButtonElement);
+      setTimeout(handleCloseCopiedPopover, 3000);
+    } else {
+      toast.error("Unable to copy.");
+    }
+  };
+
+  const handleGetUploadToken = () => {
+    setIsGettingToken(true);
+    projectApi
+      .getUploadToken({
+        projectId: currentProjectId,
+        projectName: currentProjectName,
+      })
+      .then((getUploadTokenResponse: any) => {
+        setIsGettingToken(false);
+        if (getUploadTokenResponse && getUploadTokenResponse.error === false) {
+          setUploadTokenValue(getUploadTokenResponse.data.token);
+        } else {
+          toast.error("Unable to get upload token. Please try again later!");
+        }
+      });
+  };
+
   return (
     <Dialog fullWidth maxWidth="md" open={isOpen} onClose={onClose}>
       <DialogTitle sx={{ p: 4 }}>
@@ -53,23 +129,79 @@ const UploadGuideDialog = function ({
                   # upload your dataset using the following command
                 </p>
                 <p style={commentStyle}>
-                  # (don&apos;t forget to set `path_to_your_dataset`)
+                  # (don&apos;t forget to set `path_to_your_dataset`) daita
+                  my-folder
                 </p>
                 <p style={{ ...generalStyle, whiteSpace: "nowrap" }}>
-                  daita token=
-                  <span style={colorStringStyle}>
-                    &apos;d478a...&apos;
-                  </span>{" "}
-                  dataset_id=
-                  <span style={colorStringStyle}>
-                    &apos;6225d1...&apos;
-                  </span>{" "}
-                  input_dir=&apos;path_to_your_dataset&apos;
+                  daita --dir{" "}
+                  <span style={colorStringStyle}>path_to_your_dataset</span>{" "}
+                  --daita_token{" "}
+                  <span style={colorStringStyle}>your_upload_token</span>
                 </p>
               </Box>
             </Typography>
           </Typography>
         </DialogContentText>
+        <Box mt={4}>
+          <Grid container columnSpacing={1} alignItems="center">
+            <Grid item xs={9}>
+              <FormControl variant="outlined" fullWidth>
+                <InputLabel>Upload Token</InputLabel>
+                <OutlinedInput
+                  type={isShowToken ? "text" : "password"}
+                  value={uploadTokenValue}
+                  readOnly
+                  disabled={isGettingToken}
+                  fullWidth
+                  endAdornment={
+                    <InputAdornment position="end">
+                      <IconButton
+                        id="copyPopoverTextId"
+                        sx={{ mr: 1 }}
+                        onClick={handleClickCopy}
+                        edge="end"
+                      >
+                        <ContentCopy />
+                      </IconButton>
+                      <Popover
+                        id={copyPopoverTextId}
+                        open={isShowCopiedPopover}
+                        anchorEl={copiedPopoverAnchorEl}
+                        onClose={handleCloseCopiedPopover}
+                        anchorOrigin={{
+                          vertical: "bottom",
+                          horizontal: "left",
+                        }}
+                      >
+                        <Typography sx={{ p: 1 }} variant="subtitle2">
+                          Copied!
+                        </Typography>
+                      </Popover>
+                      <IconButton
+                        onClick={handleClickShowToken}
+                        onMouseDown={handleClickShowToken}
+                        edge="end"
+                      >
+                        {isShowToken ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                  label="Upload Token"
+                />
+              </FormControl>
+            </Grid>
+            <Grid item xs={3}>
+              <MyButton
+                fullWidth
+                variant="contained"
+                isLoading={isGettingToken}
+                onClick={handleGetUploadToken}
+              >
+                Get Upload Token
+              </MyButton>
+            </Grid>
+          </Grid>
+        </Box>
       </DialogContent>
     </Dialog>
   );

src/components/UploadFile/index.tsx

@@ -476,7 +476,7 @@ const UploadFile = function (props: UploadFileProps) {
             <input {...getInputProps()} multiple />
             {renderDropzoneContent()}
           </Box>
-          {/* <Typography mt={1} fontStyle="italic" variant="body2" fontSize={14}>
+          <Typography mt={1} fontStyle="italic" variant="body2" fontSize={14}>
             * If you would like to upload your dataset programmatically,{" "}
             <Typography
               component="span"
@@ -487,7 +487,7 @@ const UploadFile = function (props: UploadFileProps) {
               click here{" "}
             </Typography>
             for more information.
-          </Typography> */}
+          </Typography>
           <UploadGuideDialog
             onClose={handleCloseUploadGuideDialog}
             isOpen={isOpenUploadGuideDialog}

src/services/projectApi.tsx

@@ -6,10 +6,13 @@ import {
   VIEW_ALBUM_PAGE_SIZE,
   uploadZipApiUrl,
   generateApiUrl,
+  ID_TOKEN_NAME,
 } from "constants/defaultValues";
+import { ApiResponse } from "constants/type";
 import { FetchImagesParams, ImageSourceType } from "reduxes/album/type";
 import { GenerateImagePayload } from "reduxes/generate/type";
 import { UpdateProjectInfoPayload } from "reduxes/project/type";
+import { getLocalStorage } from "utils/general";
 
 export interface UploadUpdateListObjectInfo {
   // NOTE: <bucket>/<identity_id>/<project_id>/<data_name>
@@ -54,6 +57,12 @@ export interface DeleteImagesRequestBody {
   listObjectInfo: Array<DeleteObjectInfo>;
 }
 
+export interface GetUploadTokenResponse extends ApiResponse {
+  data: {
+    token: string;
+  };
+}
+
 export const convertToUnderScoreValue = (
   listObjectInfoItem: UploadUpdateListObjectInfo
 ) => ({
@@ -303,6 +312,24 @@ const projectApi = {
       },
       { headers: getAuthHeader() }
     ),
+  getUploadToken: ({
+    idToken,
+    projectId,
+    projectName,
+  }: {
+    idToken?: string;
+    projectId: string;
+    projectName: string;
+  }) =>
+    axios.post(
+      `${uploadZipApiUrl}/generate/daita_upload_token`,
+      {
+        id_token: idToken || getLocalStorage(ID_TOKEN_NAME) || "",
+        project_id: projectId,
+        project_name: projectName,
+      },
+      { headers: getAuthHeader() }
+    ),
 };
 
 export default projectApi;

src/utils/clipboard.ts

@@ -0,0 +1,72 @@
+export const copyStringToClipboard = (text: string) => {
+  if (navigator.userAgent.match(/ipad|ipod|iphone|android/i)) {
+    // save current contentEditable/readOnly status
+    const el = document.createElement("textarea");
+    el.value = text;
+    el.setAttribute("readonly", "");
+    document.body.appendChild(el);
+
+    const editable = el.contentEditable;
+    const { readOnly } = el;
+
+    // convert to editable with readonly to stop iOS keyboard opening
+    el.contentEditable = "true";
+    el.readOnly = true;
+
+    // create a selectable range
+    const range = document.createRange();
+    range.selectNodeContents(el);
+
+    // select the range
+    const selection = window.getSelection();
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      el.setSelectionRange(0, 999999);
+
+      // restore contentEditable/readOnly to original state
+      el.contentEditable = editable;
+      el.readOnly = readOnly;
+      const isCopiedOnMobile = document.execCommand("copy");
+      document.body.removeChild(el);
+
+      return isCopiedOnMobile;
+    }
+
+    return false;
+  }
+
+  // Create new element
+  const element = document.createElement("textarea");
+  // Set value (text to be copied)
+  element.value = text;
+
+  // Set non-editable to avoid focus and move outside of view
+  element.setAttribute("readonly", "false");
+  element.setAttribute("contenteditable", "true");
+  // element.style.display = 'none';
+  document.body.appendChild(element);
+  // Select text inside element
+  element.select();
+  // Copy text to clipboard
+  const isCopiedOnDesktop = document.execCommand("copy");
+  // Remove temporary element
+  document.body.removeChild(element);
+
+  return isCopiedOnDesktop;
+};
+
+type CopyFn = (text: string) => Promise<boolean>;
+
+export const copy: CopyFn = async (text) => {
+  if (!navigator?.clipboard) {
+    return copyStringToClipboard(text);
+  }
+
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};