github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/EnvironmentConfigDialog/EnvironmentConfigDialog.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import React, { useCallback, useEffect, useState } from 'react';
    17  import { Button } from '../button';
    18  import { Close } from '../../../images';
    19  import { PlainDialog } from '../dialog/ConfirmationDialog';
    20  import { useSearchParams } from 'react-router-dom';
    21  import { getOpenEnvironmentConfigDialog, setOpenEnvironmentConfigDialog } from '../../utils/Links';
    22  import { Spinner } from '../Spinner/Spinner';
    23  import { GetEnvironmentConfigPretty, showSnackbarError } from '../../utils/store';
    24  
    25  export const environmentConfigDialogClass = 'environment-config-dialog';
    26  const environmentConfigDialogAppBarClass = environmentConfigDialogClass + '-app-bar';
    27  const environmentConfigDialogDataClass = environmentConfigDialogClass + '-app-bar-data';
    28  const environmentConfigDialogNameClass = environmentConfigDialogClass + '-name';
    29  export const environmentConfigDialogCloseClass = environmentConfigDialogClass + '-close';
    30  export const environmentConfigDialogConfigClass = environmentConfigDialogClass + '-config';
    31  
    32  export type EnvironmentConfigDialogProps = {
    33      environmentName: string;
    34  };
    35  
    36  export const EnvironmentConfigDialog: React.FC<EnvironmentConfigDialogProps> = (props) => {
    37      const environmentName = props.environmentName;
    38      const [params, setParams] = useSearchParams();
    39      const isOpen = (): boolean => getOpenEnvironmentConfigDialog(params) === props.environmentName;
    40      const onClose = useCallback((): void => {
    41          setOpenEnvironmentConfigDialog(params, '');
    42          setParams(params);
    43      }, [params, setParams]);
    44      const [config, setConfig] = useState('');
    45      const [loading, setLoading] = useState(false);
    46      useEffect(() => {
    47          if (getOpenEnvironmentConfigDialog(params) !== environmentName) {
    48              return;
    49          }
    50          setLoading(true);
    51          const result = GetEnvironmentConfigPretty(environmentName);
    52          result
    53              .then((pretty) => {
    54                  setLoading(false);
    55                  setConfig(pretty);
    56              })
    57              .catch((e) => {
    58                  setLoading(false);
    59                  showSnackbarError('Error loading environment configuration.');
    60                  // eslint-disable-next-line no-console
    61                  console.error('error while loading environment config: ' + e);
    62                  setConfig('');
    63              });
    64      }, [environmentName, params]);
    65  
    66      const dialog: JSX.Element | '' = (
    67          <PlainDialog
    68              open={isOpen()}
    69              onClose={onClose}
    70              classNames={environmentConfigDialogClass}
    71              disableBackground={true}
    72              center={true}>
    73              <>
    74                  <div className={environmentConfigDialogAppBarClass}>
    75                      <div className={environmentConfigDialogDataClass}>
    76                          <div className={environmentConfigDialogNameClass}>Environment Config for {environmentName}</div>
    77                      </div>
    78                      <Button onClick={onClose} className={environmentConfigDialogCloseClass} icon={<Close />} />
    79                  </div>
    80                  {loading ? (
    81                      <Spinner message="loading" />
    82                  ) : (
    83                      <pre className={environmentConfigDialogConfigClass}>{config}</pre>
    84                  )}
    85              </>
    86          </PlainDialog>
    87      );
    88      return <div>{dialog}</div>;
    89  };