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

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2022 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, useState } from "react";
    18  import {
    19    AddAccessRuleIcon,
    20    BackLink,
    21    Button,
    22    CodeEditor,
    23    FormLayout,
    24    Grid,
    25    InputBox,
    26    PageLayout,
    27  } from "mds";
    28  import { useNavigate } from "react-router-dom";
    29  import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
    30  import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
    31  import { useAppDispatch } from "../../../store";
    32  import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
    33  import KMSHelpBox from "./KMSHelpbox";
    34  import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
    35  import HelpMenu from "../HelpMenu";
    36  import { api } from "api";
    37  import { ApiError, HttpResponse } from "api/consoleApi";
    38  import { errorToHandler } from "api/errors";
    39  
    40  export const emptyContent = '{\n    "bytes": ""\n}';
    41  
    42  const ImportKey = () => {
    43    const dispatch = useAppDispatch();
    44    const navigate = useNavigate();
    45  
    46    const [loadingImport, setLoadingImport] = useState<boolean>(false);
    47    const [keyName, setKeyName] = useState<string>("");
    48    const [keyContent, setKeyContent] = useState<string>(emptyContent);
    49  
    50    const importRecord = (event: React.FormEvent) => {
    51      setLoadingImport(true);
    52      event.preventDefault();
    53      let data = JSON.parse(keyContent);
    54  
    55      api.kms
    56        .kmsImportKey(keyName, data)
    57        .then((_) => {
    58          navigate(`${IAM_PAGES.KMS_KEYS}`);
    59        })
    60        .catch(async (res: HttpResponse<void, ApiError>) => {
    61          const err = (await res.json()) as ApiError;
    62          dispatch(setErrorSnackMessage(errorToHandler(err)));
    63        })
    64        .finally(() => setLoadingImport(false));
    65    };
    66  
    67    const resetForm = () => {
    68      setKeyName("");
    69      setKeyContent("");
    70    };
    71  
    72    const validateKeyName = (keyName: string) => {
    73      if (keyName.indexOf(" ") !== -1) {
    74        return "Key name cannot contain spaces";
    75      } else return "";
    76    };
    77  
    78    const validSave = keyName.trim() !== "" && keyName.indexOf(" ") === -1;
    79  
    80    useEffect(() => {
    81      dispatch(setHelpName("import_key"));
    82      // eslint-disable-next-line react-hooks/exhaustive-deps
    83    }, []);
    84  
    85    return (
    86      <Fragment>
    87        <Grid item xs={12}>
    88          <PageHeaderWrapper
    89            label={
    90              <BackLink
    91                onClick={() => navigate(IAM_PAGES.KMS_KEYS)}
    92                label={"Keys"}
    93              />
    94            }
    95            actions={<HelpMenu />}
    96          />
    97          <PageLayout>
    98            <FormLayout
    99              title={"Import Key"}
   100              icon={<AddAccessRuleIcon />}
   101              helpBox={
   102                <KMSHelpBox
   103                  helpText={"Encryption Key"}
   104                  contents={[
   105                    "Import a cryptographic key in the Key Management Service server connected to MINIO.",
   106                  ]}
   107                />
   108              }
   109            >
   110              <form
   111                noValidate
   112                autoComplete="off"
   113                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
   114                  importRecord(e);
   115                }}
   116              >
   117                <InputBox
   118                  id="key-name"
   119                  name="key-name"
   120                  label="Key Name"
   121                  autoFocus={true}
   122                  value={keyName}
   123                  error={validateKeyName(keyName)}
   124                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
   125                    setKeyName(e.target.value);
   126                  }}
   127                />
   128                <CodeEditor
   129                  label={"Set key Content"}
   130                  value={keyContent}
   131                  onChange={(value) => {
   132                    setKeyContent(value);
   133                  }}
   134                  editorHeight={"350px"}
   135                />
   136                <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
   137                  <Button
   138                    id={"clear"}
   139                    type="button"
   140                    variant="regular"
   141                    onClick={resetForm}
   142                    label={"Clear"}
   143                  />
   144  
   145                  <Button
   146                    id={"import-key"}
   147                    type="submit"
   148                    variant="callAction"
   149                    color="primary"
   150                    disabled={loadingImport || !validSave}
   151                    label={"Import"}
   152                  />
   153                </Grid>
   154              </form>
   155            </FormLayout>
   156          </PageLayout>
   157        </Grid>
   158      </Fragment>
   159    );
   160  };
   161  
   162  export default ImportKey;