@backstage-community/plugin-bazaar 0.2.27 → 0.2.29

package/dist/index.esm.js

@@ -1,1750 +1,6 @@
-import { createRouteRef, createApiRef, createPlugin, createApiFactory, identityApiRef, discoveryApiRef, fetchApiRef, createRoutableExtension, useApi, alertApiRef, useElementFilter, useRouteRef } from '@backstage/core-plugin-api';
-import { stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
-import { ResponseError } from '@backstage/errors';
-import React, { useState, useEffect } from 'react';
-import { StatusWarning, StatusOK, Avatar, Link, HeaderIconLinkRow, ItemCardHeader, ErrorPanel, InfoCard, Content, SupportButton } from '@backstage/core-components';
-import Card from '@material-ui/core/Card';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardContent from '@material-ui/core/CardContent';
-import Dialog from '@material-ui/core/Dialog';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
-import { DateTime } from 'luxon';
-import CardHeader from '@material-ui/core/CardHeader';
-import Divider from '@material-ui/core/Divider';
-import IconButton from '@material-ui/core/IconButton';
-import EditIcon from '@material-ui/icons/Edit';
-import ChatIcon from '@material-ui/icons/Chat';
-import PersonAddIcon from '@material-ui/icons/PersonAdd';
-import InsertLinkIcon from '@material-ui/icons/InsertLink';
-import DashboardIcon from '@material-ui/icons/Dashboard';
-import CloseIcon from '@material-ui/icons/Close';
-import LinkOffIcon from '@material-ui/icons/LinkOff';
-import Description from '@material-ui/icons/Description';
-import Button from '@material-ui/core/Button';
-import { Controller, useForm } from 'react-hook-form';
-import TextField from '@material-ui/core/TextField';
-import InputLabel from '@material-ui/core/InputLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import { KeyboardDatePicker } from '@material-ui/pickers/DatePicker';
-import MuiPickersUtilsProvider from '@material-ui/pickers/MuiPickersUtilsProvider';
-import LuxonUtils from '@date-io/luxon';
-import ClearIcon from '@material-ui/icons/Clear';
-import MuiDialogTitle from '@material-ui/core/DialogTitle';
-import MuiDialogContent from '@material-ui/core/DialogContent';
-import MuiDialogActions from '@material-ui/core/DialogActions';
-import ExitToAppIcon from '@material-ui/icons/ExitToApp';
-import Alert from '@material-ui/lab/Alert';
-import useAsyncFn from 'react-use/esm/useAsyncFn';
-import { entityRouteRef, catalogApiRef, useEntity } from '@backstage/plugin-catalog-react';
-import Grid from '@material-ui/core/Grid';
-import makeStyles$1 from '@material-ui/core/styles/makeStyles';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import Box from '@material-ui/core/Box';
-import TablePagination from '@material-ui/core/TablePagination';
-import StorefrontIcon from '@material-ui/icons/Storefront';
-import SearchBar from 'material-ui-search-bar';
-
-const rootRouteRef = createRouteRef({
-  id: "bazaar"
-});
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-const bazaarApiRef = createApiRef({
-  id: "bazaar"
-});
-const isBazaarAvailable = async (entity, context) => {
-  const bazaarClient = context.apis.get(bazaarApiRef);
-  if (bazaarClient === void 0) {
-    return false;
-  }
-  const entityRef = stringifyEntityRef({
-    kind: entity.kind,
-    name: entity.metadata.name,
-    namespace: entity.metadata.namespace
-  });
-  const response = await bazaarClient.getProjectByRef(entityRef);
-  const project = await response.json();
-  return project.data.length > 0;
-};
-class BazaarClient {
-  constructor(options) {
-    __publicField(this, "identityApi");
-    __publicField(this, "discoveryApi");
-    __publicField(this, "fetchApi");
-    this.identityApi = options.identityApi;
-    this.discoveryApi = options.discoveryApi;
-    this.fetchApi = options.fetchApi;
-  }
-  async updateProject(bazaarProject) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    return await this.fetchApi.fetch(`${baseUrl}/projects`, {
-      method: "PUT",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(bazaarProject)
-    }).then((resp) => resp.json());
-  }
-  async addProject(bazaarProject) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    return await this.fetchApi.fetch(`${baseUrl}/projects`, {
-      method: "POST",
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(bazaarProject)
-    }).then((resp) => resp.json());
-  }
-  async getProjectById(id) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    const response = await this.fetchApi.fetch(
-      `${baseUrl}/projects/${encodeURIComponent(id)}`
-    );
-    return response.ok ? response : null;
-  }
-  async getProjectByRef(entityRef) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    const response = await this.fetchApi.fetch(
-      `${baseUrl}/projects/${encodeURIComponent(entityRef)}`
-    );
-    return response.ok ? response : null;
-  }
-  async getMembers(id) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    return await this.fetchApi.fetch(`${baseUrl}/projects/${encodeURIComponent(id)}/members`).then((resp) => resp.json());
-  }
-  async addMember(id, userId) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    const { picture } = await this.identityApi.getProfileInfo();
-    await this.fetchApi.fetch(
-      `${baseUrl}/projects/${encodeURIComponent(
-        id
-      )}/member/${encodeURIComponent(userId)}`,
-      {
-        method: "PUT",
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({ picture })
-      }
-    );
-  }
-  async deleteMember(id, userId) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    await this.fetchApi.fetch(
-      `${baseUrl}/projects/${encodeURIComponent(
-        id
-      )}/member/${encodeURIComponent(userId)}`,
-      { method: "DELETE" }
-    );
-  }
-  async getProjects(limit, order) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    const params = {
-      ...limit ? { limit: limit.toString() } : {},
-      ...order ? { order } : {}
-    };
-    const query = new URLSearchParams(params);
-    const url = `projects?${query.toString()}`;
-    const data = await this.fetchApi.fetch(`${baseUrl}/${url}`);
-    if (!data.ok) {
-      throw await ResponseError.fromResponse(data);
-    }
-    return data.json();
-  }
-  async deleteProject(id) {
-    const baseUrl = await this.discoveryApi.getBaseUrl("bazaar");
-    await this.fetchApi.fetch(`${baseUrl}/projects/${encodeURIComponent(id)}`, {
-      method: "DELETE"
-    });
-  }
-}
-
-const bazaarPlugin = createPlugin({
-  id: "bazaar",
-  routes: {
-    root: rootRouteRef
-  },
-  apis: [
-    createApiFactory({
-      api: bazaarApiRef,
-      deps: {
-        identityApi: identityApiRef,
-        discoveryApi: discoveryApiRef,
-        fetchApi: fetchApiRef
-      },
-      factory: ({ identityApi, discoveryApi, fetchApi }) => new BazaarClient({ identityApi, discoveryApi, fetchApi })
-    })
-  ]
-});
-const BazaarPage = bazaarPlugin.provide(
-  createRoutableExtension({
-    name: "BazaarPage",
-    component: () => import('./esm/index-CM8Pdxty.esm.js').then((m) => m.HomePage),
-    mountPoint: rootRouteRef
-  })
-);
-
-const statuses = {
-  proposed: /* @__PURE__ */ React.createElement(StatusWarning, null, "proposed"),
-  ongoing: /* @__PURE__ */ React.createElement(StatusOK, null, "ongoing")
-};
-const StatusTag = ({ status, styles }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: styles }, statuses[status]);
-};
-
-const InputField = ({
-  inputType,
-  error,
-  control,
-  helperText,
-  placeholder,
-  rules
-}) => {
-  const label = inputType.charAt(0).toLocaleUpperCase("en-US") + inputType.slice(1);
-  return /* @__PURE__ */ React.createElement(
-    Controller,
-    {
-      name: inputType,
-      control,
-      rules,
-      render: ({ field }) => /* @__PURE__ */ React.createElement(
-        TextField,
-        {
-          ...field,
-          required: rules == null ? void 0 : rules.required,
-          margin: "dense",
-          multiline: true,
-          id: "title",
-          type: "text",
-          fullWidth: true,
-          label,
-          placeholder,
-          error: !!error,
-          helperText: error && helperText
-        }
-      )
-    }
-  );
-};
-
-const InputSelector = ({ name, options, control, error }) => {
-  const label = name.charAt(0).toLocaleUpperCase("en-US") + name.slice(1);
-  return /* @__PURE__ */ React.createElement(
-    Controller,
-    {
-      name,
-      control,
-      rules: {
-        required: true
-      },
-      render: ({ field }) => /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true }, /* @__PURE__ */ React.createElement(
-        InputLabel,
-        {
-          required: true,
-          htmlFor: "demo-simple-select-outlined",
-          id: "demo-simple-select-outlined-label",
-          style: {
-            marginTop: "0.25rem"
-          }
-        },
-        label
-      ), /* @__PURE__ */ React.createElement(
-        Select,
-        {
-          ...field,
-          labelId: "demo-simple-select-outlined-label",
-          id: "demo-simple-select-outlined",
-          label,
-          error: !!error
-        },
-        options.map((option) => {
-          return /* @__PURE__ */ React.createElement(MenuItem, { key: option, value: option }, option);
-        })
-      ))
-    }
-  );
-};
-
-const DateSelector = ({ name, control, setValue }) => {
-  const label = `${name.charAt(0).toLocaleUpperCase("en-US") + name.slice(1, name.indexOf("D"))} date`;
-  return /* @__PURE__ */ React.createElement(
-    Controller,
-    {
-      name,
-      control,
-      render: ({ field }) => /* @__PURE__ */ React.createElement(FormControl, null, /* @__PURE__ */ React.createElement(MuiPickersUtilsProvider, { utils: LuxonUtils }, /* @__PURE__ */ React.createElement(
-        KeyboardDatePicker,
-        {
-          disableToolbar: true,
-          format: "dd-MM-yyyy",
-          label,
-          value: field.value,
-          onChange: (date) => {
-            setValue(name, date == null ? void 0 : date.toISO());
-          },
-          InputProps: {
-            endAdornment: /* @__PURE__ */ React.createElement(IconButton, { onClick: () => setValue(name, null) }, /* @__PURE__ */ React.createElement(ClearIcon, null))
-          },
-          InputAdornmentProps: {
-            position: "start"
-          }
-        }
-      )))
-    }
-  );
-};
-
-const useStyles$b = makeStyles({
-  container: {
-    marginTop: "0.25rem",
-    textAlign: "center",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between"
-  },
-  startDate: {
-    float: "left"
-  },
-  endDate: {
-    float: "right"
-  },
-  dash: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    fontSize: "1.5rem",
-    margin: "0 1rem"
-  }
-});
-const DoubleDateSelector = ({ control, setValue }) => {
-  const classes = useStyles$b();
-  return /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement("div", { className: classes.startDate }, /* @__PURE__ */ React.createElement(DateSelector, { name: "startDate", control, setValue })), /* @__PURE__ */ React.createElement(Typography, { className: classes.dash }, "-"), /* @__PURE__ */ React.createElement("div", { className: classes.endDate }, /* @__PURE__ */ React.createElement(DateSelector, { name: "endDate", control, setValue })));
-};
-
-const styles = (theme) => createStyles({
-  root: {
-    margin: 0,
-    padding: theme.spacing(2)
-  },
-  closeButton: {
-    position: "absolute",
-    right: theme.spacing(1),
-    top: theme.spacing(1),
-    color: theme.palette.grey[500]
-  }
-});
-const DialogContent = withStyles((theme) => ({
-  root: {
-    padding: theme.spacing(2)
-  }
-}))(MuiDialogContent);
-const DialogActions = withStyles((theme) => ({
-  root: {
-    margin: 0,
-    padding: theme.spacing(1)
-  }
-}))(MuiDialogActions);
-const CustomDialogTitle = withStyles(styles)(
-  (props) => {
-    const { children, classes, onClose, ...other } = props;
-    return /* @__PURE__ */ React.createElement(MuiDialogTitle, { disableTypography: true, className: classes.root, ...other }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, children), onClose ? /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        "aria-label": "close",
-        className: classes.closeButton,
-        onClick: onClose
-      },
-      /* @__PURE__ */ React.createElement(CloseIcon, null)
-    ) : null);
-  }
-);
-
-const ProjectDialog = ({
-  handleSave,
-  isAddForm,
-  title,
-  defaultValues,
-  open,
-  projectSelector,
-  deleteButton,
-  handleClose
-}) => {
-  const {
-    handleSubmit,
-    reset,
-    control,
-    getValues,
-    formState: { errors },
-    setValue
-  } = useForm({
-    mode: "onChange",
-    defaultValues
-  });
-  const handleSaveForm = () => {
-    handleSave(getValues, reset);
-  };
-  const handleCloseDialog = () => {
-    handleClose();
-    reset(defaultValues);
-  };
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    Dialog,
-    {
-      fullWidth: true,
-      maxWidth: "xs",
-      onClose: handleCloseDialog,
-      "aria-labelledby": "customized-dialog-title",
-      open
-    },
-    /* @__PURE__ */ React.createElement(
-      CustomDialogTitle,
-      {
-        id: "customized-dialog-title",
-        onClose: handleCloseDialog
-      },
-      title
-    ),
-    /* @__PURE__ */ React.createElement(DialogContent, { style: { padding: "1rem", paddingTop: "0rem" }, dividers: true }, /* @__PURE__ */ React.createElement(
-      InputField,
-      {
-        error: errors.title,
-        control,
-        rules: {
-          required: true
-        },
-        inputType: "title",
-        helperText: "Please enter a title for your project"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      InputField,
-      {
-        error: errors.description,
-        control,
-        rules: {
-          required: true
-        },
-        inputType: "description",
-        helperText: "Please enter a description"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      InputSelector,
-      {
-        control,
-        name: "status",
-        options: ["proposed", "ongoing"]
-      }
-    ), /* @__PURE__ */ React.createElement(
-      InputSelector,
-      {
-        control,
-        name: "size",
-        options: ["small", "medium", "large"]
-      }
-    ), /* @__PURE__ */ React.createElement(
-      InputField,
-      {
-        error: errors.responsible,
-        control,
-        rules: {
-          required: true
-        },
-        inputType: "responsible",
-        helperText: "Please enter a contact person",
-        placeholder: "Contact person of the project"
-      }
-    ), isAddForm && projectSelector, /* @__PURE__ */ React.createElement(
-      InputField,
-      {
-        error: errors.community,
-        control,
-        rules: {
-          required: false,
-          pattern: RegExp("^(https?)://")
-        },
-        inputType: "community",
-        helperText: "Please enter a link starting with http/https",
-        placeholder: "Community link to e.g. Teams or Discord"
-      }
-    ), /* @__PURE__ */ React.createElement(
-      InputField,
-      {
-        error: errors.docs,
-        control,
-        rules: {
-          required: false,
-          pattern: RegExp("^(https?)://")
-        },
-        inputType: "docs",
-        helperText: "Please enter a link starting with http/https",
-        placeholder: "Project docs link"
-      }
-    ), /* @__PURE__ */ React.createElement(DoubleDateSelector, { setValue, control })),
-    /* @__PURE__ */ React.createElement(DialogActions, null, !isAddForm && deleteButton, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        onClick: handleSubmit(handleSaveForm),
-        color: "primary",
-        type: "submit"
-      },
-      "Submit"
-    ))
-  ));
-};
-
-const ConfirmationDialog = ({
-  open,
-  handleClose,
-  message,
-  type,
-  handleSubmit
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    Dialog,
-    {
-      fullWidth: true,
-      maxWidth: "xs",
-      onClose: handleClose,
-      "aria-labelledby": "customized-dialog-title",
-      open
-    },
-    /* @__PURE__ */ React.createElement(CustomDialogTitle, { id: "customized-dialog-title", onClose: handleClose }, type.charAt(0).toLocaleUpperCase("en-US") + type.slice(1), " project"),
-    /* @__PURE__ */ React.createElement(DialogContent, { dividers: true }, message),
-    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: handleSubmit, color: "primary", type: "submit" }, type))
-  );
-};
-
-const useStyles$a = makeStyles({
-  button: {
-    marginLeft: "0",
-    marginRight: "auto"
-  },
-  wordBreak: {
-    wordBreak: "break-all",
-    whiteSpace: "normal",
-    margin: "-0.25rem 0"
-  }
-});
-const EditProjectDialog = ({
-  bazaarProject,
-  openEdit,
-  handleEditClose,
-  handleCardClose,
-  fetchBazaarProject
-}) => {
-  var _a, _b;
-  const classes = useStyles$a();
-  const bazaarApi = useApi(bazaarApiRef);
-  const alertApi = useApi(alertApiRef);
-  const [openDelete, setOpenDelete] = useState(false);
-  const [defaultValues, setDefaultValues] = useState({
-    ...bazaarProject,
-    startDate: (_a = bazaarProject.startDate) != null ? _a : null,
-    endDate: (_b = bazaarProject.endDate) != null ? _b : null
-  });
-  const handleDeleteClose = () => {
-    setOpenDelete(false);
-    handleEditClose();
-    if (handleCardClose)
-      handleCardClose();
-  };
-  const handleDeleteSubmit = async () => {
-    await bazaarApi.deleteProject(bazaarProject.id);
-    handleDeleteClose();
-    fetchBazaarProject();
-    alertApi.post({
-      message: `Deleted project '${bazaarProject.title}' from the Bazaar list`,
-      severity: "success",
-      display: "transient"
-    });
-  };
-  useEffect(() => {
-    var _a2, _b2;
-    setDefaultValues({
-      ...bazaarProject,
-      startDate: (_a2 = bazaarProject.startDate) != null ? _a2 : null,
-      endDate: (_b2 = bazaarProject.endDate) != null ? _b2 : null
-    });
-  }, [bazaarProject]);
-  const handleEditSubmit = async (getValues) => {
-    var _a2, _b2;
-    const formValues = getValues();
-    const updateResponse = await bazaarApi.updateProject({
-      ...formValues,
-      id: bazaarProject.id,
-      entityRef: bazaarProject.entityRef,
-      membersCount: bazaarProject.membersCount,
-      startDate: (_a2 = formValues == null ? void 0 : formValues.startDate) != null ? _a2 : null,
-      endDate: (_b2 = formValues == null ? void 0 : formValues.endDate) != null ? _b2 : null
-    });
-    if (updateResponse.status === "ok")
-      fetchBazaarProject();
-    handleEditClose();
-    alertApi.post({
-      message: `Updated project '${formValues.title}' in the Bazaar list`,
-      severity: "success",
-      display: "transient"
-    });
-  };
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    ConfirmationDialog,
-    {
-      open: openDelete,
-      handleClose: handleDeleteClose,
-      message: [
-        "Are you sure you want to delete ",
-        /* @__PURE__ */ React.createElement("b", { key: bazaarProject.id, className: classes.wordBreak }, bazaarProject.title),
-        " from the Bazaar?"
-      ],
-      type: "delete",
-      handleSubmit: handleDeleteSubmit
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ProjectDialog,
-    {
-      title: "Edit project",
-      handleSave: handleEditSubmit,
-      isAddForm: false,
-      defaultValues,
-      open: openEdit,
-      handleClose: handleEditClose,
-      deleteButton: /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          color: "primary",
-          type: "submit",
-          className: classes.button,
-          onClick: () => {
-            setOpenDelete(true);
-          }
-        },
-        "Delete project"
-      )
-    }
-  ));
-};
-
-const useStyles$9 = makeStyles((theme) => ({
-  value: {
-    fontWeight: "bold",
-    overflow: "hidden",
-    lineHeight: "24px",
-    wordBreak: "break-word"
-  },
-  label: {
-    color: theme.palette.text.secondary,
-    textTransform: "uppercase",
-    fontSize: "10px",
-    fontWeight: "bold",
-    letterSpacing: 0.5,
-    overflow: "hidden",
-    whiteSpace: "nowrap"
-  }
-}));
-function AboutField(props) {
-  const { label, value, gridSizes, children } = props;
-  const classes = useStyles$9();
-  const childElements = useElementFilter(children, (c) => c.getElements());
-  const content = childElements.length > 0 ? childElements : /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.value }, value || `unknown`);
-  return /* @__PURE__ */ React.createElement(Grid, { item: true, ...gridSizes }, /* @__PURE__ */ React.createElement(Typography, { variant: "h2", className: classes.label }, label), content);
-}
-
-const useStyles$8 = makeStyles$1(
-  {
-    avatar: {
-      width: "19px",
-      height: "19px",
-      float: "left",
-      marginRight: "0.3rem",
-      marginTop: "0rem",
-      marginBottom: "0rem",
-      alignItems: "left"
-    },
-    avatarText: {
-      fontSize: "8px",
-      textAlign: "left"
-    }
-  },
-  { name: "CardContentFields" }
-);
-const CardContentFields = ({
-  bazaarProject,
-  members,
-  descriptionSize,
-  membersSize
-}) => {
-  var _a, _b;
-  const catalogEntityRoute = useRouteRef(entityRouteRef);
-  const classes = useStyles$8();
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: descriptionSize }, /* @__PURE__ */ React.createElement(AboutField, { label: "Description" }, bazaarProject.description.split("\n").map((str, i) => /* @__PURE__ */ React.createElement(Typography, { key: i, variant: "body2", paragraph: true }, str)))), /* @__PURE__ */ React.createElement(
-    Grid,
-    {
-      style: {
-        display: "flex",
-        justifyContent: "flex-end"
-      },
-      item: true,
-      xs: membersSize
-    },
-    /* @__PURE__ */ React.createElement(AboutField, { label: "Latest members" }, members.length ? members.slice(0, 7).map((member) => {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            textAlign: "left",
-            backgroundColor: "",
-            marginBottom: "0.3rem",
-            marginTop: "0.3rem",
-            display: "block"
-          },
-          key: member.userId
-        },
-        /* @__PURE__ */ React.createElement(
-          Avatar,
-          {
-            displayName: member.userId,
-            classes,
-            picture: member.picture
-          }
-        ),
-        /* @__PURE__ */ React.createElement(
-          Link,
-          {
-            target: "_blank",
-            to: member.userRef ? `${catalogEntityRoute(
-              parseEntityRef(member.userRef)
-            )}` : `http://github.com/${member.userId}`
-          },
-          member == null ? void 0 : member.userId
-        )
-      );
-    }) : /* @__PURE__ */ React.createElement("div", null))
-  ), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(AboutField, { label: "Status" }, /* @__PURE__ */ React.createElement(StatusTag, { status: bazaarProject.status }))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(AboutField, { label: "size" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, bazaarProject.size))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(AboutField, { label: "Start date" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, ((_a = bazaarProject.startDate) == null ? void 0 : _a.substring(0, 10)) || ""))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 2 }, /* @__PURE__ */ React.createElement(AboutField, { label: "End date" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, ((_b = bazaarProject.endDate) == null ? void 0 : _b.substring(0, 10)) || ""))), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React.createElement(AboutField, { label: "Responsible" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, bazaarProject.responsible || "")))))));
-};
-
-const useStyles$7 = makeStyles({
-  container: { width: "100%", minWidth: "22rem" },
-  autocomplete: { overflow: "hidden" }
-});
-const ProjectSelector = ({
-  catalogEntities,
-  onChange,
-  disableClearable,
-  defaultValue,
-  label
-}) => {
-  const classes = useStyles$7();
-  return /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(
-    Autocomplete,
-    {
-      className: classes.autocomplete,
-      fullWidth: true,
-      disableClearable,
-      defaultValue,
-      options: catalogEntities,
-      getOptionLabel: (option) => {
-        var _a;
-        return (_a = option == null ? void 0 : option.metadata) == null ? void 0 : _a.name;
-      },
-      renderOption: (option) => {
-        var _a;
-        return /* @__PURE__ */ React.createElement(Typography, { component: "span" }, (_a = option == null ? void 0 : option.metadata) == null ? void 0 : _a.name);
-      },
-      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, label }),
-      onChange: (_, data) => {
-        onChange(data);
-      }
-    }
-  ));
-};
-
-const useStyles$6 = makeStyles({
-  content: { padding: "0 1rem" }
-});
-const LinkProjectDialog = ({
-  openProjectSelector,
-  handleProjectSelectorClose,
-  catalogEntities,
-  bazaarProject,
-  fetchBazaarProject,
-  initEntity
-}) => {
-  const classes = useStyles$6();
-  const bazaarApi = useApi(bazaarApiRef);
-  const alertApi = useApi(alertApiRef);
-  const [selectedEntity, setSelectedEntity] = useState(initEntity);
-  const [selectedEntityName, setSelectedEntityName] = useState("");
-  const handleEntityClick = (entity) => {
-    setSelectedEntity(entity);
-    setSelectedEntityName(entity.metadata.name);
-  };
-  const handleSubmit = async () => {
-    handleProjectSelectorClose();
-    const updateResponse = await bazaarApi.updateProject({
-      ...bazaarProject,
-      entityRef: stringifyEntityRef(selectedEntity)
-    });
-    if (updateResponse.status === "ok") {
-      fetchBazaarProject();
-      alertApi.post({
-        message: `linked entity '${selectedEntityName}' to the project ${bazaarProject.title}`,
-        severity: "success",
-        display: "transient"
-      });
-    }
-  };
-  return /* @__PURE__ */ React.createElement(Dialog, { onClose: handleProjectSelectorClose, open: openProjectSelector }, /* @__PURE__ */ React.createElement(
-    CustomDialogTitle,
-    {
-      id: "customized-dialog-title",
-      onClose: handleProjectSelectorClose
-    },
-    "Select entity"
-  ), /* @__PURE__ */ React.createElement(MuiDialogContent, { className: classes.content, dividers: true }, /* @__PURE__ */ React.createElement(
-    ProjectSelector,
-    {
-      label: "",
-      onChange: handleEntityClick,
-      catalogEntities: catalogEntities || [],
-      disableClearable: true,
-      defaultValue: catalogEntities[0] || null
-    }
-  )), /* @__PURE__ */ React.createElement(MuiDialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: handleSubmit, color: "primary", type: "submit" }, "OK")));
-};
-
-const sortMembers = (m1, m2) => {
-  return new Date(m2.joinDate).getTime() - new Date(m1.joinDate).getTime();
-};
-const sortByDate = (a, b) => {
-  const dateA = new Date(a.updatedAt).getTime();
-  const dateB = new Date(b.updatedAt).getTime();
-  return dateB - dateA;
-};
-const sortByTitle = (a, b) => {
-  return a.title.localeCompare(b.title);
-};
-const sortByTitleDescending = (a, b) => {
-  return b.title.localeCompare(a.title);
-};
-const sortByMembers = (a, b) => {
-  return b.membersCount - a.membersCount;
-};
-
-const parseBazaarProject = (metadata) => {
-  return {
-    id: metadata.id,
-    entityRef: metadata.entity_ref,
-    title: metadata.title,
-    community: metadata.community,
-    description: metadata.description,
-    status: metadata.status,
-    updatedAt: metadata.updated_at,
-    membersCount: metadata.members_count,
-    size: metadata.size,
-    startDate: metadata.start_date,
-    endDate: metadata.end_date,
-    responsible: metadata.responsible,
-    docs: metadata.docs
-  };
-};
-const parseMember = (member) => {
-  return {
-    itemId: member.item_id,
-    userId: member.user_id,
-    userRef: member.user_ref,
-    joinDate: member.join_date,
-    picture: member.picture
-  };
-};
-const parseBazaarResponse = async (response) => {
-  if (response) {
-    const metadata = await response.json().then((resp) => resp.data[0]);
-    if (metadata) {
-      return parseBazaarProject(metadata);
-    }
-  }
-  return null;
-};
-
-const fetchProjectMembers = async (bazaarApi, project) => {
-  const response = await bazaarApi.getMembers(project.id);
-  if (response.data.length > 0) {
-    const dbMembers = response.data.map((member) => {
-      return parseMember(member);
-    });
-    dbMembers.sort(sortMembers);
-    return dbMembers;
-  }
-  return [];
-};
-const fetchCatalogItems = async (catalogApi) => {
-  const entities = await catalogApi.getEntities({
-    filter: {
-      kind: ["Component", "Resource"]
-    },
-    fields: ["kind", "metadata.name", "metadata.namespace"]
-  });
-  return entities.items;
-};
-
-const useStyles$5 = makeStyles({
-  wordBreak: {
-    wordBreak: "break-all",
-    whiteSpace: "normal",
-    margin: "-0.25rem 0"
-  }
-});
-const HomePageBazaarInfoCard = ({
-  initProject,
-  handleClose,
-  initEntity
-}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-  const classes = useStyles$5();
-  const entityLink = useRouteRef(entityRouteRef);
-  const bazaarApi = useApi(bazaarApiRef);
-  const identity = useApi(identityApiRef);
-  const alertApi = useApi(alertApiRef);
-  const catalogApi = useApi(catalogApiRef);
-  const [openEdit, setOpenEdit] = useState(false);
-  const [openProjectSelector, setOpenProjectSelector] = useState(false);
-  const [openUnlink, setOpenUnlink] = useState(false);
-  const [isMember, setIsMember] = useState(false);
-  const [catalogEntities, fetchCatalogEntities] = useAsyncFn(async () => {
-    const entities = await fetchCatalogItems(catalogApi);
-    const bazaarProjects = await bazaarApi.getProjects();
-    const bazaarLinkedRefs = bazaarProjects.data.filter((entity) => entity.entity_ref !== null).map((entity) => entity.entity_ref);
-    return entities.filter(
-      (entity) => !bazaarLinkedRefs.includes(stringifyEntityRef(entity))
-    );
-  });
-  const [bazaarProject, fetchBazaarProject] = useAsyncFn(async () => {
-    const response = await bazaarApi.getProjectById(initProject.id);
-    return await parseBazaarResponse(response);
-  });
-  const [members, fetchMembers] = useAsyncFn(async () => {
-    var _a2;
-    return fetchProjectMembers(bazaarApi, (_a2 = bazaarProject.value) != null ? _a2 : initProject);
-  });
-  const [userId, fetchUserId] = useAsyncFn(async () => {
-    return await (await identity.getProfileInfo()).displayName;
-  });
-  useEffect(() => {
-    fetchMembers();
-    fetchBazaarProject();
-    fetchCatalogEntities();
-    fetchUserId();
-  }, [fetchMembers, fetchBazaarProject, fetchCatalogEntities, fetchUserId]);
-  useEffect(() => {
-    var _a2;
-    if (members.value && userId.value) {
-      setIsMember(
-        ((_a2 = members.value) == null ? void 0 : _a2.map((member) => member.userId).indexOf(userId.value)) >= 0
-      );
-    }
-  }, [bazaarProject.value, members, identity, userId.value]);
-  const handleMembersClick = async () => {
-    if (userId.value) {
-      if (!isMember) {
-        await bazaarApi.addMember(bazaarProject.value.id, userId.value);
-      } else {
-        await bazaarApi.deleteMember(bazaarProject.value.id, userId.value);
-      }
-      setIsMember(!isMember);
-      fetchMembers();
-    }
-  };
-  const getEntityPageLink = () => {
-    var _a2;
-    if ((_a2 = bazaarProject == null ? void 0 : bazaarProject.value) == null ? void 0 : _a2.entityRef) {
-      const { name, kind, namespace } = parseEntityRef(
-        bazaarProject.value.entityRef
-      );
-      return entityLink({ kind, namespace, name });
-    }
-    return "";
-  };
-  const handleLink = () => {
-    var _a2;
-    if ((_a2 = bazaarProject.value) == null ? void 0 : _a2.entityRef) {
-      setOpenUnlink(true);
-    } else {
-      fetchCatalogEntities();
-      setOpenProjectSelector(true);
-    }
-  };
-  const links = [
-    {
-      label: "Entity page",
-      icon: /* @__PURE__ */ React.createElement(DashboardIcon, null),
-      href: ((_a = bazaarProject.value) == null ? void 0 : _a.entityRef) ? getEntityPageLink() : "",
-      disabled: ((_b = bazaarProject.value) == null ? void 0 : _b.entityRef) === null
-    },
-    {
-      label: ((_c = bazaarProject.value) == null ? void 0 : _c.entityRef) ? "Unlink project" : "Link project",
-      icon: ((_d = bazaarProject.value) == null ? void 0 : _d.entityRef) ? /* @__PURE__ */ React.createElement(LinkOffIcon, null) : /* @__PURE__ */ React.createElement(InsertLinkIcon, null),
-      onClick: handleLink
-    },
-    {
-      label: isMember ? "Leave" : "Join",
-      icon: isMember ? /* @__PURE__ */ React.createElement(ExitToAppIcon, null) : /* @__PURE__ */ React.createElement(PersonAddIcon, null),
-      href: "",
-      onClick: async () => {
-        handleMembersClick();
-      }
-    },
-    {
-      label: "Community",
-      icon: /* @__PURE__ */ React.createElement(ChatIcon, null),
-      href: (_e = bazaarProject.value) == null ? void 0 : _e.community,
-      disabled: !((_f = bazaarProject.value) == null ? void 0 : _f.community) || !isMember
-    },
-    {
-      label: "Docs",
-      icon: /* @__PURE__ */ React.createElement(Description, null),
-      href: (_g = bazaarProject.value) == null ? void 0 : _g.docs,
-      disabled: ((_h = bazaarProject.value) == null ? void 0 : _h.docs) === null || ((_i = bazaarProject.value) == null ? void 0 : _i.docs) === ""
-    }
-  ];
-  const handleUnlinkSubmit = async () => {
-    var _a2, _b2;
-    const updateResponse = await bazaarApi.updateProject({
-      ...bazaarProject.value,
-      entityRef: null
-    });
-    if (updateResponse.status === "ok") {
-      setOpenUnlink(false);
-      fetchBazaarProject();
-      alertApi.post({
-        message: `Unlinked entity '${parseEntityRef((_a2 = bazaarProject.value) == null ? void 0 : _a2.entityRef).name}' from the project ${(_b2 = bazaarProject.value) == null ? void 0 : _b2.title}`,
-        severity: "success",
-        display: "transient"
-      });
-    }
-  };
-  if (bazaarProject.error) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, (_j = bazaarProject == null ? void 0 : bazaarProject.error) == null ? void 0 : _j.message);
-  } else if (members.error) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, (_k = members == null ? void 0 : members.error) == null ? void 0 : _k.message);
-  }
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    LinkProjectDialog,
-    {
-      openProjectSelector,
-      handleProjectSelectorClose: () => setOpenProjectSelector(false),
-      catalogEntities: catalogEntities.value || [],
-      bazaarProject: bazaarProject.value || initProject,
-      fetchBazaarProject,
-      initEntity
-    }
-  ), openUnlink && /* @__PURE__ */ React.createElement(
-    ConfirmationDialog,
-    {
-      open: openUnlink,
-      handleClose: () => setOpenUnlink(false),
-      message: [
-        "Are you sure you want to unlink ",
-        /* @__PURE__ */ React.createElement("b", { className: classes.wordBreak }, parseEntityRef((_l = bazaarProject.value) == null ? void 0 : _l.entityRef).name),
-        " from ",
-        /* @__PURE__ */ React.createElement("b", { className: classes.wordBreak }, (_m = bazaarProject.value) == null ? void 0 : _m.title),
-        " ?"
-      ],
-      type: "unlink",
-      handleSubmit: handleUnlinkSubmit
-    }
-  ), /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
-    EditProjectDialog,
-    {
-      bazaarProject: bazaarProject.value || initProject,
-      openEdit,
-      handleEditClose: () => setOpenEdit(false),
-      handleCardClose: handleClose,
-      fetchBazaarProject
-    }
-  ), /* @__PURE__ */ React.createElement(
-    CardHeader,
-    {
-      title: /* @__PURE__ */ React.createElement(Typography, { paragraph: true, className: classes.wordBreak }, ((_n = bazaarProject.value) == null ? void 0 : _n.title) || initProject.title),
-      action: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(IconButton, { onClick: () => setOpenEdit(true) }, /* @__PURE__ */ React.createElement(EditIcon, null)), /* @__PURE__ */ React.createElement(IconButton, { onClick: handleClose }, /* @__PURE__ */ React.createElement(CloseIcon, null))),
-      subheader: /* @__PURE__ */ React.createElement(HeaderIconLinkRow, { links })
-    }
-  ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
-    CardContentFields,
-    {
-      bazaarProject: bazaarProject.value || initProject,
-      members: members.value || [],
-      descriptionSize: 9,
-      membersSize: 3
-    }
-  )));
-};
-
-const useStyles$4 = makeStyles((theme) => ({
-  description: (props) => ({
-    height: props.height === "large" ? "10rem" : "4rem",
-    WebkitBackgroundClip: "text",
-    backgroundImage: `linear-gradient(180deg, ${theme.palette.textContrast} 0%, ${theme.palette.textContrast} 60%, transparent 100%)`,
-    color: "transparent"
-  }),
-  statusTag: {
-    display: "inline-block",
-    whiteSpace: "nowrap",
-    marginBottom: "0.8rem"
-  },
-  memberCount: {
-    float: "right"
-  },
-  header: {
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    height: "5rem"
-  }
-}));
-const ProjectCard = ({
-  project,
-  fetchBazaarProjects,
-  catalogEntities,
-  height
-}) => {
-  const classes = useStyles$4({ height });
-  const [openCard, setOpenCard] = useState(false);
-  const { id, title, status, updatedAt, description, membersCount } = project;
-  const handleClose = () => {
-    setOpenCard(false);
-    fetchBazaarProjects();
-  };
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Dialog, { fullWidth: true, onClose: handleClose, open: openCard }, /* @__PURE__ */ React.createElement(
-    HomePageBazaarInfoCard,
-    {
-      initProject: project,
-      handleClose,
-      initEntity: catalogEntities[0] || null
-    }
-  )), /* @__PURE__ */ React.createElement(Card, { key: id }, /* @__PURE__ */ React.createElement(CardActionArea, { onClick: () => setOpenCard(true) }, /* @__PURE__ */ React.createElement(
-    ItemCardHeader,
-    {
-      classes: { root: classes.header },
-      title,
-      subtitle: `updated ${DateTime.fromISO(
-        new Date(updatedAt).toISOString()
-      ).toRelative({
-        base: DateTime.now()
-      })}`
-    }
-  ), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(StatusTag, { styles: classes.statusTag, status }), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.memberCount }, Number(membersCount) === Number(1) ? `${membersCount} member` : `${membersCount} members`), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", className: classes.description }, description)))));
-};
-
-const useStyles$3 = makeStyles({
-  content: {
-    width: "100%",
-    display: "flex",
-    flexWrap: "wrap",
-    alignItems: "center"
-  },
-  empty: {
-    height: "10rem",
-    textAlign: "center",
-    verticalAlign: "middle",
-    lineHeight: "10rem"
-  },
-  pagination: {
-    marginTop: "1rem",
-    marginLeft: "auto",
-    marginRight: "0"
-  }
-});
-const ProjectPreview = ({
-  bazaarProjects,
-  fetchBazaarProjects,
-  catalogEntities,
-  useTablePagination = true,
-  gridSize = 2,
-  height = "large"
-}) => {
-  const classes = useStyles$3();
-  const [page, setPage] = useState(1);
-  const [rows, setRows] = useState(12);
-  const handlePageChange = (_, newPage) => {
-    setPage(newPage + 1);
-  };
-  const handleRowChange = (event) => {
-    setRows(parseInt(event.target.value, 10));
-    setPage(1);
-  };
-  if (!bazaarProjects.length) {
-    return /* @__PURE__ */ React.createElement("div", { className: classes.empty }, "Please add projects to the Bazaar.");
-  }
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.content }, /* @__PURE__ */ React.createElement(Grid, { wrap: "wrap", container: true, spacing: 3 }, bazaarProjects.slice((page - 1) * rows, rows * page).map((bazaarProject, i) => {
-    return /* @__PURE__ */ React.createElement(Grid, { key: i, item: true, xs: gridSize }, /* @__PURE__ */ React.createElement(
-      ProjectCard,
-      {
-        project: bazaarProject,
-        key: i,
-        fetchBazaarProjects,
-        catalogEntities,
-        height
-      }
-    ));
-  })), useTablePagination && /* @__PURE__ */ React.createElement(
-    TablePagination,
-    {
-      component: "div",
-      className: classes.pagination,
-      rowsPerPageOptions: [12, 24, 48, 96],
-      count: bazaarProjects == null ? void 0 : bazaarProjects.length,
-      page: page - 1,
-      onPageChange: handlePageChange,
-      rowsPerPage: rows,
-      onRowsPerPageChange: handleRowChange,
-      backIconButtonProps: { disabled: page === 1 },
-      nextIconButtonProps: {
-        disabled: rows * page >= bazaarProjects.length
-      }
-    }
-  ));
-};
-
-const getUnlinkedCatalogEntities$1 = (bazaarProjects, catalogEntities) => {
-  const bazaarProjectRefs = bazaarProjects.map(
-    (project) => project.entityRef
-  );
-  return catalogEntities.filter((entity) => {
-    return !(bazaarProjectRefs == null ? void 0 : bazaarProjectRefs.includes(stringifyEntityRef(entity)));
-  });
-};
-const BazaarOverviewCard = (props) => {
-  var _a;
-  const { title, order, fullWidth = false, fullHeight = false } = props;
-  const bazaarApi = useApi(bazaarApiRef);
-  const catalogApi = useApi(catalogApiRef);
-  const root = useRouteRef(bazaarPlugin.routes.root);
-  const defaultTitle = order === "latest" ? "Bazaar Latest Projects" : "Bazaar Random Projects";
-  const bazaarLink = {
-    title: "Go to Bazaar",
-    link: `${root()}`
-  };
-  const [unlinkedCatalogEntities, setUnlinkedCatalogEntities] = useState();
-  const [catalogEntities, fetchCatalogEntities] = useAsyncFn(async () => {
-    return await fetchCatalogItems(catalogApi);
-  });
-  const [bazaarProjects, fetchBazaarProjects] = useAsyncFn(async () => {
-    const limit = fullWidth ? 6 : 3;
-    const response = await bazaarApi.getProjects(limit, order);
-    return response.data.map(parseBazaarProject);
-  });
-  const catalogEntityRefs = (_a = catalogEntities.value) == null ? void 0 : _a.map(
-    (project) => stringifyEntityRef(project)
-  );
-  useEffect(() => {
-    const filterBrokenLinks = () => {
-      var _a2;
-      if (catalogEntityRefs) {
-        (_a2 = bazaarProjects.value) == null ? void 0 : _a2.forEach(async (project) => {
-          if (project.entityRef) {
-            if (!(catalogEntityRefs == null ? void 0 : catalogEntityRefs.includes(project.entityRef))) {
-              await bazaarApi.updateProject({
-                ...project,
-                entityRef: null
-              });
-            }
-          }
-        });
-      }
-    };
-    filterBrokenLinks();
-  }, [
-    bazaarApi,
-    bazaarProjects.value,
-    catalogEntityRefs,
-    catalogEntities.value
-  ]);
-  useEffect(() => {
-    fetchCatalogEntities();
-    fetchBazaarProjects();
-  }, [fetchBazaarProjects, fetchCatalogEntities]);
-  useEffect(() => {
-    const unlinkedCEntities = getUnlinkedCatalogEntities$1(
-      bazaarProjects.value || [],
-      catalogEntities.value || []
-    );
-    if (unlinkedCEntities) {
-      setUnlinkedCatalogEntities(unlinkedCEntities);
-    }
-  }, [bazaarProjects, catalogEntities]);
-  if (catalogEntities.error) {
-    return /* @__PURE__ */ React.createElement(ErrorPanel, { error: catalogEntities.error });
-  }
-  if (bazaarProjects.error) {
-    return /* @__PURE__ */ React.createElement(ErrorPanel, { error: bazaarProjects.error });
-  }
-  return /* @__PURE__ */ React.createElement(
-    InfoCard,
-    {
-      title: title != null ? title : defaultTitle,
-      action: /* @__PURE__ */ React.createElement(IconButton, null, /* @__PURE__ */ React.createElement(Link, { to: bazaarLink.link, title: bazaarLink.title }, /* @__PURE__ */ React.createElement(StorefrontIcon, null)))
-    },
-    /* @__PURE__ */ React.createElement(
-      ProjectPreview,
-      {
-        bazaarProjects: bazaarProjects.value || [],
-        fetchBazaarProjects,
-        catalogEntities: unlinkedCatalogEntities || [],
-        useTablePagination: false,
-        gridSize: fullWidth ? 2 : 4,
-        height: fullHeight ? "large" : "small"
-      }
-    )
-  );
-};
-
-const useStyles$2 = makeStyles({
-  wordBreak: {
-    wordBreak: "break-all",
-    whiteSpace: "normal",
-    margin: "-0.25rem 0"
-  }
-});
-const EntityBazaarInfoContent = ({
-  bazaarProject,
-  fetchBazaarProject
-}) => {
-  var _a;
-  const classes = useStyles$2();
-  const bazaarApi = useApi(bazaarApiRef);
-  const identity = useApi(identityApiRef);
-  const [openEdit, setOpenEdit] = useState(false);
-  const [isMember, setIsMember] = useState(false);
-  const [openUnlink, setOpenUnlink] = useState(false);
-  const [members, fetchMembers] = useAsyncFn(async () => {
-    return bazaarProject ? await fetchProjectMembers(bazaarApi, bazaarProject) : [];
-  });
-  const [userId, fetchUserId] = useAsyncFn(async () => {
-    return await (await identity.getProfileInfo()).displayName;
-  });
-  useEffect(() => {
-    fetchMembers();
-    fetchUserId();
-  }, [fetchMembers, fetchUserId]);
-  useEffect(() => {
-    var _a2;
-    if (members.value && userId.value) {
-      setIsMember(
-        ((_a2 = members.value) == null ? void 0 : _a2.map((member) => member.userId).indexOf(userId.value)) >= 0
-      );
-    }
-  }, [bazaarProject, members, identity, userId.value]);
-  const handleMembersClick = async () => {
-    if (userId.value) {
-      if (!isMember) {
-        await bazaarApi.addMember(bazaarProject == null ? void 0 : bazaarProject.id, userId.value);
-      } else {
-        await bazaarApi.deleteMember(bazaarProject.id, userId.value);
-      }
-      setIsMember(!isMember);
-      fetchMembers();
-    }
-  };
-  const links = [
-    {
-      label: "Entity page",
-      icon: /* @__PURE__ */ React.createElement(DashboardIcon, null),
-      disabled: true
-    },
-    {
-      label: "Unlink project",
-      icon: /* @__PURE__ */ React.createElement(LinkOffIcon, null),
-      disabled: false,
-      onClick: () => {
-        setOpenUnlink(true);
-      }
-    },
-    {
-      label: isMember ? "Leave" : "Join",
-      icon: isMember ? /* @__PURE__ */ React.createElement(ExitToAppIcon, null) : /* @__PURE__ */ React.createElement(PersonAddIcon, null),
-      href: "",
-      onClick: async () => {
-        handleMembersClick();
-      }
-    },
-    {
-      label: "Community",
-      icon: /* @__PURE__ */ React.createElement(ChatIcon, null),
-      href: bazaarProject == null ? void 0 : bazaarProject.community,
-      disabled: (bazaarProject == null ? void 0 : bazaarProject.community) === "" || !isMember
-    },
-    {
-      label: "Docs",
-      icon: /* @__PURE__ */ React.createElement(Description, null),
-      href: bazaarProject == null ? void 0 : bazaarProject.docs,
-      disabled: (bazaarProject == null ? void 0 : bazaarProject.docs) === null || (bazaarProject == null ? void 0 : bazaarProject.docs) === ""
-    }
-  ];
-  const handleEditClose = () => {
-    setOpenEdit(false);
-  };
-  const handleUnlinkClose = () => {
-    setOpenUnlink(false);
-  };
-  const handleUnlinkSubmit = async () => {
-    const updateResponse = await bazaarApi.updateProject({
-      ...bazaarProject,
-      entityRef: null
-    });
-    if (updateResponse.status === "ok") {
-      handleUnlinkClose();
-      fetchBazaarProject();
-    }
-  };
-  if (members.error) {
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, (_a = members == null ? void 0 : members.error) == null ? void 0 : _a.message);
-  }
-  if (bazaarProject) {
-    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-      EditProjectDialog,
-      {
-        bazaarProject,
-        openEdit,
-        handleEditClose,
-        fetchBazaarProject
-      }
-    ), openUnlink && /* @__PURE__ */ React.createElement(
-      ConfirmationDialog,
-      {
-        open: openUnlink,
-        handleClose: handleUnlinkClose,
-        message: [
-          "Are you sure you want to unlink ",
-          /* @__PURE__ */ React.createElement("b", { className: classes.wordBreak }, parseEntityRef(bazaarProject.entityRef).name),
-          " from ",
-          /* @__PURE__ */ React.createElement("b", { className: classes.wordBreak }, bazaarProject.title),
-          " ?"
-        ],
-        type: "unlink",
-        handleSubmit: handleUnlinkSubmit
-      }
-    ), /* @__PURE__ */ React.createElement(
-      CardHeader,
-      {
-        title: /* @__PURE__ */ React.createElement(Typography, { paragraph: true, className: classes.wordBreak }, bazaarProject == null ? void 0 : bazaarProject.title),
-        action: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-          IconButton,
-          {
-            onClick: () => {
-              setOpenEdit(true);
-            }
-          },
-          /* @__PURE__ */ React.createElement(EditIcon, null)
-        )),
-        subheader: /* @__PURE__ */ React.createElement(HeaderIconLinkRow, { links })
-      }
-    ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
-      CardContentFields,
-      {
-        bazaarProject,
-        members: members.value || [],
-        descriptionSize: 10,
-        membersSize: 2
-      }
-    ));
-  }
-  return null;
-};
-
-const EntityBazaarInfoCard = () => {
-  var _a;
-  const { entity } = useEntity();
-  const bazaarApi = useApi(bazaarApiRef);
-  const [bazaarProject, fetchBazaarProject] = useAsyncFn(async () => {
-    const response = await bazaarApi.getProjectByRef(
-      stringifyEntityRef(entity)
-    );
-    return await parseBazaarResponse(response);
-  });
-  const [isBazaar, setIsBazaar] = useState((_a = bazaarProject.value) != null ? _a : false);
-  useEffect(() => {
-    fetchBazaarProject();
-  }, [fetchBazaarProject]);
-  useEffect(() => {
-    const isBazaarProject = bazaarProject.value !== void 0;
-    setIsBazaar(isBazaarProject);
-  }, [bazaarProject.value]);
-  if (isBazaar) {
-    return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(
-      EntityBazaarInfoContent,
-      {
-        bazaarProject: bazaarProject.value,
-        fetchBazaarProject
-      }
-    ));
-  }
-  return null;
-};
-
-const AddProjectDialog = ({
-  catalogEntities,
-  open,
-  handleClose,
-  fetchBazaarProjects,
-  fetchCatalogEntities
-}) => {
-  const bazaarApi = useApi(bazaarApiRef);
-  const alertApi = useApi(alertApiRef);
-  const [selectedEntity, setSelectedEntity] = useState(null);
-  const defaultValues = {
-    title: "",
-    community: "",
-    description: "",
-    docs: "",
-    status: "proposed",
-    size: "medium",
-    responsible: "",
-    startDate: null,
-    endDate: null
-  };
-  const handleEntityClick = (entity) => {
-    setSelectedEntity(entity);
-  };
-  const handleSubmit = async (getValues, reset) => {
-    var _a, _b;
-    const formValues = getValues();
-    const response = await bazaarApi.addProject({
-      ...formValues,
-      entityRef: selectedEntity ? stringifyEntityRef(selectedEntity) : null,
-      startDate: (_a = formValues.startDate) != null ? _a : null,
-      endDate: (_b = formValues.endDate) != null ? _b : null
-    });
-    if (response.status === "ok") {
-      fetchBazaarProjects();
-      fetchCatalogEntities();
-      alertApi.post({
-        message: `Added project '${formValues.title}' to the Bazaar list`,
-        severity: "success",
-        display: "transient"
-      });
-    }
-    handleClose();
-    reset(defaultValues);
-  };
-  return /* @__PURE__ */ React.createElement(
-    ProjectDialog,
-    {
-      handleSave: handleSubmit,
-      title: "Add project",
-      isAddForm: true,
-      defaultValues,
-      open,
-      projectSelector: /* @__PURE__ */ React.createElement(
-        ProjectSelector,
-        {
-          onChange: handleEntityClick,
-          catalogEntities: catalogEntities || [],
-          disableClearable: false,
-          defaultValue: null,
-          label: "Select a project"
-        }
-      ),
-      handleClose
-    }
-  );
-};
-
-const useStyles$1 = makeStyles({
-  select: {
-    fontSize: "xx-large",
-    fontWeight: "bold",
-    width: "16rem"
-  }
-});
-const SortMethodSelector = ({
-  sortMethodNbr,
-  handleSortMethodChange
-}) => {
-  const classes = useStyles$1();
-  return /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true }, /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      className: classes.select,
-      disableUnderline: true,
-      value: sortMethodNbr,
-      onChange: handleSortMethodChange
-    },
-    /* @__PURE__ */ React.createElement(MenuItem, { value: 0 }, "Latest updated"),
-    /* @__PURE__ */ React.createElement(MenuItem, { value: 1 }, "A-Z"),
-    /* @__PURE__ */ React.createElement(MenuItem, { value: 2 }, "Z-A"),
-    /* @__PURE__ */ React.createElement(MenuItem, { value: 3 }, "Most members")
-  ));
-};
-
-const useStyles = makeStyles({
-  button: { minWidth: "11rem" },
-  container: {
-    marginTop: "2rem"
-  },
-  header: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    margin: "0 auto",
-    marginBottom: "1.2rem"
-  },
-  search: {
-    marginRight: "1rem",
-    height: "2.5rem",
-    width: "35rem"
-  }
-});
-const getUnlinkedCatalogEntities = (bazaarProjects, catalogEntities) => {
-  const bazaarProjectRefs = bazaarProjects.map(
-    (project) => project.entityRef
-  );
-  return catalogEntities.filter((entity) => {
-    return !(bazaarProjectRefs == null ? void 0 : bazaarProjectRefs.includes(stringifyEntityRef(entity)));
-  });
-};
-const SortView = (props) => {
-  var _a;
-  const { fullWidth = true, fullHeight = true } = props;
-  const bazaarApi = useApi(bazaarApiRef);
-  const catalogApi = useApi(catalogApiRef);
-  const classes = useStyles();
-  const sortMethods = [
-    sortByDate,
-    sortByTitle,
-    sortByTitleDescending,
-    sortByMembers
-  ];
-  const [sortMethodNbr, setSortMethodNbr] = useState(0);
-  const [openAdd, setOpenAdd] = useState(false);
-  const [searchValue, setSearchValue] = useState("");
-  const [unlinkedCatalogEntities, setUnlinkedCatalogEntities] = useState();
-  const [catalogEntities, fetchCatalogEntities] = useAsyncFn(async () => {
-    return await fetchCatalogItems(catalogApi);
-  });
-  const [bazaarProjects, fetchBazaarProjects] = useAsyncFn(async () => {
-    const response = await bazaarApi.getProjects();
-    const dbProjects = [];
-    response.data.forEach((project) => {
-      dbProjects.push(parseBazaarProject(project));
-    });
-    return dbProjects;
-  });
-  const catalogEntityRefs = (_a = catalogEntities.value) == null ? void 0 : _a.map(
-    (project) => stringifyEntityRef(project)
-  );
-  const getSearchResults = () => {
-    var _a2;
-    return (_a2 = bazaarProjects.value) == null ? void 0 : _a2.filter((project) => project.title.includes(searchValue)).sort(sortMethods[sortMethodNbr]);
-  };
-  useEffect(() => {
-    const filterBrokenLinks = () => {
-      var _a2;
-      if (catalogEntityRefs) {
-        (_a2 = bazaarProjects.value) == null ? void 0 : _a2.forEach(async (project) => {
-          if (project.entityRef) {
-            if (!(catalogEntityRefs == null ? void 0 : catalogEntityRefs.includes(project.entityRef))) {
-              await bazaarApi.updateProject({
-                ...project,
-                entityRef: null
-              });
-            }
-          }
-        });
-      }
-    };
-    filterBrokenLinks();
-  }, [
-    bazaarApi,
-    bazaarProjects.value,
-    catalogEntityRefs,
-    catalogEntities.value
-  ]);
-  useEffect(() => {
-    fetchCatalogEntities();
-    fetchBazaarProjects();
-  }, [fetchBazaarProjects, fetchCatalogEntities]);
-  useEffect(() => {
-    const unlinkedCEntities = getUnlinkedCatalogEntities(
-      bazaarProjects.value || [],
-      catalogEntities.value || []
-    );
-    if (unlinkedCEntities) {
-      setUnlinkedCatalogEntities(unlinkedCEntities);
-    }
-  }, [bazaarProjects, catalogEntities]);
-  const handleSortMethodChange = (event) => {
-    setSortMethodNbr(
-      typeof event.target.value === "number" ? event.target.value : 0
-    );
-  };
-  if (catalogEntities.error)
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, catalogEntities.error.message);
-  if (bazaarProjects.error)
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, bazaarProjects.error.message);
-  return /* @__PURE__ */ React.createElement(Content, { noPadding: true }, /* @__PURE__ */ React.createElement("div", { className: classes.header }, /* @__PURE__ */ React.createElement(
-    SortMethodSelector,
-    {
-      sortMethodNbr,
-      handleSortMethodChange
-    }
-  ), /* @__PURE__ */ React.createElement(
-    SearchBar,
-    {
-      className: classes.search,
-      value: searchValue,
-      onChange: (newSortMethod) => {
-        setSearchValue(newSortMethod);
-      },
-      onCancelSearch: () => {
-        setSearchValue("");
-      }
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      className: classes.button,
-      variant: "contained",
-      color: "primary",
-      onClick: () => {
-        setOpenAdd(true);
-      }
-    },
-    "Add project"
-  ), /* @__PURE__ */ React.createElement(
-    AddProjectDialog,
-    {
-      catalogEntities: unlinkedCatalogEntities || [],
-      handleClose: () => {
-        setOpenAdd(false);
-      },
-      open: openAdd,
-      fetchBazaarProjects,
-      fetchCatalogEntities
-    }
-  ), /* @__PURE__ */ React.createElement(SupportButton, null)), /* @__PURE__ */ React.createElement(
-    ProjectPreview,
-    {
-      bazaarProjects: getSearchResults() || [],
-      fetchBazaarProjects,
-      catalogEntities: unlinkedCatalogEntities || [],
-      gridSize: fullWidth ? 2 : 4,
-      height: fullHeight ? "large" : "small"
-    }
-  ), /* @__PURE__ */ React.createElement(Content, { noPadding: true, className: classes.container }));
-};
-
-export { BazaarOverviewCard, BazaarPage, EntityBazaarInfoCard, SortView, bazaarPlugin, isBazaarAvailable };
+export { BazaarPage, bazaarPlugin } from './plugin.esm.js';
+export { isBazaarAvailable } from './api.esm.js';
+export { BazaarOverviewCard } from './components/BazaarOverviewCard/BazaarOverviewCard.esm.js';
+export { EntityBazaarInfoCard } from './components/EntityBazaarInfoCard/EntityBazaarInfoCard.esm.js';
+export { SortView } from './components/SortView/SortView.esm.js';
 //# sourceMappingURL=index.esm.js.map