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

import React from 'react';
import useAsync from 'react-use/lib/useAsync';
import { TabbedCard, CardTab } from '@backstage/core-components';
import { useServicePageStyles } from './styles.esm.js';
import { useParams, useNavigate } from 'react-router-dom';
import AboutRoute from './aboutRoute/AboutRoute.esm.js';
import '@material-ui/core';
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 '@material-ui/icons/OpenInNew';
import '@material-ui/icons/RemoveRedEye';
import '@material-ui/icons/VisibilityOff';
import '@material-ui/icons/Close';
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 '../shared/HtmlTooltip/HtmlTooltip.esm.js';
import { ButtonComponent } from '../shared/ButtonComponent/ButtonComponent.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 PluginsList from '../PluginsList/PluginsList.esm.js';

const RoutePage = () => {
  const { routeNameOrId } = useParams();
  const navigate = useNavigate();
  const { getRoute, listAllEnabledRoutePlugins, listAssociatedRoutePlugins, allAssociatedRoutePluginsState, associatedRoutePluginsName } = useKongServiceManagerContext();
  const { root, cardTabstyle, backButton } = useServicePageStyles();
  const { error, loading, value: routeDetails } = useAsync(async () => {
    if (routeNameOrId) {
      const data = await getRoute(routeNameOrId);
      return data;
    }
    return null;
  }, [routeNameOrId]);
  const backToRoutesList = () => navigate(-1);
  return /* @__PURE__ */ React.createElement("div", { className: root }, /* @__PURE__ */ React.createElement(ButtonComponent, { classes: backButton, handleClick: backToRoutesList }, "Back to Routes"), /* @__PURE__ */ React.createElement(TabbedCard, { title: "" }, /* @__PURE__ */ React.createElement(CardTab, { label: "About", className: cardTabstyle }, /* @__PURE__ */ React.createElement(
    AboutRoute,
    {
      loading,
      error,
      routeDetails
    }
  )), /* @__PURE__ */ React.createElement(CardTab, { label: "Plugins", className: cardTabstyle }, /* @__PURE__ */ React.createElement(
    PluginsList,
    {
      listAllPlugins: listAllEnabledRoutePlugins,
      listAssociatedPlugins: listAssociatedRoutePlugins,
      associatedPluginsState: allAssociatedRoutePluginsState,
      associatedPluginsName: associatedRoutePluginsName
    }
  ))));
};
var RoutePage$1 = React.memo(RoutePage);

export { RoutePage$1 as default };
//# sourceMappingURL=RoutePage.esm.js.map