Add docs input and link in bazaar plugin

Signed-off-by: GustavoAdrianGimenez <gustavoadriangimenez@gmail.com>

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;
 };