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

Frontend functionalities for the dai-release backstage plugin

import { DotTypography, DotCheckboxGroup, DotInputText, DotSkeleton } from '@digital-ai/dot-components';
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';

const useStyles = makeStyles((theme) => ({
  "@global": {
    ":root": {
      "--margin-dot": "10.5px"
    },
    ".MuiTypography-root.MuiTypography-body1.MuiFormControlLabel-label": {
      fontSize: "14px"
    },
    ".MuiTypography-subtitle2": {
      fontWeight: "700"
    }
  },
  workflowCatalog: {
    height: "100%",
    width: "100%",
    "& .workflow-drawer-content-left": {
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      height: "100%",
      "& .categories-filter": {
        margin: theme.spacing(0, 0, 2, 0),
        overflowY: "auto"
      },
      "& button": {
        margin: theme.spacing(0),
        width: "100%"
      }
    }
  },
  workflowCategoriesSkeleton: {
    padding: theme.spacing(1, 0),
    "& .workflow-category-checkbox-items": {
      display: "flex",
      flexDirection: "column",
      gap: theme.spacing(2),
      margin: theme.spacing(2.5, 0, 0, 4)
    }
  },
  checkboxSkeletonWrapper: {
    display: "flex",
    justifyContent: "space-between",
    width: "100%",
    "& .checkbox-label-skeleton-wrapper": {
      width: "100%",
      "& .checkbox-label-skeleton": {
        height: theme.spacing(2.25),
        width: "50%"
      }
    },
    "& .checkbox-skeleton": {
      width: theme.spacing(2.25),
      height: theme.spacing(2.25),
      margin: theme.spacing(0, 2, 0, 0)
    }
  }
}));
const cryptoArray = new Uint32Array(1);
const getRandomInt = (min, max) => {
  const minCeiled = Math.ceil(min);
  const maxFloored = Math.floor(max);
  window.crypto.getRandomValues(cryptoArray);
  const randomNumber = cryptoArray[0] / (4294967295 + 1);
  return Math.floor(randomNumber * (maxFloored - minCeiled + 1)) + minCeiled;
};
const CheckboxSkeleton = () => {
  const classes = useStyles();
  return /* @__PURE__ */ React.createElement("div", { className: classes.checkboxSkeletonWrapper }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(DotSkeleton, { className: "checkbox-skeleton", variant: "rectangular" })), /* @__PURE__ */ React.createElement("div", { className: "checkbox-label-skeleton-wrapper" }, /* @__PURE__ */ React.createElement(
    DotSkeleton,
    {
      className: "checkbox-label-skeleton",
      variant: "rectangular"
    }
  )));
};
const WorkflowCategoriesSkeleton = () => {
  const classes = useStyles();
  return /* @__PURE__ */ React.createElement("div", { className: classes.workflowCategoriesSkeleton }, /* @__PURE__ */ React.createElement(CheckboxSkeleton, null), /* @__PURE__ */ React.createElement("div", { className: "workflow-category-checkbox-items" }, [...Array(getRandomInt(1, 7))].map((_, index) => /* @__PURE__ */ React.createElement(CheckboxSkeleton, { key: index }))));
};
function WorkflowCategoryComponent({
  releaseCategories,
  isLoadingCategories,
  onSetWorkflowSearch,
  workflowSearch,
  resetState
}) {
  const classes = useStyles();
  const checkboxOptions = releaseCategories.map((category) => ({
    label: category.title,
    value: category.id,
    checked: workflowSearch?.categories?.includes(category.title)
  }));
  function handleAuthorChange(value) {
    resetState();
    onSetWorkflowSearch({
      ...workflowSearch,
      author: value
    });
  }
  function onCategoryFilterChange(options) {
    resetState();
    const categories = options.map((cat) => cat.label);
    onSetWorkflowSearch({
      ...workflowSearch,
      categories
    });
  }
  return /* @__PURE__ */ React.createElement("div", { className: classes.workflowCatalog }, /* @__PURE__ */ React.createElement("div", { className: "workflow-drawer-content-left" }, /* @__PURE__ */ React.createElement("div", null, releaseCategories.length > 0 && /* @__PURE__ */ React.createElement(
    DotTypography,
    {
      "data-testid": "category-filter-title",
      variant: "subtitle2"
    },
    "Categories"
  ), isLoadingCategories ? /* @__PURE__ */ React.createElement(WorkflowCategoriesSkeleton, null) : releaseCategories.length > 0 && /* @__PURE__ */ React.createElement(
    DotCheckboxGroup,
    {
      className: "categories-filter",
      defaultValues: checkboxOptions.filter(
        (checkboxOption) => checkboxOption.checked
      ),
      onChange: (_event, options) => onCategoryFilterChange(options),
      options: checkboxOptions,
      showSelectAll: true
    }
  ), /* @__PURE__ */ React.createElement(
    DotInputText,
    {
      id: "authored-by",
      label: "Authored By",
      name: "authored-by",
      onChange: (e) => handleAuthorChange(e.target.value),
      persistentLabel: true,
      placeholder: "Start typing to filter Author",
      value: workflowSearch.author
    }
  ))));
}

export { CheckboxSkeleton, WorkflowCategoriesSkeleton, WorkflowCategoryComponent, getRandomInt };
//# sourceMappingURL=WorkflowCategoryComponent.esm.js.map