All files / widgets/CreateNotebookJobForm/AdvancedOptions/EnvironmentVariables EnvironmentVariables.tsx

89.47% Statements 17/19
60% Branches 6/10
33.33% Functions 1/3
89.47% Lines 17/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 1041x 1x   1x 1x   1x 1x 1x 1x 1x   1x                               1x 1x   1x               10x     10x         10x                                                                                                             1x  
import React from 'react';
import InfoIcon from '@mui/icons-material/Info';
import { Scheduler } from '@jupyterlab/scheduler';
import { Button } from '@mui/material';
import Alert from '@mui/material/Alert';
 
import { ErrorIconStyled } from '../../styles';
import { EnvironmentVariable } from './EnvironmentVariable';
import { TextInput } from '../../../../components/textinput';
import { Tooltip } from '../../../../components/tooltip/Tooltip';
import { i18nStrings } from '../../../../constants';
 
import * as Styles from './styles';
 
interface IEnvironmentVariable {
  key: string;
  value: string;
}
 
interface Props {
  isButtonDisabled: boolean;
  allFieldsDisabled: boolean;
  environmentVariables: IEnvironmentVariable[];
  setEnvironmentVariables: (environmentParameters: IEnvironmentVariable[]) => void;
  formErrors: Scheduler.ErrorsType;
  setFormErrors: (errors: Scheduler.ErrorsType) => void;
}
 
const widgetStrings = i18nStrings.ScheduleNoteBook.MainPanel.AdvancedOptions;
const tooltipsStrings = i18nStrings.ScheduleNoteBook.MainPanel.Tooltips;
 
const EnvironmentVariables: React.FunctionComponent<Props> = ({
  allFieldsDisabled,
  isButtonDisabled,
  environmentVariables,
  setEnvironmentVariables,
  formErrors,
  ...rest
}) => {
  const isError = !!formErrors.environmentVariablesError;
 
  const errorMessageWithIcon = (
    <div className={ErrorIconStyled}>
      <Alert severity="error">{formErrors.environmentVariablesError}</Alert>
    </div>
  );
 
  return (
    <div className={Styles.EnvironmentVariablesSection}>
      <div className={Styles.tooltipsContainer}>
        <label className={Styles.InputLabel}>{widgetStrings.environmentVariables}</label>
        {!allFieldsDisabled ? (
          <Tooltip title={tooltipsStrings.EnvironmentVariablesTooltip}>
            <InfoIcon />
          </Tooltip>
        ) : null}
      </div>
 
      {/* if in detail view and there are no env variables */}
      {allFieldsDisabled && environmentVariables.length === 0 ? (
        <div className={Styles.EnvironmentVariableContainer}>
          <TextInput
            InputProps={{ readOnly: true }}
            placeholder={widgetStrings.Placeholders.NoneSelected}
          />
        </div>
      ) : (
        <>
          {environmentVariables.map((_, i) => (
            <EnvironmentVariable
              isDisabled={allFieldsDisabled}
              key={i}
              environmentParameters={environmentVariables}
              setEnvironmentParameters={setEnvironmentVariables}
              index={i}
              formErrors={formErrors}
              {...rest}
            />
          ))}
        </>
      )}
      {isError && <div>{errorMessageWithIcon}</div>}
      {!allFieldsDisabled && (
        <div>
          <Button
            disabled={isButtonDisabled}
            className={Styles.ConfigBtn}
            variant={'contained'}
            color={'primary'}
            size={'small'}
            onClick={() => {
              setEnvironmentVariables([...environmentVariables, { key: '', value: '' }]);
            }}
          >
            {widgetStrings.addEnvironmentvariable}
          </Button>
        </div>
      )}
    </div>
  );
};
 
export { EnvironmentVariables };