github.com/minio/console@v1.4.1/web-app/src/screens/Console/Configurations/ConfigurationPanels/ImportConfigButton.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, { Fragment, useEffect, useRef, useState } from "react";
    18  import { Button, DownloadIcon } from "mds";
    19  import useApi from "../../Common/Hooks/useApi";
    20  import {
    21    setErrorSnackMessage,
    22    setServerNeedsRestart,
    23  } from "../../../../systemSlice";
    24  import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
    25  import { useDispatch, useSelector } from "react-redux";
    26  import { useNavigate } from "react-router-dom";
    27  import { AppState } from "../../../../store";
    28  
    29  const ImportConfigButton = () => {
    30    const navigate = useNavigate();
    31    const dispatch = useDispatch();
    32  
    33    const needsRestart = useSelector(
    34      (state: AppState) => state.system.serverNeedsRestart,
    35    );
    36  
    37    const [refreshPage, setRefreshPage] = useState<boolean | undefined>(
    38      undefined,
    39    );
    40    const fileUpload = useRef<HTMLInputElement>(null);
    41  
    42    const [isReqLoading, invokeApi] = useApi(
    43      (res: any) => {
    44        //base64 encoded information so decode before downloading.
    45        dispatch(setServerNeedsRestart(true)); //import should refreshPage as per mc.
    46        setRefreshPage(true);
    47      },
    48      (err) => {
    49        dispatch(setErrorSnackMessage(err));
    50      },
    51    );
    52  
    53    useEffect(() => {
    54      if (!needsRestart && refreshPage) {
    55        navigate(0); // refresh the page.
    56      }
    57    }, [needsRestart, refreshPage, navigate]);
    58  
    59    const handleUploadButton = (e: any) => {
    60      if (
    61        e === null ||
    62        e === undefined ||
    63        e.target.files === null ||
    64        e.target.files === undefined
    65      ) {
    66        return;
    67      }
    68      e.preventDefault();
    69      const [fileToUpload] = e.target.files;
    70  
    71      const formData = new FormData();
    72      const blobFile = new Blob([fileToUpload], { type: fileToUpload.type });
    73  
    74      formData.append("file", blobFile, fileToUpload.name);
    75      // @ts-ignore
    76      invokeApi("POST", `api/v1/configs/import`, formData);
    77  
    78      e.target.value = "";
    79    };
    80  
    81    return (
    82      <Fragment>
    83        <input
    84          type="file"
    85          onChange={handleUploadButton}
    86          style={{ display: "none" }}
    87          ref={fileUpload}
    88        />
    89        <TooltipWrapper tooltip="The file must be valid and  should have valid config values">
    90          <Button
    91            id={"import-config"}
    92            onClick={() => {
    93              if (fileUpload && fileUpload.current) {
    94                fileUpload.current.click();
    95              }
    96            }}
    97            icon={<DownloadIcon />}
    98            label={"Import"}
    99            variant={"regular"}
   100            disabled={isReqLoading}
   101          />
   102        </TooltipWrapper>
   103      </Fragment>
   104    );
   105  };
   106  
   107  export default ImportConfigButton;