fixed entityRef bug and added functionality to add community link

Signed-off-by: Lykke Axlin <lykkeaxlin@hotmail.com>

Co-authored-by: klaraab <klarabroman@live.se>

plugins/bazaar/src/api.ts

@@ -35,6 +35,7 @@ export interface BazaarApi {
   updateMetadata(
     entity: Entity,
     name: string,
+    community: string,
     announcement: string,
     status: Status,
   ): Promise<any>;
@@ -73,6 +74,7 @@ export class BazaarClient implements BazaarApi {
   async updateMetadata(
     entity: Entity,
     name: string,
+    community: string,
     announcement: string,
     status: Status,
   ): Promise<any> {
@@ -88,6 +90,7 @@ export class BazaarClient implements BazaarApi {
       body: JSON.stringify({
         name: name,
         announcement: announcement,
+        community: community,
         status: status,
       }),
     }).then(resp => resp.json());

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

@@ -49,6 +49,7 @@ export const AddProjectDialog = ({
 
   const defaultValues = {
     title: 'Add project',
+    community: '',
     announcement: '',
     status: 'proposed' as Status,
   };
@@ -66,6 +67,7 @@ export const AddProjectDialog = ({
     const bazaarProject: BazaarProject = {
       entityRef: stringifyEntityRef(selectedEntity!),
       name: selectedEntity!.metadata.name,
+      community: formValues.community,
       announcement: formValues.announcement,
       status: formValues.status,
       updatedAt: new Date().toISOString(),
@@ -82,6 +84,7 @@ export const AddProjectDialog = ({
     await bazaarApi.updateMetadata(
       selectedEntity!,
       selectedEntity!.metadata.name,
+      formValues.community,
       formValues.announcement,
       formValues.status,
     );

plugins/bazaar/src/components/EditProjectDialog/EditProjectDialog.tsx

@@ -39,6 +39,7 @@ export const EditProjectDialog = ({
 }: Props) => {
   const [defaultValues, setDefaultValues] = useState<FormValues>({
     announcement: bazaarProject.announcement,
+    community: bazaarProject.community,
     status: bazaarProject.status,
   });
 
@@ -47,6 +48,7 @@ export const EditProjectDialog = ({
   useEffect(() => {
     setDefaultValues({
       announcement: bazaarProject.announcement,
+      community: bazaarProject.community,
       status: bazaarProject.status,
     });
   }, [bazaarProject]);
@@ -57,6 +59,7 @@ export const EditProjectDialog = ({
     const updateResponse = await bazaarApi.updateMetadata(
       entity!,
       entity.metadata.name,
+      formValues.community,
       formValues.announcement,
       formValues.status,
     );
@@ -65,6 +68,7 @@ export const EditProjectDialog = ({
       setBazaarProject((oldProject: BazaarProject) => {
         return {
           ...oldProject,
+          community: formValues.community,
           announcement: formValues.announcement,
           status: formValues.status,
         };

plugins/bazaar/src/components/EntityBazaarInfoCard/EntityBazaarInfoCard.tsx

@@ -91,6 +91,7 @@ export const EntityBazaarInfoCard = () => {
   const [bazaarProject, setBazaarProject] = useState<BazaarProject>({
     entityRef: '',
     name: '',
+    community: '',
     announcement: '',
     status: 'proposed',
     updatedAt: '',
@@ -129,6 +130,7 @@ export const EntityBazaarInfoCard = () => {
       setBazaarProject({
         entityRef: data[0].entityRef,
         name: data[0].name,
+        community: data[0].community,
         announcement: data[0].announcement,
         status: data[0].status,
         updatedAt: data[0].updatedAt,
@@ -188,6 +190,8 @@ export const EntityBazaarInfoCard = () => {
     {
       label: 'Community',
       icon: <ChatIcon />,
+      href: bazaarProject.community,
+      disabled: bazaarProject.community === '',
     },
     {
       label: isMember ? 'Leave' : 'Join',

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

@@ -20,30 +20,30 @@ import { TextField } from '@material-ui/core';
 import { FormValues } from '../../types';
 
 type Props = {
-  inputType: string;
-  error: FieldError | undefined;
+  inputType: 'announcement' | 'community';
+  error?: FieldError | undefined;
   control: Control<FormValues, object>;
-  name: 'announcement' | 'status';
-  helperText: string;
+  helperText?: string;
   placeholder?: string;
+  required: boolean;
 };
 
 export const InputField = ({
   inputType,
   error,
   control,
-  name,
   helperText,
   placeholder,
+  required,
 }: Props) => {
   const label = inputType.charAt(0).toUpperCase() + inputType.slice(1);
 
   return (
     <Controller
-      name={name}
+      name={inputType}
       control={control}
       rules={{
-        required: true,
+        required: required,
       }}
       render={({ field }) => (
         <TextField

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

@@ -144,10 +144,17 @@ export const ProjectDialog = ({
           <InputField
             error={errors.announcement}
             control={control}
+            required
             inputType="announcement"
             helperText="please enter an announcement"
             placeholder="Describe who you are and what skills you are looking for"
-            name="announcement"
+          />
+
+          <InputField
+            control={control}
+            required={false}
+            inputType="community"
+            placeholder="Community link to e.g. Teams or Discord"
           />
 
           <InputSelector

plugins/bazaar/src/components/SortView/SortView.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Content,
   ContentHeader,
@@ -26,7 +26,11 @@ import { AlertBanner } from '../AlertBanner';
 import { ProjectPreview } from '../ProjectPreview/ProjectPreview';
 import { Button, makeStyles, Link } from '@material-ui/core';
 import { useAsync } from 'react-use';
-import { Entity, EntityRef } from '@backstage/catalog-model';
+import {
+  Entity,
+  EntityRef,
+  stringifyEntityRef,
+} from '@backstage/catalog-model';
 import { useApi } from '@backstage/core-plugin-api';
 import {
   catalogApiRef,
@@ -85,6 +89,7 @@ export const SortView = () => {
         name: project.name,
         status: project.status,
         announcement: project.announcement,
+        community: project.community,
         updatedAt: project.updated_at,
       });
 
@@ -95,9 +100,7 @@ export const SortView = () => {
     setBazaarProjects(dbProjects);
     setCatalogEntities(
       entities.items.filter((entity: Entity) => {
-        const catalogEntityRef = `${entity.metadata.namespace}/${entity.kind}/${entity.metadata.name}`;
-
-        return !bazaarProjectRefs.includes(catalogEntityRef);
+        return !bazaarProjectRefs.includes(stringifyEntityRef(entity));
       }),
     );
   });

plugins/bazaar/src/types.ts

@@ -27,6 +27,7 @@ export type Status = 'ongoing' | 'proposed';
 export type BazaarProject = {
   name: string;
   entityRef: EntityRef;
+  community: string;
   status: Status;
   announcement: string;
   updatedAt: string;
@@ -34,5 +35,6 @@ export type BazaarProject = {
 
 export type FormValues = {
   announcement: string;
+  community: string;
   status: string;
 };