@backstage-community/plugin-bazaar 0.2.27

package/dist/index.esm.js

@@ -0,0 +1,1750 @@
+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 };
+//# sourceMappingURL=index.esm.js.map