github.com/minio/console@v1.4.1/web-app/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { useState } from "react";
    18  import { Button, EditIcon, FormLayout, Grid, InputBox, Switch } from "mds";
    19  import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
    20  import { useAppDispatch } from "../../../store";
    21  import { downloadObject } from "./utils";
    22  import { BucketObject } from "api/consoleApi";
    23  import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
    24  
    25  interface IRenameLongFilename {
    26    open: boolean;
    27    bucketName: string;
    28    internalPaths: string;
    29    currentItem: string;
    30    actualInfo: BucketObject;
    31    closeModal: () => void;
    32  }
    33  
    34  const RenameLongFileName = ({
    35    open,
    36    closeModal,
    37    currentItem,
    38    internalPaths,
    39    actualInfo,
    40    bucketName,
    41  }: IRenameLongFilename) => {
    42    const dispatch = useAppDispatch();
    43  
    44    const [newFileName, setNewFileName] = useState<string>(currentItem);
    45    const [acceptLongName, setAcceptLongName] = useState<boolean>(false);
    46  
    47    const doDownload = (e: React.FormEvent<HTMLFormElement>) => {
    48      e.preventDefault();
    49      downloadObject(dispatch, bucketName, internalPaths, actualInfo);
    50      closeModal();
    51    };
    52  
    53    return (
    54      <ModalWrapper
    55        title={`Rename Download`}
    56        modalOpen={open}
    57        onClose={closeModal}
    58        titleIcon={<EditIcon />}
    59      >
    60        <div>
    61          The file you are trying to download has a long name.
    62          <br />
    63          This can cause issues on Windows Systems by trimming the file name after
    64          download.
    65          <br />
    66          <br /> We recommend to rename the file download
    67        </div>
    68        <form
    69          noValidate
    70          autoComplete="off"
    71          onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
    72            doDownload(e);
    73          }}
    74        >
    75          <FormLayout withBorders={false} containerPadding={false}>
    76            <InputBox
    77              id="download-filename"
    78              name="download-filename"
    79              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
    80                setNewFileName(event.target.value);
    81              }}
    82              label=""
    83              type={"text"}
    84              value={newFileName}
    85              error={
    86                newFileName.length > 200 && !acceptLongName
    87                  ? "Filename should be less than 200 characters long."
    88                  : ""
    89              }
    90            />
    91            <Switch
    92              value="acceptLongName"
    93              id="acceptLongName"
    94              name="acceptLongName"
    95              checked={acceptLongName}
    96              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
    97                setAcceptLongName(event.target.checked);
    98                if (event.target.checked) {
    99                  setNewFileName(currentItem);
   100                }
   101              }}
   102              label={"Use Original Name"}
   103            />
   104            <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
   105              <Button
   106                id={"download-file"}
   107                type="submit"
   108                variant="callAction"
   109                color="primary"
   110                disabled={newFileName.length > 200 && !acceptLongName}
   111                label={"Download File"}
   112              />
   113            </Grid>
   114          </FormLayout>
   115        </form>
   116      </ModalWrapper>
   117    );
   118  };
   119  
   120  export default RenameLongFileName;