@backstage-community/plugin-bazaar 0.2.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +1759 -0
  2. package/README.md +155 -0
  3. package/dist/esm/index-CM8Pdxty.esm.js +92 -0
  4. package/dist/esm/index-CM8Pdxty.esm.js.map +1 -0
  5. package/dist/index.d.ts +49 -0
  6. package/dist/index.esm.js +1750 -0
  7. package/dist/index.esm.js.map +1 -0
  8. package/package.json +71 -0
package/README.md ADDED
@@ -0,0 +1,155 @@
1
+ # @backstage-community/plugin-bazaar
2
+
3
+ ### What is the Bazaar?
4
+
5
+ The Bazaar is a place where teams can propose projects for cross-functional team development. Essentially, it’s a marketplace for internal projects suitable for [Inner Sourcing](https://en.wikipedia.org/wiki/Inner_source). By “Inner Sourcing,” we mean projects that are developed internally within a company but follow Open Source best practices.
6
+
7
+ ### Why?
8
+
9
+ Many companies today have a high need to increase the ease of cross-team cooperation. In large organizations, engineers often have limited ways of discovering or announcing projects that could benefit from a wider development effort in terms of different expertise, experiences, and teams spread across the organization. With no good way to find these existing internal projects to join, the possibility of working with Inner Sourcing practices suffers.
10
+
11
+ ### How?
12
+
13
+ The Bazaar allows engineers and teams to open up and announce their new and exciting projects for transparent cooperation in other parts of larger organizations. The Bazaar ensures that new Inner Sourcing-friendly projects gain visibility through Backstage and a way for interested engineers to show their interest and, in the future, contribute with their specific skill set. The Bazaar also provides an easy way to manage, catalog, and browse these Inner Sourcing-friendly projects and components.
14
+
15
+ # Note
16
+
17
+ You will **need** to also perform the installation instructions in [Bazaar Backend](https://github.com/backstage/backstage/tree/master/plugins/bazaar-backend) in order for this plugin to work.
18
+
19
+ ## Getting Started
20
+
21
+ First install the plugin into your app:
22
+
23
+ ```bash
24
+ # From your Backstage root directory
25
+ yarn --cwd packages/app add @backstage-community/plugin-bazaar
26
+ ```
27
+
28
+ Modify your app routes in `packages/app/src/App.tsx` to include the `Bazaar` component exported from the plugin, for example:
29
+
30
+ ```diff
31
+ + import { BazaarPage } from '@backstage-community/plugin-bazaar';
32
+
33
+ const routes = (
34
+
35
+ <FlatRoutes>
36
+ ...
37
+ + <Route path="bazaar" element={<BazaarPage />} />
38
+ {/* other routes... */}
39
+
40
+ ```
41
+
42
+ `BazaarPage` can be given the optional properties `fullHeight` and `fullWidth` which are used to adjust the cards styling to fit more or less on the page as required (both default to `true`).
43
+
44
+ Add a **Bazaar icon** to the Sidebar to easily access the Bazaar. In `packages/app/src/components/Root.tsx` add:
45
+
46
+ ```diff
47
+ + import StorefrontIcon from '@material-ui/icons/Storefront';
48
+
49
+ <SidebarDivider />
50
+ <SidebarScrollWrapper>
51
+ + <SidebarItem icon={StorefrontIcon} to="bazaar" text="Bazaar" />
52
+ {/* ...other sidebar-items */}
53
+ ```
54
+
55
+ Add a **Bazaar card** to the overview tab on the `packages/app/src/components/catalog/EntityPage.tsx` add:
56
+
57
+ ```diff
58
+ + import { EntityBazaarInfoCard, isBazaarAvailable } from '@backstage-community/plugin-bazaar';
59
+
60
+ const overviewContent = (
61
+
62
+ <Grid item md={8} xs={12}>
63
+ <EntityAboutCard variant="gridItem" />
64
+ </Grid>
65
+ + <EntitySwitch>
66
+ + <EntitySwitch.Case if={isBazaarAvailable}>
67
+ + <Grid item sm={6}>
68
+ + <EntityBazaarInfoCard />
69
+ + </Grid>
70
+ + </EntitySwitch.Case>
71
+ + </EntitySwitch>
72
+
73
+ {/* ...other entity-cards */}
74
+ ```
75
+
76
+ Add a **Bazaar overview card** to the homepage that displays either the latest projects or random projects. In `packages/app/src/components/home/HomePage.tsx` add:
77
+
78
+ ```diff
79
+ + import { BazaarOverviewCard } from '@backstage-community/plugin-bazaar';
80
+
81
+ export const homePage = (
82
+
83
+ <Page themeId="home">
84
+ <Content>
85
+ <Grid container spacing={3}>
86
+
87
+ + <Grid item xs={12} md={6}>
88
+ + <BazaarOverviewCard order='latest'/>
89
+ + </Grid>
90
+
91
+ + <Grid item xs={12} >
92
+ + <BazaarOverviewCard title='My Orgs Projects' order='random' fullWidth fullHeight />
93
+ + </Grid>
94
+
95
+ {/* ...other homepage items */}
96
+ ```
97
+
98
+ The property `title` is optional and can be used to customize the title in the card header. If no title is submitted the default titles `Bazaar Random Projects` or `Bazaar Latest Projects` are displayed.
99
+
100
+ The properties `fullHeight` and `fullWidth` are also optional and can be used to adjust the cards styling.
101
+
102
+ # How does the Bazaar work?
103
+
104
+ ### Layout
105
+
106
+ The latest modified Bazaar projects are displayed in the Bazaar landing page, located at the Bazaar icon in the sidebar. Each project is represented as a card containing its most relevant data to give an overview of the project. It is also possible to sort in alphabetical order or on the number of members. Here you can also search or add project to the Bazaar.
107
+
108
+ ![home](media/layout.png)
109
+
110
+ The "BazaarOverviewCard" can be displayed in Backstage homepage.
111
+
112
+ ![home](media/overviewCard.png)
113
+
114
+ ### Workflow
115
+
116
+ To add a project to the bazaar, simply click on the `add-project` button and fill in the form.
117
+
118
+ The following fields are mandatory:
119
+
120
+ - title - title of the project
121
+ - description - present your idea and what skills you are looking for
122
+ - status - whether or not the project has started
123
+ - size - small, medium or large
124
+ - responsible - main contact person of the project
125
+
126
+ The other fields are:
127
+
128
+ - project - link Bazaar project to existing entity in the catalog
129
+ - community link - link to where the project members can communicate, e.g. Teams or Discord link
130
+ - docs link - link to visit the documentation of the project
131
+ - start date
132
+ - end date
133
+
134
+ When clicking on a Bazaar project a card containing the Bazaar information will show up. If the Bazaar project is linked to an entity, the card is also visible on that entity's EntityPage. From that card it is possible to either link or unlink an entity to a project, edit or delete the project and join the project if it seems interesting to you. Once you have joined a project, you will get access to the community link if it exists.
135
+
136
+ ![home](media/demo.gif)
137
+
138
+ ## Future work and ideas
139
+
140
+ - Workflow
141
+
142
+ - Make it possible for multiple Bazaar project to link to the same catalog entity
143
+
144
+ - Bazaar landing page
145
+
146
+ - Add a tab 'My page', where your personal data is displayed. For example: your projects and its latest activities etc.
147
+
148
+ - Bazaar tab on the EntityPage
149
+
150
+ - Fill Bazaar-tab with more content, for example images and achievements
151
+ - Show all the members that have joined the project
152
+
153
+ - Dialogues
154
+
155
+ - Extend the dialogue for adding a project with more fields, e.g. the possibility to add images
package/dist/esm/index-CM8Pdxty.esm.js ADDED
@@ -0,0 +1,92 @@
1
+ import React from 'react';
2
+ import { InfoCard, Link, Header, RoutedTabs } from '@backstage/core-components';
3
+ import { SortView } from '../index.esm.js';
4
+ import Grid from '@material-ui/core/Grid';
5
+ import Typography from '@material-ui/core/Typography';
6
+ import { makeStyles } from '@material-ui/core/styles';
7
+ import '@backstage/core-plugin-api';
8
+ import '@backstage/catalog-model';
9
+ import '@backstage/errors';
10
+ import '@material-ui/core/Card';
11
+ import '@material-ui/core/CardActionArea';
12
+ import '@material-ui/core/CardContent';
13
+ import '@material-ui/core/Dialog';
14
+ import 'luxon';
15
+ import '@material-ui/core/CardHeader';
16
+ import '@material-ui/core/Divider';
17
+ import '@material-ui/core/IconButton';
18
+ import '@material-ui/icons/Edit';
19
+ import '@material-ui/icons/Chat';
20
+ import '@material-ui/icons/PersonAdd';
21
+ import '@material-ui/icons/InsertLink';
22
+ import '@material-ui/icons/Dashboard';
23
+ import '@material-ui/icons/Close';
24
+ import '@material-ui/icons/LinkOff';
25
+ import '@material-ui/icons/Description';
26
+ import '@material-ui/core/Button';
27
+ import 'react-hook-form';
28
+ import '@material-ui/core/TextField';
29
+ import '@material-ui/core/InputLabel';
30
+ import '@material-ui/core/MenuItem';
31
+ import '@material-ui/core/FormControl';
32
+ import '@material-ui/core/Select';
33
+ import '@material-ui/pickers/DatePicker';
34
+ import '@material-ui/pickers/MuiPickersUtilsProvider';
35
+ import '@date-io/luxon';
36
+ import '@material-ui/icons/Clear';
37
+ import '@material-ui/core/DialogTitle';
38
+ import '@material-ui/core/DialogContent';
39
+ import '@material-ui/core/DialogActions';
40
+ import '@material-ui/icons/ExitToApp';
41
+ import '@material-ui/lab/Alert';
42
+ import 'react-use/esm/useAsyncFn';
43
+ import '@backstage/plugin-catalog-react';
44
+ import '@material-ui/core/styles/makeStyles';
45
+ import '@material-ui/lab/Autocomplete';
46
+ import '@material-ui/core/Box';
47
+ import '@material-ui/core/TablePagination';
48
+ import '@material-ui/icons/Storefront';
49
+ import 'material-ui-search-bar';
50
+
51
+ const useStyles = makeStyles({
52
+ subheader: {
53
+ fontWeight: "bold"
54
+ }
55
+ });
56
+ const About = () => {
57
+ const classes = useStyles();
58
+ return /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 4 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 5 }, /* @__PURE__ */ React.createElement(InfoCard, { title: "About Bazaar" }, /* @__PURE__ */ React.createElement(Typography, { className: classes.subheader, variant: "body1" }, "What is the Bazaar?"), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "The Bazaar is a place where teams can propose projects for cross-functional team development. Essentially a marketplace for internal projects suitable for", " ", /* @__PURE__ */ React.createElement(
59
+ Link,
60
+ {
61
+ target: "_blank",
62
+ to: "https://en.wikipedia.org/wiki/Inner_source"
63
+ },
64
+ "Inner Sourcing"
65
+ ), '. With "Inner Sourcing", we mean projects that are developed internally within a company, but with Open Source best practices.'), /* @__PURE__ */ React.createElement(Typography, { className: classes.subheader, variant: "body1" }, "Why?"), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "Many companies today are of high need to increase the ease of cross-team cooperation. In large organizations, engineers often have limited ways of discovering or announcing the projects which could benefit from a wider development effort in terms of different expertise, experiences, and teams spread across the organization. With no good way to find these existing internal projects to join, the possibility of working with Inner Sourcing practices suffers."), /* @__PURE__ */ React.createElement(Typography, { className: classes.subheader, variant: "body1" }, "How?"), /* @__PURE__ */ React.createElement(Typography, { paragraph: true }, "The Bazaar allows engineers and teams to open up and announce their new and exciting projects for transparent cooperation in other parts of larger organizations. The Bazaar ensures that new Inner Sourcing friendly projects gain visibility through Backstage and a way for interested engineers to show their interest and in the future contribute with their specific skill set. The Bazaar also provides an easy way to manage, catalog, and browse these Inner Sourcing friendly projects and components."))));
66
+ };
67
+
68
+ const HomePage = (props) => {
69
+ const { title, subtitle, fullWidth, fullHeight } = props;
70
+ const tabContent = [
71
+ {
72
+ path: "/",
73
+ title: "Home",
74
+ children: /* @__PURE__ */ React.createElement(SortView, { fullWidth, fullHeight })
75
+ },
76
+ {
77
+ path: "/about",
78
+ title: "About",
79
+ children: /* @__PURE__ */ React.createElement(About, null)
80
+ }
81
+ ];
82
+ return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
83
+ Header,
84
+ {
85
+ title: title || "Bazaar",
86
+ subtitle: subtitle || "Marketplace for inner source projects"
87
+ }
88
+ ), /* @__PURE__ */ React.createElement(RoutedTabs, { routes: tabContent }));
89
+ };
90
+
91
+ export { HomePage };
92
+ //# sourceMappingURL=index-CM8Pdxty.esm.js.map
package/dist/esm/index-CM8Pdxty.esm.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-CM8Pdxty.esm.js","sources":["../../src/components/About/About.tsx","../../src/components/HomePage/HomePage.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 Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { InfoCard, Link } from '@backstage/core-components';\n\nconst useStyles = makeStyles({\n subheader: {\n fontWeight: 'bold',\n },\n});\n\nexport const About = () => {\n const classes = useStyles();\n return (\n <Grid container spacing={4}>\n <Grid item xs={5}>\n <InfoCard title=\"About Bazaar\">\n <Typography className={classes.subheader} variant=\"body1\">\n What is the Bazaar?\n </Typography>\n <Typography paragraph>\n The Bazaar is a place where teams can propose projects for\n cross-functional team development. Essentially a marketplace for\n internal projects suitable for{' '}\n <Link\n target=\"_blank\"\n to=\"https://en.wikipedia.org/wiki/Inner_source\"\n >\n Inner Sourcing\n </Link>\n . With \"Inner Sourcing\", we mean projects that are developed\n internally within a company, but with Open Source best practices.\n </Typography>\n <Typography className={classes.subheader} variant=\"body1\">\n Why?\n </Typography>\n <Typography paragraph>\n Many companies today are of high need to increase the ease of\n cross-team cooperation. In large organizations, engineers often have\n limited ways of discovering or announcing the projects which could\n benefit from a wider development effort in terms of different\n expertise, experiences, and teams spread across the organization.\n With no good way to find these existing internal projects to join,\n the possibility of working with Inner Sourcing practices suffers.\n </Typography>\n <Typography className={classes.subheader} variant=\"body1\">\n How?\n </Typography>\n <Typography paragraph>\n The Bazaar allows engineers and teams to open up and announce their\n new and exciting projects for transparent cooperation in other parts\n of larger organizations. The Bazaar ensures that new Inner Sourcing\n friendly projects gain visibility through Backstage and a way for\n interested engineers to show their interest and in the future\n contribute with their specific skill set. The Bazaar also provides\n an easy way to manage, catalog, and browse these Inner Sourcing\n friendly projects and components.\n </Typography>\n </InfoCard>\n </Grid>\n </Grid>\n );\n};\n","/*\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 { Header, RoutedTabs } from '@backstage/core-components';\nimport { SortView } from '../SortView';\nimport { About } from '../About';\n\n/** @public */\nexport type HomePageProps = {\n title?: string;\n subtitle?: string;\n fullWidth?: boolean;\n fullHeight?: boolean;\n};\n\nexport const HomePage = (props: HomePageProps) => {\n const { title, subtitle, fullWidth, fullHeight } = props;\n\n const tabContent = [\n {\n path: '/',\n title: 'Home',\n children: <SortView fullWidth={fullWidth} fullHeight={fullHeight} />,\n },\n {\n path: '/about',\n title: 'About',\n children: <About />,\n },\n ];\n\n return (\n <div>\n <Header\n title={title || 'Bazaar'}\n subtitle={subtitle || 'Marketplace for inner source projects'}\n />\n <RoutedTabs routes={tabContent} />\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,SAAW,EAAA;AAAA,IACT,UAAY,EAAA,MAAA;AAAA,GACd;AACF,CAAC,CAAA,CAAA;AAEM,MAAM,QAAQ,MAAM;AACzB,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,SAAS,EAAA,IAAA,EAAC,OAAS,EAAA,CAAA,EAAA,kBACtB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,IAAI,EAAA,IAAA,EAAC,EAAI,EAAA,CAAA,EAAA,sCACZ,QAAS,EAAA,EAAA,KAAA,EAAM,cACd,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,SAAA,EAAW,OAAQ,EAAA,OAAA,EAAA,EAAQ,qBAE1D,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,SAAS,EAAA,IAAA,EAAA,EAAC,8JAGW,GAC/B,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,MAAO,EAAA,QAAA;AAAA,MACP,EAAG,EAAA,4CAAA;AAAA,KAAA;AAAA,IACJ,gBAAA;AAAA,GAEM,EAAA,gIAGT,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,SAAW,EAAA,OAAA,CAAQ,SAAW,EAAA,OAAA,EAAQ,WAAQ,MAE1D,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,WAAS,IAAC,EAAA,EAAA,4cAQtB,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,SAAA,EAAW,OAAQ,CAAA,SAAA,EAAW,SAAQ,OAAQ,EAAA,EAAA,MAE1D,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,SAAS,EAAA,IAAA,EAAA,EAAC,mfAStB,CACF,CACF,CACF,CAAA,CAAA;AAEJ,CAAA;;AClDa,MAAA,QAAA,GAAW,CAAC,KAAyB,KAAA;AAChD,EAAA,MAAM,EAAE,KAAA,EAAO,QAAU,EAAA,SAAA,EAAW,YAAe,GAAA,KAAA,CAAA;AAEnD,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB;AAAA,MACE,IAAM,EAAA,GAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,MACP,QAAU,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAsB,UAAwB,EAAA,CAAA;AAAA,KACpE;AAAA,IACA;AAAA,MACE,IAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,MACP,QAAA,sCAAW,KAAM,EAAA,IAAA,CAAA;AAAA,KACnB;AAAA,GACF,CAAA;AAEA,EAAA,2CACG,KACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAO,KAAS,IAAA,QAAA;AAAA,MAChB,UAAU,QAAY,IAAA,uCAAA;AAAA,KAAA;AAAA,GAExB,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,MAAA,EAAQ,YAAY,CAClC,CAAA,CAAA;AAEJ;;;;"}
package/dist/index.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ /// <reference types="react" />
2
+ import * as React from 'react';
3
+ import React__default from 'react';
4
+ import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
5
+ import { ApiHolder } from '@backstage/core-plugin-api';
6
+ import { Entity } from '@backstage/catalog-model';
7
+
8
+ /** @public */
9
+ type HomePageProps = {
10
+ title?: string;
11
+ subtitle?: string;
12
+ fullWidth?: boolean;
13
+ fullHeight?: boolean;
14
+ };
15
+
16
+ /** @public */
17
+ declare const bazaarPlugin: _backstage_core_plugin_api.BackstagePlugin<{
18
+ root: _backstage_core_plugin_api.RouteRef<undefined>;
19
+ }, {}, {}>;
20
+ /** @public */
21
+ declare const BazaarPage: (props: HomePageProps) => React.JSX.Element;
22
+
23
+ /** @public */
24
+ declare const isBazaarAvailable: (entity: Entity, context: {
25
+ apis: ApiHolder;
26
+ }) => Promise<boolean>;
27
+
28
+ /** @public */
29
+ type BazaarOverviewCardProps = {
30
+ title?: string;
31
+ order: 'latest' | 'random';
32
+ fullWidth?: boolean;
33
+ fullHeight?: boolean;
34
+ };
35
+ /** @public */
36
+ declare const BazaarOverviewCard: (props: BazaarOverviewCardProps) => React__default.JSX.Element;
37
+
38
+ /** @public */
39
+ declare const EntityBazaarInfoCard: () => React__default.JSX.Element | null;
40
+
41
+ /** @public */
42
+ type SortViewProps = {
43
+ fullWidth?: boolean;
44
+ fullHeight?: boolean;
45
+ };
46
+ /** @public */
47
+ declare const SortView: (props: SortViewProps) => React__default.JSX.Element;
48
+
49
+ export { BazaarOverviewCard, type BazaarOverviewCardProps, BazaarPage, type HomePageProps as BazaarPageProps, EntityBazaarInfoCard, SortView, type SortViewProps, bazaarPlugin, isBazaarAvailable };