@veecode-platform/plugin-kong-service-manager/dist/components/PluginsList/DrawerComponent/DrawerComponent.esm.js

import React from 'react';
import { Drawer, Typography, IconButton, Box, FormControl, FormControlLabel, Checkbox, TextField, Button, CircularProgress } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/Close';
import { Progress } from '@backstage/core-components';
import '@backstage/plugin-catalog-react';
import '@material-ui/lab';
import '../../../context/KongServiceManagerContext.esm.js';
import { useKongServiceManagerContext } from '../../../context/KongServiceManagerProvider.esm.js';
import '@material-ui/core/InputBase';
import '@material-ui/icons/Search';
import '../../shared/SearchBar/styles.esm.js';
import '../../shared/BoxComponent/styles.esm.js';
import 'react-router-dom';
import '@material-ui/icons/OpenInNew';
import '@material-ui/icons/RemoveRedEye';
import '@material-ui/icons/VisibilityOff';
import '@material-ui/icons/Info';
import '@material-ui/icons/ArrowDropDown';
import '@material-ui/icons/ArrowDropUp';
import '@material-ui/icons/AccountCircle';
import '@material-ui/icons/Add';
import '@material-ui/icons/Remove';
import '@material-ui/icons/Undo';
import '../../shared/SelectComponent/Select.esm.js';
import { EmptyStateComponent } from '../../shared/EmptyStateComponent/EmptyStateComponent.esm.js';
import '../../shared/HtmlTooltip/HtmlTooltip.esm.js';
import '../../shared/ButtonComponent/styles.esm.js';
import '../../shared/LoadingComponent/styles.esm.js';
import '../../shared/MissingAnnotation/styles.esm.js';
import '../../shared/Fields/Fields.esm.js';
import '../../shared/SkeletonComponent/styles.esm.js';
import { useDrawerStyles } from './styles.esm.js';
import { IncrementalFields } from './FieldsCustom/incrementalFields/IncrementalFields.esm.js';
import { RecordFields } from './FieldsCustom/recordFields/RecordFields.esm.js';
import { addFields } from './state/fieldsState/actions.esm.js';
import { FieldsReducer, initialFieldsState } from './state/fieldsState/reducer.esm.js';
import { PluginImage } from '@veecode-platform/plugin-kong-service-manager-react';

const DrawerComponent = () => {
  const [isLoading, setLoading] = React.useState(false);
  const [processingData, setProcessingData] = React.useState(false);
  const [fieldsState, fieldsDispatch] = React.useReducer(
    FieldsReducer,
    initialFieldsState
  );
  const {
    paper,
    header,
    titleBar,
    pluginIcon,
    icon,
    content,
    form,
    input,
    checkbox,
    secondaryAction,
    spinner
  } = useDrawerStyles();
  const {
    handleToggleDrawer,
    openDrawer,
    selectedPluginState,
    allAssociatedPluginsState,
    allAssociatedRoutePluginsState,
    setConfigState,
    configState,
    enablePlugin,
    isRoute,
    enablePluginToRoute,
    editPlugin,
    editPluginFromRoute,
    getPluginFields
  } = useKongServiceManagerContext();
  const handleChangeInput = (key, value) => {
    if (value !== "") {
      setConfigState((prevConfigState) => {
        const updatedConfigState = {
          ...prevConfigState,
          [key]: value
        };
        return updatedConfigState;
      });
    }
  };
  const handleEnablePlugin = async () => {
    if (selectedPluginState && allAssociatedPluginsState && configState) {
      setProcessingData(true);
      const config = {
        config: configState,
        name: selectedPluginState.slug
      };
      if (isRoute) await enablePluginToRoute(config);
      else await enablePlugin(config);
      setProcessingData(false);
      handleToggleDrawer();
    }
  };
  const handleEditAction = async () => {
    if (selectedPluginState && selectedPluginState.id && configState) {
      setProcessingData(true);
      const id = selectedPluginState.id;
      const config = {
        config: configState,
        name: selectedPluginState.slug
      };
      if (isRoute) await editPluginFromRoute(id, config);
      else await editPlugin(id, config);
      setProcessingData(false);
      handleToggleDrawer();
    }
  };
  const handlePluginFields = async (pluginName) => {
    const fields = await getPluginFields(pluginName);
    if (fields) {
      let fieldsData = [];
      if (isRoute) {
        if (selectedPluginState?.associated && allAssociatedRoutePluginsState) {
          allAssociatedRoutePluginsState.forEach((plugin) => {
            if (plugin.name === selectedPluginState.slug) {
              const config = plugin.config;
              const updateFields = [];
              fields.forEach((field) => {
                if (config[field.name] !== null) {
                  updateFields.push({
                    ...field,
                    defaultValue: config[field.name]
                  });
                }
              });
              fieldsData = fieldsData.concat(updateFields);
            }
          });
        }
      }
      if (selectedPluginState?.associated && allAssociatedPluginsState) {
        allAssociatedPluginsState.forEach((plugin) => {
          if (plugin.name === selectedPluginState.slug) {
            const config = plugin.config;
            const updateFields = [];
            fields.forEach((field) => {
              if (config[field.name] !== null) {
                updateFields.push({
                  ...field,
                  defaultValue: config[field.name]
                });
              }
            });
            fieldsData = fieldsData.concat(updateFields);
          }
        });
      } else fieldsData = fields;
      let updatedConfigState = { ...configState };
      fieldsData.forEach((f) => {
        if (f.defaultValue !== void 0) {
          updatedConfigState = {
            ...updatedConfigState,
            [f.name]: f.defaultValue
          };
        }
      });
      setConfigState(updatedConfigState);
      fieldsDispatch(addFields(fieldsData));
    }
  };
  React.useEffect(() => {
    if (selectedPluginState) {
      handlePluginFields(selectedPluginState.slug);
    }
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1e3);
  }, [selectedPluginState]);
  return /* @__PURE__ */ React.createElement(
    Drawer,
    {
      classes: {
        paper
      },
      anchor: "right",
      open: openDrawer,
      onClose: handleToggleDrawer
    },
    /* @__PURE__ */ React.createElement("div", { className: header }, /* @__PURE__ */ React.createElement("div", { className: titleBar }, /* @__PURE__ */ React.createElement(
      PluginImage,
      {
        pluginSlug: selectedPluginState?.slug,
        alt: selectedPluginState?.description,
        className: pluginIcon
      }
    ), /* @__PURE__ */ React.createElement(Typography, { variant: "h5" }, selectedPluginState?.name, " Plugin")), /* @__PURE__ */ React.createElement(
      IconButton,
      {
        key: "dismiss",
        title: "Close the drawer",
        onClick: handleToggleDrawer,
        color: "inherit"
      },
      /* @__PURE__ */ React.createElement(CloseIcon, { className: icon })
    )),
    /* @__PURE__ */ React.createElement(Box, { className: content }, isLoading ? /* @__PURE__ */ React.createElement(Progress, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, fieldsState.length >= 1 ? /* @__PURE__ */ React.createElement(
      FormControl,
      {
        component: "form",
        noValidate: true,
        autoComplete: "off",
        className: form
      },
      fieldsState.map((field, index) => {
        switch (field.type) {
          case "string":
            return /* @__PURE__ */ React.createElement(
              TextField,
              {
                id: field.name,
                name: field.name,
                type: field.type,
                required: field.required,
                key: index,
                label: `config.${field.name}`,
                variant: "outlined",
                className: input,
                defaultValue: field.defaultValue,
                onChange: (event) => handleChangeInput(
                  field.name,
                  event?.target.value
                )
              }
            );
          case "number":
            return /* @__PURE__ */ React.createElement(
              TextField,
              {
                id: field.name,
                name: field.name,
                type: field.type,
                required: field.required,
                key: index,
                label: `config.${field.name}`,
                variant: "outlined",
                className: input,
                defaultValue: field.defaultValue,
                onChange: (event) => handleChangeInput(
                  field.name,
                  Number(event?.target.value)
                )
              }
            );
          case "boolean":
            return /* @__PURE__ */ React.createElement(
              FormControlLabel,
              {
                key: index,
                labelPlacement: "end",
                label: `config.${field.name}`,
                control: /* @__PURE__ */ React.createElement(
                  Checkbox,
                  {
                    color: "primary",
                    required: field.required,
                    name: field.name,
                    defaultChecked: field.defaultValue,
                    onChange: (e) => handleChangeInput(
                      field.name,
                      e.target.checked
                    )
                  }
                ),
                className: checkbox
              }
            );
          case "array":
            if (field.arrayType === "string")
              return /* @__PURE__ */ React.createElement(
                IncrementalFields,
                {
                  key: index,
                  name: field.name,
                  required: field.required,
                  items: (field.defaultValue ? field.defaultValue : field.defaultValues) ?? [],
                  setState: setConfigState
                }
              );
            if (field.arrayType === "record")
              return /* @__PURE__ */ React.createElement(
                RecordFields,
                {
                  inputName: field.name,
                  required: field.required,
                  defaultValues: field.defaultValue,
                  recordFields: field.recordFields,
                  key: index,
                  setConfig: setConfigState
                }
              );
            return /* @__PURE__ */ React.createElement(React.Fragment, null);
          default:
            return /* @__PURE__ */ React.createElement(React.Fragment, null);
        }
      })
    ) : /* @__PURE__ */ React.createElement(EmptyStateComponent, null))),
    /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(React.Fragment, null, selectedPluginState && selectedPluginState.associated ? /* @__PURE__ */ React.createElement(
      Button,
      {
        variant: "contained",
        color: "primary",
        onClick: handleEditAction,
        disabled: processingData
      },
      processingData ? /* @__PURE__ */ React.createElement(React.Fragment, null, "Saving...", /* @__PURE__ */ React.createElement(CircularProgress, { className: spinner, size: 20 })) : /* @__PURE__ */ React.createElement(React.Fragment, null, "Save Changes")
    ) : /* @__PURE__ */ React.createElement(
      Button,
      {
        variant: "contained",
        color: "primary",
        onClick: handleEnablePlugin,
        disabled: processingData
      },
      processingData ? /* @__PURE__ */ React.createElement(React.Fragment, null, "Installing...", /* @__PURE__ */ React.createElement(CircularProgress, { className: spinner, size: 20 })) : /* @__PURE__ */ React.createElement(React.Fragment, null, "Install Plugin")
    )), /* @__PURE__ */ React.createElement(
      Button,
      {
        className: secondaryAction,
        variant: "outlined",
        color: "primary",
        onClick: handleToggleDrawer
      },
      "Cancel"
    ))
  );
};

export { DrawerComponent };
//# sourceMappingURL=DrawerComponent.esm.js.map