@digital-ai/plugin-dai-release/dist/components/WorkflowComponent/WorkflowComponent.esm.js

Frontend functionalities for the dai-release backstage plugin

import { Page, Header, Content } from '@backstage/core-components';
import { DotThemeProvider, CssGrid, CssCell } from '@digital-ai/dot-components';
import { makeStyles, Grid } from '@material-ui/core';
import React, { useState } from 'react';
import { useApi, appThemeApiRef } from '@backstage/core-plugin-api';
import { ReleaseResponseErrorPanel } from '../ReleaseResponseErrorPanel/ReleaseResponseErrorPanel.esm.js';
import { SearchHeaderComponent } from '../SearchHeaderComponent/SearchHeaderComponent.esm.js';
import { WorkflowCatalogComponent } from '../WorkflowCatalogComponent/WorkflowCatalogComponent.esm.js';
import '../WorkflowCatalogComponent/WorkflowCardComponent.esm.js';
import { WorkflowCategoryComponent } from '../WorkflowCategoryComponent/WorkflowCategoryComponent.esm.js';
import releaseLogoWhite from '../../assets/releaseLogoWhite.png';
import { useObservable } from 'react-use';
import { useReleaseCategories } from '../../hooks/useReleaseCategories.esm.js';
import { useWorkflowCatalog } from '../../hooks/useWorkflowCatalog.esm.js';

const useStyles = makeStyles(() => ({
  logoStyle: {
    width: "300px"
  },
  layoutSec: {
    paddingTop: "0"
  },
  workflowHeaderSec: {
    flexWrap: "nowrap"
  },
  horizontalBar: {
    width: "100%",
    height: "0.5px",
    backgroundColor: "#e3e5e8",
    // or any color you prefer
    color: "#e3e5e8"
  },
  workflowDrawerContentLeftCells: {
    justifyContent: "flex-start !important",
    padding: "0px 16px 0px 16px"
  },
  workflowCatalogContentCell: {
    justifyContent: "flex-start !important"
  }
}));
const WorkflowComponent = () => {
  const classes = useStyles();
  const appThemeApi = useApi(appThemeApiRef);
  const themeId = useObservable(
    appThemeApi.activeThemeId$(),
    appThemeApi.getActiveThemeId()
  );
  const backstageTheme = themeId === "dark" ? "dark" : "light";
  const [loadingReleaseCategories, setLoadingReleaseCategories] = useState(true);
  const [releaseCategories, setReleaseCategories] = useState([]);
  const {
    data,
    error,
    instance,
    instanceList,
    loading,
    hasMore,
    searchInput,
    setSearchInput,
    workflowSearch,
    setWorkflowSearch,
    setLoading,
    setHasMore,
    setData,
    setPage,
    setInstance
  } = useWorkflowCatalog();
  useReleaseCategories(
    instance,
    setReleaseCategories,
    setLoadingReleaseCategories
  );
  const [customSearchQuery, setCustomSearchQuery] = useState("");
  const loadMoreData = async () => {
    if (loading || !hasMore) return;
    setLoading(true);
    setPage((prevPage) => prevPage + 1);
  };
  const resetState = () => {
    setData([]);
    setHasMore(true);
    setLoading(true);
  };
  const filteredData = customSearchQuery ? data.filter(
    (row) => ["title", "description"].some(
      (key) => row[key]?.toString().toLowerCase().includes(customSearchQuery?.toLowerCase())
    )
  ) : data;
  const handleCustomSearchChange = (customSearchStr) => {
    setCustomSearchQuery(customSearchStr);
  };
  return /* @__PURE__ */ React.createElement(DotThemeProvider, { theme: backstageTheme }, /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(
    Header,
    {
      title: /* @__PURE__ */ React.createElement(
        "img",
        {
          src: releaseLogoWhite,
          alt: "Release logo",
          className: classes.logoStyle
        }
      ),
      pageTitleOverride: "Digital.ai Release"
    }
  ), /* @__PURE__ */ React.createElement(Content, { className: classes.layoutSec }, /* @__PURE__ */ React.createElement(
    Grid,
    {
      container: true,
      spacing: 1,
      direction: "column",
      className: classes.workflowHeaderSec
    },
    /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
      SearchHeaderComponent,
      {
        displayFilterIcon: false,
        displayTableSearchFilter: true,
        titleName: "Workflow catalog",
        instance,
        instanceList,
        customSearch: customSearchQuery,
        onCustomSearch: handleCustomSearchChange,
        error,
        onSetInstance: setInstance,
        resetState,
        onSetWorkflowSearch: setWorkflowSearch
      }
    ))
  ), /* @__PURE__ */ React.createElement("div", { className: classes.horizontalBar }), error && !loading ? /* @__PURE__ */ React.createElement(ReleaseResponseErrorPanel, { error }) : /* @__PURE__ */ React.createElement("div", { style: { paddingTop: "12px" } }, /* @__PURE__ */ React.createElement(CssGrid, { className: "workflow-catalog" }, /* @__PURE__ */ React.createElement(
    CssCell,
    {
      center: false,
      className: classes.workflowDrawerContentLeftCells,
      lg: { start: 1, span: 4 },
      md: { start: 1, span: 6 },
      sm: { start: 1, span: 12 },
      xl: { start: 1, span: 4 },
      xxl: { start: 1, span: 3 }
    },
    /* @__PURE__ */ React.createElement("div", { className: "workflow-drawer-content-left" }, /* @__PURE__ */ React.createElement(
      WorkflowCategoryComponent,
      {
        releaseCategories,
        isLoadingCategories: loadingReleaseCategories,
        instance,
        onSetWorkflowSearch: setWorkflowSearch,
        workflowSearch,
        resetState
      }
    ))
  ), /* @__PURE__ */ React.createElement(
    CssCell,
    {
      center: false,
      className: classes.workflowCatalogContentCell,
      lg: { start: 5, span: 10 },
      md: { start: 7, span: 10 },
      sm: { start: 1, span: 12 },
      xl: { start: 5, span: 8 },
      xs: { start: 1, span: 12 },
      xxl: { start: 4, span: 9 }
    },
    /* @__PURE__ */ React.createElement("div", { className: "workflow-cards" }, /* @__PURE__ */ React.createElement(
      WorkflowCatalogComponent,
      {
        loading,
        loadMoreData,
        data: filteredData,
        searchInput,
        onSearchInput: setSearchInput,
        resetState,
        instance,
        backstageTheme
      }
    ))
  ))))));
};

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