@backstage-community/plugin-bazaar 0.9.0 → 0.10.0

package/dist/components/ProjectDialog/ProjectDialog.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import { useForm } from 'react-hook-form';
@@ -44,107 +45,122 @@ const ProjectDialog = ({
   useEffect(() => {
     fetchUsers(catalogApi).then(setUsers);
   }, [catalogApi]);
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
     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", "completed"]
-      }
-    ), /* @__PURE__ */ React.createElement(
-      InputSelector,
-      {
-        control,
-        name: "size",
-        options: ["small", "medium", "large"]
-      }
-    ), /* @__PURE__ */ React.createElement(
-      UserSelector,
-      {
-        users,
-        disableClearable: false,
-        defaultValue: defaultValues.responsible,
-        label: "Select or enter responsible user",
-        name: "responsible",
-        control,
-        rules: { required: "Please select or enter a responsible user" }
-      }
-    ), 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"
-    ))
-  ));
+      open,
+      children: [
+        /* @__PURE__ */ jsx(
+          CustomDialogTitle,
+          {
+            id: "customized-dialog-title",
+            onClose: handleCloseDialog,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { style: { padding: "1rem", paddingTop: "0rem" }, dividers: true, children: [
+          /* @__PURE__ */ jsx(
+            InputField,
+            {
+              error: errors.title,
+              control,
+              rules: {
+                required: true
+              },
+              inputType: "title",
+              helperText: "Please enter a title for your project"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputField,
+            {
+              error: errors.description,
+              control,
+              rules: {
+                required: true
+              },
+              inputType: "description",
+              helperText: "Please enter a description"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputSelector,
+            {
+              control,
+              name: "status",
+              options: ["proposed", "ongoing", "completed"]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputSelector,
+            {
+              control,
+              name: "size",
+              options: ["small", "medium", "large"]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            UserSelector,
+            {
+              users,
+              disableClearable: false,
+              defaultValue: defaultValues.responsible,
+              label: "Select or enter responsible user",
+              name: "responsible",
+              control,
+              rules: { required: "Please select or enter a responsible user" }
+            }
+          ),
+          isAddForm && projectSelector,
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+            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__ */ jsx(DoubleDateSelector, { setValue, control })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          !isAddForm && deleteButton,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleSubmit(handleSaveForm),
+              color: "primary",
+              type: "submit",
+              children: "Submit"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
 };
 
 export { ProjectDialog };

package/dist/components/ProjectDialog/ProjectDialog.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectDialog.esm.js","sources":["../../../src/components/ProjectDialog/ProjectDialog.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useEffect, useState } from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport { useForm, UseFormReset, UseFormGetValues } from 'react-hook-form';\nimport { InputField } from '../InputField/InputField';\nimport { InputSelector } from '../InputSelector/InputSelector';\nimport { FormValues } from '../../types';\nimport { DoubleDateSelector } from '../DoubleDateSelector/DoubleDateSelector';\nimport {\n  CustomDialogTitle,\n  DialogActions,\n  DialogContent,\n} from '../CustomDialogTitle';\nimport { fetchUsers } from '../../util/fetchMethods';\nimport { UserSelector } from '../UserSelector';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\n\ntype Props = {\n  handleSave: (\n    getValues: UseFormGetValues<FormValues>,\n    reset: UseFormReset<FormValues>,\n  ) => Promise<void>;\n  isAddForm: boolean;\n  title: string;\n  defaultValues: FormValues;\n  open: boolean;\n  projectSelector?: JSX.Element;\n  deleteButton?: JSX.Element;\n  handleClose: () => void;\n};\n\nexport const ProjectDialog = ({\n  handleSave,\n  isAddForm,\n  title,\n  defaultValues,\n  open,\n  projectSelector,\n  deleteButton,\n  handleClose,\n}: Props) => {\n  const catalogApi = useApi(catalogApiRef);\n  const [users, setUsers] = useState<Entity[]>([]);\n\n  const {\n    handleSubmit,\n    reset,\n    control,\n    getValues,\n    formState: { errors },\n    setValue,\n  } = useForm<FormValues>({\n    mode: 'onChange',\n    defaultValues,\n  });\n\n  const handleSaveForm = () => {\n    handleSave(getValues, reset);\n  };\n\n  const handleCloseDialog = () => {\n    handleClose();\n    reset(defaultValues);\n  };\n\n  useEffect(() => {\n    fetchUsers(catalogApi).then(setUsers);\n  }, [catalogApi]);\n\n  return (\n    <div>\n      <Dialog\n        fullWidth\n        maxWidth=\"xs\"\n        onClose={handleCloseDialog}\n        aria-labelledby=\"customized-dialog-title\"\n        open={open}\n      >\n        <CustomDialogTitle\n          id=\"customized-dialog-title\"\n          onClose={handleCloseDialog}\n        >\n          {title}\n        </CustomDialogTitle>\n        <DialogContent style={{ padding: '1rem', paddingTop: '0rem' }} dividers>\n          <InputField\n            error={errors.title}\n            control={control}\n            rules={{\n              required: true,\n            }}\n            inputType=\"title\"\n            helperText=\"Please enter a title for your project\"\n          />\n          <InputField\n            error={errors.description}\n            control={control}\n            rules={{\n              required: true,\n            }}\n            inputType=\"description\"\n            helperText=\"Please enter a description\"\n          />\n\n          <InputSelector\n            control={control}\n            name=\"status\"\n            options={['proposed', 'ongoing', 'completed']}\n          />\n\n          <InputSelector\n            control={control}\n            name=\"size\"\n            options={['small', 'medium', 'large']}\n          />\n\n          <UserSelector\n            users={users}\n            disableClearable={false}\n            defaultValue={defaultValues.responsible}\n            label=\"Select or enter responsible user\"\n            name=\"responsible\"\n            control={control}\n            rules={{ required: 'Please select or enter a responsible user' }}\n          />\n\n          {isAddForm && projectSelector}\n\n          <InputField\n            error={errors.community}\n            control={control}\n            rules={{\n              required: false,\n              pattern: RegExp('^(https?)://'),\n            }}\n            inputType=\"community\"\n            helperText=\"Please enter a link starting with http/https\"\n            placeholder=\"Community link to e.g. Teams or Discord\"\n          />\n\n          <InputField\n            error={errors.docs}\n            control={control}\n            rules={{\n              required: false,\n              pattern: RegExp('^(https?)://'),\n            }}\n            inputType=\"docs\"\n            helperText=\"Please enter a link starting with http/https\"\n            placeholder=\"Project docs link\"\n          />\n\n          <DoubleDateSelector setValue={setValue} control={control} />\n        </DialogContent>\n\n        <DialogActions>\n          {!isAddForm && deleteButton}\n          <Button\n            onClick={handleSubmit(handleSaveForm)}\n            color=\"primary\"\n            type=\"submit\"\n          >\n            Submit\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProjectDialog.esm.js","sources":["../../../src/components/ProjectDialog/ProjectDialog.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useState } from 'react';\nimport Button from '@material-ui/core/Button';\nimport Dialog from '@material-ui/core/Dialog';\nimport { useForm, UseFormReset, UseFormGetValues } from 'react-hook-form';\nimport { InputField } from '../InputField/InputField';\nimport { InputSelector } from '../InputSelector/InputSelector';\nimport { FormValues } from '../../types';\nimport { DoubleDateSelector } from '../DoubleDateSelector/DoubleDateSelector';\nimport {\n  CustomDialogTitle,\n  DialogActions,\n  DialogContent,\n} from '../CustomDialogTitle';\nimport { fetchUsers } from '../../util/fetchMethods';\nimport { UserSelector } from '../UserSelector';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\n\ntype Props = {\n  handleSave: (\n    getValues: UseFormGetValues<FormValues>,\n    reset: UseFormReset<FormValues>,\n  ) => Promise<void>;\n  isAddForm: boolean;\n  title: string;\n  defaultValues: FormValues;\n  open: boolean;\n  projectSelector?: JSX.Element;\n  deleteButton?: JSX.Element;\n  handleClose: () => void;\n};\n\nexport const ProjectDialog = ({\n  handleSave,\n  isAddForm,\n  title,\n  defaultValues,\n  open,\n  projectSelector,\n  deleteButton,\n  handleClose,\n}: Props) => {\n  const catalogApi = useApi(catalogApiRef);\n  const [users, setUsers] = useState<Entity[]>([]);\n\n  const {\n    handleSubmit,\n    reset,\n    control,\n    getValues,\n    formState: { errors },\n    setValue,\n  } = useForm<FormValues>({\n    mode: 'onChange',\n    defaultValues,\n  });\n\n  const handleSaveForm = () => {\n    handleSave(getValues, reset);\n  };\n\n  const handleCloseDialog = () => {\n    handleClose();\n    reset(defaultValues);\n  };\n\n  useEffect(() => {\n    fetchUsers(catalogApi).then(setUsers);\n  }, [catalogApi]);\n\n  return (\n    <div>\n      <Dialog\n        fullWidth\n        maxWidth=\"xs\"\n        onClose={handleCloseDialog}\n        aria-labelledby=\"customized-dialog-title\"\n        open={open}\n      >\n        <CustomDialogTitle\n          id=\"customized-dialog-title\"\n          onClose={handleCloseDialog}\n        >\n          {title}\n        </CustomDialogTitle>\n        <DialogContent style={{ padding: '1rem', paddingTop: '0rem' }} dividers>\n          <InputField\n            error={errors.title}\n            control={control}\n            rules={{\n              required: true,\n            }}\n            inputType=\"title\"\n            helperText=\"Please enter a title for your project\"\n          />\n          <InputField\n            error={errors.description}\n            control={control}\n            rules={{\n              required: true,\n            }}\n            inputType=\"description\"\n            helperText=\"Please enter a description\"\n          />\n\n          <InputSelector\n            control={control}\n            name=\"status\"\n            options={['proposed', 'ongoing', 'completed']}\n          />\n\n          <InputSelector\n            control={control}\n            name=\"size\"\n            options={['small', 'medium', 'large']}\n          />\n\n          <UserSelector\n            users={users}\n            disableClearable={false}\n            defaultValue={defaultValues.responsible}\n            label=\"Select or enter responsible user\"\n            name=\"responsible\"\n            control={control}\n            rules={{ required: 'Please select or enter a responsible user' }}\n          />\n\n          {isAddForm && projectSelector}\n\n          <InputField\n            error={errors.community}\n            control={control}\n            rules={{\n              required: false,\n              pattern: RegExp('^(https?)://'),\n            }}\n            inputType=\"community\"\n            helperText=\"Please enter a link starting with http/https\"\n            placeholder=\"Community link to e.g. Teams or Discord\"\n          />\n\n          <InputField\n            error={errors.docs}\n            control={control}\n            rules={{\n              required: false,\n              pattern: RegExp('^(https?)://'),\n            }}\n            inputType=\"docs\"\n            helperText=\"Please enter a link starting with http/https\"\n            placeholder=\"Project docs link\"\n          />\n\n          <DoubleDateSelector setValue={setValue} control={control} />\n        </DialogContent>\n\n        <DialogActions>\n          {!isAddForm && deleteButton}\n          <Button\n            onClick={handleSubmit(handleSaveForm)}\n            color=\"primary\"\n            type=\"submit\"\n          >\n            Submit\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/ProjectPreview/ProjectPreview.esm.js

@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { ProjectCard } from '../ProjectCard/ProjectCard.esm.js';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
@@ -43,36 +44,39 @@ const ProjectPreview = ({
     setPage(1);
   };
   if (!bazaarProjects.length) {
-    return /* @__PURE__ */ React.createElement("div", { className: classes.empty }, "Please add projects to the Bazaar.");
+    return /* @__PURE__ */ jsx("div", { className: classes.empty, children: "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,
+  return /* @__PURE__ */ jsxs(Box, { className: classes.content, children: [
+    /* @__PURE__ */ jsx(Grid, { wrap: "wrap", container: true, spacing: 3, children: bazaarProjects.slice((page - 1) * rows, rows * page).map((bazaarProject, i) => {
+      return /* @__PURE__ */ jsx(Grid, { item: true, xs: gridSize, children: /* @__PURE__ */ jsx(
+        ProjectCard,
+        {
+          project: bazaarProject,
+          fetchBazaarProjects,
+          catalogEntities,
+          height
+        },
+        i
+      ) }, i);
+    }) }),
+    useTablePagination && /* @__PURE__ */ jsx(
+      TablePagination,
       {
-        project: bazaarProject,
-        key: i,
-        fetchBazaarProjects,
-        catalogEntities,
-        height
+        component: "div",
+        className: classes.pagination,
+        rowsPerPageOptions: [12, 24, 48, 96],
+        count: bazaarProjects?.length,
+        page: page - 1,
+        onPageChange: handlePageChange,
+        rowsPerPage: rows,
+        onRowsPerPageChange: handleRowChange,
+        backIconButtonProps: { disabled: page === 1 },
+        nextIconButtonProps: {
+          disabled: rows * page >= bazaarProjects.length
+        }
       }
-    ));
-  })), useTablePagination && /* @__PURE__ */ React.createElement(
-    TablePagination,
-    {
-      component: "div",
-      className: classes.pagination,
-      rowsPerPageOptions: [12, 24, 48, 96],
-      count: bazaarProjects?.length,
-      page: page - 1,
-      onPageChange: handlePageChange,
-      rowsPerPage: rows,
-      onRowsPerPageChange: handleRowChange,
-      backIconButtonProps: { disabled: page === 1 },
-      nextIconButtonProps: {
-        disabled: rows * page >= bazaarProjects.length
-      }
-    }
-  ));
+    )
+  ] });
 };
 
 export { ProjectPreview };

package/dist/components/ProjectPreview/ProjectPreview.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectPreview.esm.js","sources":["../../../src/components/ProjectPreview/ProjectPreview.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ChangeEvent, useState } from 'react';\nimport { ProjectCard } from '../ProjectCard/ProjectCard';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport { GridSize } from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { BazaarProject } from '../../types';\nimport { Entity } from '@backstage/catalog-model';\n\ntype Props = {\n  bazaarProjects: BazaarProject[];\n  fetchBazaarProjects: () => Promise<BazaarProject[]>;\n  catalogEntities: Entity[];\n  useTablePagination?: boolean;\n  gridSize?: GridSize;\n  height: 'large' | 'small';\n};\n\nconst useStyles = makeStyles({\n  content: {\n    width: '100%',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n  },\n  empty: {\n    height: '10rem',\n    textAlign: 'center',\n    verticalAlign: 'middle',\n    lineHeight: '10rem',\n  },\n  pagination: {\n    marginTop: '1rem',\n    marginLeft: 'auto',\n    marginRight: '0',\n  },\n});\n\nexport const ProjectPreview = ({\n  bazaarProjects,\n  fetchBazaarProjects,\n  catalogEntities,\n  useTablePagination = true,\n  gridSize = 2,\n  height = 'large',\n}: Props) => {\n  const classes = useStyles();\n  const [page, setPage] = useState(1);\n  const [rows, setRows] = useState(12);\n\n  const handlePageChange = (_: any, newPage: number) => {\n    setPage(newPage + 1);\n  };\n\n  const handleRowChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n  ) => {\n    setRows(parseInt(event.target.value, 10));\n    setPage(1);\n  };\n\n  if (!bazaarProjects.length) {\n    return (\n      <div className={classes.empty}>Please add projects to the Bazaar.</div>\n    );\n  }\n\n  return (\n    <Box className={classes.content}>\n      <Grid wrap=\"wrap\" container spacing={3}>\n        {bazaarProjects\n          .slice((page - 1) * rows, rows * page)\n          .map((bazaarProject: BazaarProject, i: number) => {\n            return (\n              <Grid key={i} item xs={gridSize}>\n                <ProjectCard\n                  project={bazaarProject}\n                  key={i}\n                  fetchBazaarProjects={fetchBazaarProjects}\n                  catalogEntities={catalogEntities}\n                  height={height}\n                />\n              </Grid>\n            );\n          })}\n      </Grid>\n\n      {useTablePagination && (\n        <TablePagination\n          component=\"div\"\n          className={classes.pagination}\n          rowsPerPageOptions={[12, 24, 48, 96]}\n          count={bazaarProjects?.length}\n          page={page - 1}\n          onPageChange={handlePageChange}\n          rowsPerPage={rows}\n          onRowsPerPageChange={handleRowChange}\n          backIconButtonProps={{ disabled: page === 1 }}\n          nextIconButtonProps={{\n            disabled: rows * page >= bazaarProjects.length,\n          }}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProjectPreview.esm.js","sources":["../../../src/components/ProjectPreview/ProjectPreview.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ChangeEvent, useState } from 'react';\nimport { ProjectCard } from '../ProjectCard/ProjectCard';\nimport Box from '@material-ui/core/Box';\nimport Grid from '@material-ui/core/Grid';\nimport TablePagination from '@material-ui/core/TablePagination';\nimport { GridSize } from '@material-ui/core/Grid';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { BazaarProject } from '../../types';\nimport { Entity } from '@backstage/catalog-model';\n\ntype Props = {\n  bazaarProjects: BazaarProject[];\n  fetchBazaarProjects: () => Promise<BazaarProject[]>;\n  catalogEntities: Entity[];\n  useTablePagination?: boolean;\n  gridSize?: GridSize;\n  height: 'large' | 'small';\n};\n\nconst useStyles = makeStyles({\n  content: {\n    width: '100%',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n  },\n  empty: {\n    height: '10rem',\n    textAlign: 'center',\n    verticalAlign: 'middle',\n    lineHeight: '10rem',\n  },\n  pagination: {\n    marginTop: '1rem',\n    marginLeft: 'auto',\n    marginRight: '0',\n  },\n});\n\nexport const ProjectPreview = ({\n  bazaarProjects,\n  fetchBazaarProjects,\n  catalogEntities,\n  useTablePagination = true,\n  gridSize = 2,\n  height = 'large',\n}: Props) => {\n  const classes = useStyles();\n  const [page, setPage] = useState(1);\n  const [rows, setRows] = useState(12);\n\n  const handlePageChange = (_: any, newPage: number) => {\n    setPage(newPage + 1);\n  };\n\n  const handleRowChange = (\n    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n  ) => {\n    setRows(parseInt(event.target.value, 10));\n    setPage(1);\n  };\n\n  if (!bazaarProjects.length) {\n    return (\n      <div className={classes.empty}>Please add projects to the Bazaar.</div>\n    );\n  }\n\n  return (\n    <Box className={classes.content}>\n      <Grid wrap=\"wrap\" container spacing={3}>\n        {bazaarProjects\n          .slice((page - 1) * rows, rows * page)\n          .map((bazaarProject: BazaarProject, i: number) => {\n            return (\n              <Grid key={i} item xs={gridSize}>\n                <ProjectCard\n                  project={bazaarProject}\n                  key={i}\n                  fetchBazaarProjects={fetchBazaarProjects}\n                  catalogEntities={catalogEntities}\n                  height={height}\n                />\n              </Grid>\n            );\n          })}\n      </Grid>\n\n      {useTablePagination && (\n        <TablePagination\n          component=\"div\"\n          className={classes.pagination}\n          rowsPerPageOptions={[12, 24, 48, 96]}\n          count={bazaarProjects?.length}\n          page={page - 1}\n          onPageChange={handlePageChange}\n          rowsPerPage={rows}\n          onRowsPerPageChange={handleRowChange}\n          backIconButtonProps={{ disabled: page === 1 }}\n          nextIconButtonProps={{\n            disabled: rows * page >= bazaarProjects.length,\n          }}\n        />\n      )}\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAmCA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,OAAS,EAAA;AAAA,IACP,KAAO,EAAA,MAAA;AAAA,IACP,OAAS,EAAA,MAAA;AAAA,IACT,QAAU,EAAA,MAAA;AAAA,IACV,UAAY,EAAA;AAAA,GACd;AAAA,EACA,KAAO,EAAA;AAAA,IACL,MAAQ,EAAA,OAAA;AAAA,IACR,SAAW,EAAA,QAAA;AAAA,IACX,aAAe,EAAA,QAAA;AAAA,IACf,UAAY,EAAA;AAAA,GACd;AAAA,EACA,UAAY,EAAA;AAAA,IACV,SAAW,EAAA,MAAA;AAAA,IACX,UAAY,EAAA,MAAA;AAAA,IACZ,WAAa,EAAA;AAAA;AAEjB,CAAC,CAAA;AAEM,MAAM,iBAAiB,CAAC;AAAA,EAC7B,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAqB,GAAA,IAAA;AAAA,EACrB,QAAW,GAAA,CAAA;AAAA,EACX,MAAS,GAAA;AACX,CAAa,KAAA;AACX,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,CAAC,CAAA;AAClC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,EAAE,CAAA;AAEnC,EAAM,MAAA,gBAAA,GAAmB,CAAC,CAAA,EAAQ,OAAoB,KAAA;AACpD,IAAA,OAAA,CAAQ,UAAU,CAAC,CAAA;AAAA,GACrB;AAEA,EAAM,MAAA,eAAA,GAAkB,CACtB,KACG,KAAA;AACH,IAAA,OAAA,CAAQ,QAAS,CAAA,KAAA,CAAM,MAAO,CAAA,KAAA,EAAO,EAAE,CAAC,CAAA;AACxC,IAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,GACX;AAEA,EAAI,IAAA,CAAC,eAAe,MAAQ,EAAA;AAC1B,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,OAAO,QAAkC,EAAA,oCAAA,EAAA,CAAA;AAAA;AAIrE,EAAA,uBACG,IAAA,CAAA,GAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,OACtB,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,MAAA,EAAO,WAAS,IAAC,EAAA,OAAA,EAAS,GAClC,QACE,EAAA,cAAA,CAAA,KAAA,CAAA,CAAO,IAAO,GAAA,CAAA,IAAK,MAAM,IAAO,GAAA,IAAI,EACpC,GAAI,CAAA,CAAC,eAA8B,CAAc,KAAA;AAChD,MAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAa,IAAI,EAAA,IAAA,EAAC,IAAI,QACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,OAAS,EAAA,aAAA;AAAA,UAET,mBAAA;AAAA,UACA,eAAA;AAAA,UACA;AAAA,SAAA;AAAA,QAHK;AAAA,WAHE,CAQX,CAAA;AAAA,KAEH,CACL,EAAA,CAAA;AAAA,IAEC,kBACC,oBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,KAAA;AAAA,QACV,WAAW,OAAQ,CAAA,UAAA;AAAA,QACnB,kBAAoB,EAAA,CAAC,EAAI,EAAA,EAAA,EAAI,IAAI,EAAE,CAAA;AAAA,QACnC,OAAO,cAAgB,EAAA,MAAA;AAAA,QACvB,MAAM,IAAO,GAAA,CAAA;AAAA,QACb,YAAc,EAAA,gBAAA;AAAA,QACd,WAAa,EAAA,IAAA;AAAA,QACb,mBAAqB,EAAA,eAAA;AAAA,QACrB,mBAAqB,EAAA,EAAE,QAAU,EAAA,IAAA,KAAS,CAAE,EAAA;AAAA,QAC5C,mBAAqB,EAAA;AAAA,UACnB,QAAA,EAAU,IAAO,GAAA,IAAA,IAAQ,cAAe,CAAA;AAAA;AAC1C;AAAA;AACF,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/ProjectSelector/ProjectSelector.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import Typography from '@material-ui/core/Typography';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import TextField from '@material-ui/core/TextField';
@@ -16,7 +16,7 @@ const ProjectSelector = ({
   label
 }) => {
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement("div", { className: classes.container }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx("div", { className: classes.container, children: /* @__PURE__ */ jsx(
     Autocomplete,
     {
       className: classes.autocomplete,
@@ -25,13 +25,13 @@ const ProjectSelector = ({
       defaultValue,
       options: catalogEntities,
       getOptionLabel: (option) => option?.metadata?.name,
-      renderOption: (option) => /* @__PURE__ */ React.createElement(Typography, { component: "span" }, option?.metadata?.name),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, label }),
+      renderOption: (option) => /* @__PURE__ */ jsx(Typography, { component: "span", children: option?.metadata?.name }),
+      renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label }),
       onChange: (_, data) => {
         onChange(data);
       }
     }
-  ));
+  ) });
 };
 
 export { ProjectSelector };

package/dist/components/ProjectSelector/ProjectSelector.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProjectSelector.esm.js","sources":["../../../src/components/ProjectSelector/ProjectSelector.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Entity } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\nimport { makeStyles } from '@material-ui/core/styles';\n\ntype Props = {\n  catalogEntities: Entity[];\n  onChange: (entity: Entity) => void;\n  disableClearable: boolean;\n  defaultValue: Entity | null | undefined;\n  label: string;\n};\n\nconst useStyles = makeStyles({\n  container: { width: '100%', minWidth: '22rem' },\n  autocomplete: { overflow: 'hidden' },\n});\n\nexport const ProjectSelector = ({\n  catalogEntities,\n  onChange,\n  disableClearable,\n  defaultValue,\n  label,\n}: Props) => {\n  const classes = useStyles();\n  return (\n    <div className={classes.container}>\n      <Autocomplete\n        className={classes.autocomplete}\n        fullWidth\n        disableClearable={disableClearable}\n        defaultValue={defaultValue}\n        options={catalogEntities}\n        getOptionLabel={option => option?.metadata?.name}\n        renderOption={option => (\n          <Typography component=\"span\">{option?.metadata?.name}</Typography>\n        )}\n        renderInput={params => <TextField {...params} label={label} />}\n        onChange={(_, data) => {\n          onChange(data!);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA+BA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,SAAW,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,UAAU,OAAQ,EAAA;AAAA,EAC9C,YAAA,EAAc,EAAE,QAAA,EAAU,QAAS;AACrC,CAAC,CAAA;AAEM,MAAM,kBAAkB,CAAC;AAAA,EAC9B,eAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAa,KAAA;AACX,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,SACtB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,YAAA;AAAA,MACnB,SAAS,EAAA,IAAA;AAAA,MACT,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAS,EAAA,eAAA;AAAA,MACT,cAAA,EAAgB,CAAU,MAAA,KAAA,MAAA,EAAQ,QAAU,EAAA,IAAA;AAAA,MAC5C,YAAA,EAAc,4BACX,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,WAAU,MAAQ,EAAA,EAAA,MAAA,EAAQ,UAAU,IAAK,CAAA;AAAA,MAEvD,aAAa,CAAU,MAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,SAAW,EAAA,EAAA,GAAG,QAAQ,KAAc,EAAA,CAAA;AAAA,MAC5D,QAAA,EAAU,CAAC,CAAA,EAAG,IAAS,KAAA;AACrB,QAAA,QAAA,CAAS,IAAK,CAAA;AAAA;AAChB;AAAA,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ProjectSelector.esm.js","sources":["../../../src/components/ProjectSelector/ProjectSelector.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Entity } from '@backstage/catalog-model';\nimport Typography from '@material-ui/core/Typography';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport TextField from '@material-ui/core/TextField';\nimport { makeStyles } from '@material-ui/core/styles';\n\ntype Props = {\n  catalogEntities: Entity[];\n  onChange: (entity: Entity) => void;\n  disableClearable: boolean;\n  defaultValue: Entity | null | undefined;\n  label: string;\n};\n\nconst useStyles = makeStyles({\n  container: { width: '100%', minWidth: '22rem' },\n  autocomplete: { overflow: 'hidden' },\n});\n\nexport const ProjectSelector = ({\n  catalogEntities,\n  onChange,\n  disableClearable,\n  defaultValue,\n  label,\n}: Props) => {\n  const classes = useStyles();\n  return (\n    <div className={classes.container}>\n      <Autocomplete\n        className={classes.autocomplete}\n        fullWidth\n        disableClearable={disableClearable}\n        defaultValue={defaultValue}\n        options={catalogEntities}\n        getOptionLabel={option => option?.metadata?.name}\n        renderOption={option => (\n          <Typography component=\"span\">{option?.metadata?.name}</Typography>\n        )}\n        renderInput={params => <TextField {...params} label={label} />}\n        onChange={(_, data) => {\n          onChange(data!);\n        }}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA8BA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,SAAW,EAAA,EAAE,KAAO,EAAA,MAAA,EAAQ,UAAU,OAAQ,EAAA;AAAA,EAC9C,YAAA,EAAc,EAAE,QAAA,EAAU,QAAS;AACrC,CAAC,CAAA;AAEM,MAAM,kBAAkB,CAAC;AAAA,EAC9B,eAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAa,KAAA;AACX,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,OAAA,CAAQ,SACtB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,YAAA;AAAA,MACnB,SAAS,EAAA,IAAA;AAAA,MACT,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAS,EAAA,eAAA;AAAA,MACT,cAAA,EAAgB,CAAU,MAAA,KAAA,MAAA,EAAQ,QAAU,EAAA,IAAA;AAAA,MAC5C,YAAA,EAAc,4BACX,GAAA,CAAA,UAAA,EAAA,EAAW,WAAU,MAAQ,EAAA,QAAA,EAAA,MAAA,EAAQ,UAAU,IAAK,EAAA,CAAA;AAAA,MAEvD,aAAa,CAAU,MAAA,qBAAA,GAAA,CAAC,SAAW,EAAA,EAAA,GAAG,QAAQ,KAAc,EAAA,CAAA;AAAA,MAC5D,QAAA,EAAU,CAAC,CAAA,EAAG,IAAS,KAAA;AACrB,QAAA,QAAA,CAAS,IAAK,CAAA;AAAA;AAChB;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/SortMethodSelector/SortMethodSelector.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import FormControl from '@material-ui/core/FormControl';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
@@ -16,19 +16,21 @@ const SortMethodSelector = ({
   handleSortMethodChange
 }) => {
   const classes = useStyles();
-  return /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(FormControl, { fullWidth: true, children: /* @__PURE__ */ jsxs(
     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")
-  ));
+      onChange: handleSortMethodChange,
+      children: [
+        /* @__PURE__ */ jsx(MenuItem, { value: 0, children: "Latest updated" }),
+        /* @__PURE__ */ jsx(MenuItem, { value: 1, children: "A-Z" }),
+        /* @__PURE__ */ jsx(MenuItem, { value: 2, children: "Z-A" }),
+        /* @__PURE__ */ jsx(MenuItem, { value: 3, children: "Most members" })
+      ]
+    }
+  ) });
 };
 
 export { SortMethodSelector };

package/dist/components/SortMethodSelector/SortMethodSelector.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortMethodSelector.esm.js","sources":["../../../src/components/SortMethodSelector/SortMethodSelector.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ChangeEvent, ReactNode } from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles({\n  select: {\n    fontSize: 'xx-large',\n    fontWeight: 'bold',\n    width: '16rem',\n  },\n});\n\ntype Props = {\n  sortMethodNbr: number;\n  handleSortMethodChange:\n    | ((\n        event: ChangeEvent<{ name?: string | undefined; value: unknown }>,\n        child: ReactNode,\n      ) => void)\n    | undefined;\n};\n\nexport const SortMethodSelector = ({\n  sortMethodNbr,\n  handleSortMethodChange,\n}: Props) => {\n  const classes = useStyles();\n  return (\n    <FormControl fullWidth>\n      <Select\n        className={classes.select}\n        disableUnderline\n        value={sortMethodNbr}\n        onChange={handleSortMethodChange}\n      >\n        <MenuItem value={0}>Latest updated</MenuItem>\n        <MenuItem value={1}>A-Z</MenuItem>\n        <MenuItem value={2}>Z-A</MenuItem>\n        <MenuItem value={3}>Most members</MenuItem>\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,MAAQ,EAAA;AAAA,IACN,QAAU,EAAA,UAAA;AAAA,IACV,UAAY,EAAA,MAAA;AAAA,IACZ,KAAO,EAAA;AAAA;AAEX,CAAC,CAAA;AAYM,MAAM,qBAAqB,CAAC;AAAA,EACjC,aAAA;AAAA,EACA;AACF,CAAa,KAAA;AACX,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,WAAY,EAAA,EAAA,SAAA,EAAS,IACpB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,MAAA;AAAA,MACnB,gBAAgB,EAAA,IAAA;AAAA,MAChB,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA;AAAA,KAAA;AAAA,oBAET,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAA,EAAG,gBAAc,CAAA;AAAA,oBACjC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAA,EAAG,KAAG,CAAA;AAAA,oBACtB,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAA,EAAG,KAAG,CAAA;AAAA,oBACtB,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAA,EAAG,cAAY;AAAA,GAEpC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SortMethodSelector.esm.js","sources":["../../../src/components/SortMethodSelector/SortMethodSelector.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ChangeEvent, ReactNode } from 'react';\nimport FormControl from '@material-ui/core/FormControl';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Select from '@material-ui/core/Select';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles({\n  select: {\n    fontSize: 'xx-large',\n    fontWeight: 'bold',\n    width: '16rem',\n  },\n});\n\ntype Props = {\n  sortMethodNbr: number;\n  handleSortMethodChange:\n    | ((\n        event: ChangeEvent<{ name?: string | undefined; value: unknown }>,\n        child: ReactNode,\n      ) => void)\n    | undefined;\n};\n\nexport const SortMethodSelector = ({\n  sortMethodNbr,\n  handleSortMethodChange,\n}: Props) => {\n  const classes = useStyles();\n  return (\n    <FormControl fullWidth>\n      <Select\n        className={classes.select}\n        disableUnderline\n        value={sortMethodNbr}\n        onChange={handleSortMethodChange}\n      >\n        <MenuItem value={0}>Latest updated</MenuItem>\n        <MenuItem value={1}>A-Z</MenuItem>\n        <MenuItem value={2}>Z-A</MenuItem>\n        <MenuItem value={3}>Most members</MenuItem>\n      </Select>\n    </FormControl>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,MAAQ,EAAA;AAAA,IACN,QAAU,EAAA,UAAA;AAAA,IACV,UAAY,EAAA,MAAA;AAAA,IACZ,KAAO,EAAA;AAAA;AAEX,CAAC,CAAA;AAYM,MAAM,qBAAqB,CAAC;AAAA,EACjC,aAAA;AAAA,EACA;AACF,CAAa,KAAA;AACX,EAAA,MAAM,UAAU,SAAU,EAAA;AAC1B,EACE,uBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,SAAA,EAAS,IACpB,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,MAAA;AAAA,MACnB,gBAAgB,EAAA,IAAA;AAAA,MAChB,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,sBAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAc,EAAA,gBAAA,EAAA,CAAA;AAAA,wBACjC,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAG,EAAA,KAAA,EAAA,CAAA;AAAA,wBACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAG,EAAA,KAAA,EAAA,CAAA;AAAA,wBACtB,GAAA,CAAA,QAAA,EAAA,EAAS,KAAO,EAAA,CAAA,EAAG,QAAY,EAAA,cAAA,EAAA;AAAA;AAAA;AAAA,GAEpC,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/SortView/SortView.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import { Content, SupportButton } from '@backstage/core-components';
 import { AddProjectDialog } from '../AddProjectDialog/AddProjectDialog.esm.js';
 import { ProjectPreview } from '../ProjectPreview/ProjectPreview.esm.js';
@@ -117,59 +118,69 @@ const SortView = (props) => {
     );
   };
   if (catalogEntities.error)
-    return /* @__PURE__ */ React.createElement(Alert, { severity: "error" }, catalogEntities.error.message);
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: 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);
+    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: bazaarProjects.error.message });
+  return /* @__PURE__ */ jsxs(Content, { noPadding: true, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
+      /* @__PURE__ */ jsx(
+        SortMethodSelector,
+        {
+          sortMethodNbr,
+          handleSortMethodChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          className: classes.search,
+          value: searchValue,
+          onChange: (newSortMethod) => {
+            setSearchValue(newSortMethod);
+          },
+          onCancelSearch: () => {
+            setSearchValue("");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: classes.button,
+          variant: "contained",
+          color: "primary",
+          onClick: () => {
+            setOpenAdd(true);
+          },
+          children: "Add project"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AddProjectDialog,
+        {
+          catalogEntities: unlinkedCatalogEntities || [],
+          handleClose: () => {
+            setOpenAdd(false);
+          },
+          open: openAdd,
+          fetchBazaarProjects,
+          fetchCatalogEntities
+        }
+      ),
+      /* @__PURE__ */ jsx(SupportButton, {})
+    ] }),
+    /* @__PURE__ */ jsx(
+      ProjectPreview,
+      {
+        bazaarProjects: getSearchResults() || [],
+        fetchBazaarProjects,
+        catalogEntities: unlinkedCatalogEntities || [],
+        gridSize: fullWidth ? 2 : 4,
+        height: fullHeight ? "large" : "small"
       }
-    },
-    "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 }));
+    ),
+    /* @__PURE__ */ jsx(Content, { noPadding: true, className: classes.container })
+  ] });
 };
 
 export { SortView };