Merge pull request #17293 from GustavoAdrianGimenez/feature/bazaar-docs-field

Bazaar plugin: Add docs column to metadata table

.changeset/clever-plums-decide.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-bazaar-backend': patch
+'@backstage/plugin-bazaar': patch
+---
+
+Added the `docs` parameter (optional) to link the project documentation

plugins/bazaar-backend/migrations/20230407142544_add_docs_to_metadata.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-check
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.up = async function up(knex) {
+  await knex.schema.alterTable('metadata', table => {
+    table.text('docs').comment('The link to the project docs (optional)');
+  });
+};
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+exports.down = async function down(knex) {
+  await knex.schema.alterTable('metadata', table => {
+    table.dropColumn('docs');
+  });
+};

plugins/bazaar-backend/src/service/DatabaseHandler.test.ts

@@ -29,6 +29,7 @@ const bazaarProject: any = {
   endDate: null,
   size: 'small',
   responsible: 'r',
+  docs: '',
 };
 
 jest.setTimeout(60_000);
@@ -75,6 +76,7 @@ describe('DatabaseHandler', () => {
         end_date: bazaarProject.endDate,
         size: bazaarProject.size,
         responsible: bazaarProject.responsible,
+        docs: bazaarProject.docs,
       });
 
       // Add a member to the project
@@ -94,6 +96,7 @@ describe('DatabaseHandler', () => {
       expect(res[0].end_date).toEqual(null);
       expect(res[0].size).toEqual('small');
       expect(res[0].responsible).toEqual('r');
+      expect(res[0].docs).toEqual('');
       expect(
         res[0].members_count === '1' || res[0].members_count === 1,
       ).toBeTruthy();

plugins/bazaar-backend/src/service/DatabaseHandler.ts

@@ -61,6 +61,7 @@ export class DatabaseHandler {
     'metadata.start_date',
     'metadata.end_date',
     'metadata.responsible',
+    'metadata.docs',
   ];
 
   async getMembers(id: string) {
@@ -120,6 +121,7 @@ export class DatabaseHandler {
       entityRef,
       community,
       description,
+      docs,
       status,
       size,
       startDate,
@@ -133,6 +135,7 @@ export class DatabaseHandler {
         entity_ref: entityRef,
         community,
         description,
+        docs,
         status,
         updated_at: new Date().toISOString(),
         size,
@@ -150,6 +153,7 @@ export class DatabaseHandler {
       entityRef,
       community,
       description,
+      docs,
       status,
       size,
       startDate,
@@ -162,6 +166,7 @@ export class DatabaseHandler {
       entity_ref: entityRef,
       description,
       community,
+      docs,
       status,
       updated_at: new Date().toISOString(),
       size,

plugins/bazaar/README.md

@@ -127,6 +127,7 @@ The other fields are:
 
 - project - link Bazaar project to existing entity in the catalog
 - community link - link to where the project members can communicate, e.g. Teams or Discord link
+- docs link - link to visit the documentation of the project
 - start date
 - end date
 

plugins/bazaar/src/components/AddProjectDialog/AddProjectDialog.tsx

@@ -45,6 +45,7 @@ export const AddProjectDialog = ({
     title: '',
     community: '',
     description: '',
+    docs: '',
     status: 'proposed' as Status,
     size: 'medium' as Size,
     responsible: '',

plugins/bazaar/src/components/EntityBazaarInfoContent/EntityBazaarInfoContent.tsx

@@ -26,6 +26,7 @@ import ChatIcon from '@material-ui/icons/Chat';
 import PersonAddIcon from '@material-ui/icons/PersonAdd';
 import DashboardIcon from '@material-ui/icons/Dashboard';
 import LinkOffIcon from '@material-ui/icons/LinkOff';
+import Description from '@material-ui/icons/Description';
 import { EditProjectDialog } from '../EditProjectDialog';
 import { useApi, identityApiRef } from '@backstage/core-plugin-api';
 import { BazaarProject, Member } from '../../types';
@@ -128,6 +129,12 @@ export const EntityBazaarInfoContent = ({
       href: bazaarProject?.community,
       disabled: bazaarProject?.community === '' || !isMember,
     },
+    {
+      label: 'Docs',
+      icon: <Description />,
+      href: bazaarProject?.docs,
+      disabled: bazaarProject?.docs === null || bazaarProject?.docs === '',
+    },
   ];
 
   const handleEditClose = () => {

plugins/bazaar/src/components/HomePageBazaarInfoCard/HomePageBazaarInfoCard.tsx

@@ -34,6 +34,7 @@ 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 { EditProjectDialog } from '../EditProjectDialog';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 import {
@@ -197,6 +198,13 @@ export const HomePageBazaarInfoCard = ({
       href: bazaarProject.value?.community,
       disabled: !bazaarProject.value?.community || !isMember,
     },
+    {
+      label: 'Docs',
+      icon: <Description />,
+      href: bazaarProject.value?.docs,
+      disabled:
+        bazaarProject.value?.docs === null || bazaarProject.value?.docs === '',
+    },
   ];
 
   const handleUnlinkSubmit = async () => {

plugins/bazaar/src/components/InputField/InputField.tsx

@@ -30,7 +30,7 @@ type Rules = {
 };
 
 type Props = {
-  inputType: 'description' | 'community' | 'responsible' | 'title';
+  inputType: 'description' | 'community' | 'responsible' | 'title' | 'docs';
   error?: FieldError | undefined;
   control: Control<FormValues, object>;
   helperText?: string;

plugins/bazaar/src/components/ProjectDialog/ProjectDialog.tsx

@@ -144,6 +144,18 @@ export const ProjectDialog = ({
             placeholder="Community link to e.g. Teams or Discord"
           />
 
+          <InputField
+            error={errors.docs}
+            control={control}
+            rules={{
+              required: false,
+              pattern: RegExp('^(https?)://'),
+            }}
+            inputType="docs"
+            helperText="Please enter a link starting with http/https"
+            placeholder="Project docs link"
+          />
+
           <DoubleDateSelector setValue={setValue} control={control} />
         </DialogContent>
 

plugins/bazaar/src/types.ts

@@ -39,6 +39,7 @@ export type BazaarProject = {
   startDate?: string | null;
   endDate?: string | null;
   responsible: string;
+  docs: string;
 };
 
 export type FormValues = {
@@ -50,4 +51,5 @@ export type FormValues = {
   startDate?: string | null;
   endDate?: string | null;
   responsible: string;
+  docs: string;
 };

plugins/bazaar/src/util/parseMethods.ts

@@ -30,6 +30,7 @@ export const parseBazaarProject = (metadata: any): BazaarProject => {
     startDate: metadata.start_date,
     endDate: metadata.end_date,
     responsible: metadata.responsible,
+    docs: metadata.docs,
   } as BazaarProject;
 };