@veecode-platform/plugin-kong-service-manager
Version:
174 lines (171 loc) • 8.44 kB
JavaScript
import React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import { usePluginsTableStyles, StyledTableCell, StyledTableRow } from './styles.esm.js';
import TableFooter from '@mui/material/TableFooter';
import '../../../../context/KongServiceManagerContext.esm.js';
import { useKongServiceManagerContext } from '../../../../context/KongServiceManagerProvider.esm.js';
import { addPluginsToList, updatePluginFromList } from './state/pluginsSpecListState/actions.esm.js';
import { PluginsSpecListReducer, initialPluginsSpecListState } from './state/pluginsSpecListState/reducer.esm.js';
import useAsync from 'react-use/esm/useAsync';
import { addPluginsToSpec } from '../../../../context/state/pluginsToSpecState/actions.esm.js';
import { kongUpdateSpecPermission } from '@veecode-platform/backstage-plugin-kong-service-manager-common';
import '@material-ui/core';
import '@backstage/core-components';
import '@backstage/plugin-catalog-react';
import '@material-ui/lab';
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 { CircleInfoIcon, RemoveIcon, AddIcon } from '../../../shared/icons/Icons.esm.js';
import '../../../shared/SelectComponent/Select.esm.js';
import '../../../shared/HtmlTooltip/HtmlTooltip.esm.js';
import { ButtonComponent } from '../../../shared/ButtonComponent/ButtonComponent.esm.js';
import { LoadingComponent } from '../../../shared/LoadingComponent/LoadingComponent.esm.js';
import '../../../shared/MissingAnnotation/styles.esm.js';
import '../../../shared/Fields/Fields.esm.js';
import '../../../shared/SkeletonComponent/styles.esm.js';
import { PullRequestModal } from '../../PullRequesModal/PullRequestModal.esm.js';
import { usePermission } from '@backstage/plugin-permission-react';
import { PluginImage } from '@veecode-platform/plugin-kong-service-manager-react';
const createData = (name, slug, description, config, enableToSpec) => {
return { name, slug, description, config, enableToSpec };
};
const PluginsTableComponent = (props) => {
const [pluginsSpecListState, pluginsSpecListDispatch] = React.useReducer(
PluginsSpecListReducer,
initialPluginsSpecListState
);
const [showModal, setShowModal] = React.useState(false);
const [hasChange, setHasChange] = React.useState(false);
const { specName, route } = props;
const {
root,
iconAndName,
apply,
remove,
submit,
noPluginsInfo,
footer,
fixedToBottom
} = usePluginsTableStyles();
const {
pluginsToSpecState,
pluginsToSpecDispatch,
listAllServicePluginsForSpec,
listAllRoutePluginsForSpec
} = useKongServiceManagerContext();
const { loading: loadingUpdateSpecPermission, allowed: canUpdateSpec } = usePermission({
permission: kongUpdateSpecPermission
});
const handleAction = (pluginName) => {
const plugin = pluginsSpecListState.filter((p) => p.name === pluginName)[0];
pluginsSpecListDispatch(
updatePluginFromList({
name: plugin.name,
slug: plugin.slug,
description: plugin.description,
config: plugin.config,
enabledToSpec: !plugin.enabledToSpec
})
);
};
const fetchData = async () => {
let data = [];
if (route)
data = await listAllRoutePluginsForSpec(
route.path,
route.method.toLowerCase()
);
else data = await listAllServicePluginsForSpec();
return data;
};
const { loading, value: allPlugins } = useAsync(fetchData, [specName]);
const rows = pluginsSpecListState && pluginsSpecListState.length > 0 ? pluginsSpecListState.map(
(plugin) => createData(
plugin.name,
plugin.slug,
plugin.description,
plugin.config,
plugin.enabledToSpec
)
) : [];
const handleToggleModal = () => setShowModal(!showModal);
const handleApplyChanges = () => handleToggleModal();
const checkChanges = () => {
if (allPlugins && pluginsToSpecState) {
const enabledPlugins = allPlugins.filter((p) => p.enabledToSpec);
if (enabledPlugins.length !== pluginsToSpecState.length) return true;
const hasDifference = enabledPlugins.some(
(plugin) => !pluginsToSpecState.some(
(p) => p.name === plugin.slug && p.enabled === plugin.enabledToSpec
)
);
return hasDifference;
}
return false;
};
React.useEffect(() => {
if (allPlugins) {
pluginsSpecListDispatch(addPluginsToList(allPlugins));
}
}, [allPlugins]);
React.useEffect(() => {
if (pluginsSpecListState && pluginsSpecListState.length > 0) {
const pluginsListToSpec = [];
pluginsSpecListState.map((plugin) => {
if (plugin.enabledToSpec) {
pluginsListToSpec.push({
name: plugin.slug,
// the slug as name
enabled: plugin.enabledToSpec,
config: plugin.config
});
}
});
pluginsToSpecDispatch(addPluginsToSpec(pluginsListToSpec));
}
}, [pluginsSpecListState]);
React.useEffect(() => {
const changes = checkChanges();
setHasChange(changes);
}, [allPlugins, pluginsToSpecState]);
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableContainer, { className: root }, /* @__PURE__ */ React.createElement(Table, { sx: { minWidth: 700 }, "aria-label": "plugins table" }, /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(StyledTableCell, null, "Plugin"), /* @__PURE__ */ React.createElement(StyledTableCell, { align: "center" }, "Description"), /* @__PURE__ */ React.createElement(StyledTableCell, { align: "center" }, "Action"))), /* @__PURE__ */ React.createElement(TableBody, null, loading ? /* @__PURE__ */ React.createElement(LoadingComponent, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, rows.length <= 0 ? /* @__PURE__ */ React.createElement(StyledTableRow, null, /* @__PURE__ */ React.createElement(StyledTableCell, { component: "th", scope: "row", colSpan: 3 }, /* @__PURE__ */ React.createElement("div", { className: noPluginsInfo }, " ", /* @__PURE__ */ React.createElement(CircleInfoIcon, null), " No associated plugins"))) : rows.map((row) => /* @__PURE__ */ React.createElement(StyledTableRow, { key: row.name }, /* @__PURE__ */ React.createElement(StyledTableCell, { component: "th", scope: "row" }, /* @__PURE__ */ React.createElement("div", { className: iconAndName }, " ", /* @__PURE__ */ React.createElement(PluginImage, { pluginSlug: row.slug }), " ", row.name)), /* @__PURE__ */ React.createElement(StyledTableCell, { align: "center" }, row.description), /* @__PURE__ */ React.createElement(StyledTableCell, { align: "center" }, !loadingUpdateSpecPermission && /* @__PURE__ */ React.createElement(
ButtonComponent,
{
handleClick: () => handleAction(row.name),
isDisabled: !canUpdateSpec,
classes: row.enableToSpec ? remove : apply
},
row.enableToSpec ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RemoveIcon, null), " Remove from Spec") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AddIcon, null), " Apply to Spec")
)))))), rows.length > 0 && /* @__PURE__ */ React.createElement(
TableFooter,
{
className: `${footer} ${rows.length <= 3 && fixedToBottom}`
},
/* @__PURE__ */ React.createElement(StyledTableRow, null, /* @__PURE__ */ React.createElement(StyledTableCell, { colSpan: 3, align: "center", className: footer }, !loadingUpdateSpecPermission && /* @__PURE__ */ React.createElement(
ButtonComponent,
{
isDisabled: !hasChange && !canUpdateSpec,
classes: submit,
handleClick: handleApplyChanges
},
"Apply"
)))
))), showModal && /* @__PURE__ */ React.createElement(
PullRequestModal,
{
specName,
show: showModal,
handleCloseModal: handleToggleModal,
route
}
));
};
export { PluginsTableComponent };
//# sourceMappingURL=PluginsTableComponent.esm.js.map