Use pretty type value for artifacts. Leverage v2 api (#567)

* Use pretty type value for artifacts. Leverage v2 api that includes engagement and project name

* remove get engagement by id for other widgets that now get that info from v2 api

* remove unused import. update browser list

Author: mcanoy

package-lock.json

@@ -10,28 +10,17 @@ import {
 } from '@patternfly/react-core';
 import {ReactComponent as CubesIcon} from '../../../assets/images/cubes.svg';
 import { Table, TableBody, TableHeader } from '@patternfly/react-table';
-import { Artifact, Engagement } from '../../../schemas/engagement';
+import { Artifact } from '../../../schemas/engagement';
 import { LinkOrSpan } from '../../link_or_span/link_or_span';
 import { Link } from 'react-router-dom';
 import CustomRowWrapper from '../../../components/custom_row_wrapper/custom_row_wrapper';
 export interface DwLastArtifactsProps {
   artifacts: Artifact[];
-  engagements: Partial<Engagement>[];
 }
 const columns = ['Artifact', 'Type', 'Engagement'];
 export const DwLastArtifacts = ({
   artifacts = [],
-  engagements = [],
 }: DwLastArtifactsProps) => {
-  const engagementsById = artifacts.reduce(
-    (acc, curr) => ({
-      ...acc,
-      [curr.engagement_uuid]: engagements.find(
-        e => e.uuid === curr.engagement_uuid
-      ),
-    }),
-    {}
-  );
   const rows = artifacts.map(artifact => {
     return [
       {
@@ -41,13 +30,13 @@ export const DwLastArtifacts = ({
           </LinkOrSpan>
         ),
       },
-      artifact?.type,
+      artifact?.pretty_type,
       {
         title: (
           <Link to={`/app/engagements/${artifact.engagement_uuid}#artifacts`}>
-            {engagementsById[artifact.engagement_uuid]?.customer_name +
+            {artifact?.customer_name +
               ' — ' +
-              engagementsById[artifact.engagement_uuid]?.project_name}
+              artifact?.project_name}
           </Link>
         ),
       },

src/components/dashboard/widgets/dw_last_artifact.tsx

@@ -11,24 +11,14 @@ import {ReactComponent as BroadcastIcon} from '../../../assets/images/broadcast-
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Artifact, Engagement } from '../../../schemas/engagement';
+import { Artifact } from '../../../schemas/engagement';
 import { LinkOrSpan } from '../../link_or_span/link_or_span';
 import CustomRowWrapper from '../../../components/custom_row_wrapper/custom_row_wrapper';
 export interface DwLastDemoProps {
   demos: Artifact[];
-  engagements: Partial<Engagement>[];
 }
 const columns = ['Demo', 'Engagement'];
-export function DwLastDemo({ demos = [], engagements = [] }: DwLastDemoProps) {
-  const engagementsById = demos.reduce(
-    (acc, curr) => ({
-      ...acc,
-      [curr.engagement_uuid]: engagements.find(
-        e => e.uuid === curr.engagement_uuid
-      ),
-    }),
-    {}
-  );
+export function DwLastDemo({ demos = [] }: DwLastDemoProps) {
   const rows = demos.map(demo => {
     return [
       {
@@ -39,8 +29,7 @@ export function DwLastDemo({ demos = [], engagements = [] }: DwLastDemoProps) {
       {
         title: (
           <Link to={`/app/engagements/${demo.engagement_uuid}`}>
-            {engagementsById[demo.engagement_uuid]?.customer_name}&nbsp;—&nbsp;
-            {engagementsById[demo.engagement_uuid]?.project_name}
+            {demo?.customer_name}&nbsp;—&nbsp;{demo?.project_name}
           </Link>
         ),
       },

src/components/dashboard/widgets/dw_last_demo.tsx

@@ -11,28 +11,17 @@ import {ReactComponent as HeartbeatIcon} from '../../../assets/images/heart-rate
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Artifact, Engagement } from '../../../schemas/engagement';
+import { Artifact } from '../../../schemas/engagement';
 import { LinkOrSpan } from '../../link_or_span/link_or_span';
 import CustomRowWrapper from '../../../components/custom_row_wrapper/custom_row_wrapper';
 
 export interface DwLastWeeklyReportProps {
   artifacts: Artifact[];
-  engagements: Partial<Engagement>[];
 }
 const columns = ['Weekly Report', 'Engagement'];
 export function DwLastWeeklyReport({
   artifacts = [],
-  engagements = [],
 }: DwLastWeeklyReportProps) {
-  const engagementsById = artifacts.reduce(
-    (acc, curr) => ({
-      ...acc,
-      [curr.engagement_uuid]: engagements.find(
-        e => e.uuid === curr.engagement_uuid
-      ),
-    }),
-    {}
-  );
   const rows = artifacts.map(artifact => {
     return [
       {
@@ -45,9 +34,9 @@ export function DwLastWeeklyReport({
       {
         title: (
           <Link to={`/app/engagements/${artifact.engagement_uuid}`}>
-            {engagementsById[artifact.engagement_uuid]?.customer_name}
+            {artifact?.customer_name}
             &nbsp;—&nbsp;
-            {engagementsById[artifact.engagement_uuid]?.project_name}
+            {artifact?.project_name}
           </Link>
         ),
       },

src/components/dashboard/widgets/dw_last_weekly_report.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useArtifacts } from '../hooks/use_artifacts';
 import { Artifact, Engagement } from '../schemas/engagement';
 
@@ -12,40 +12,31 @@ type ArtifactsComponent<P> = React.FunctionComponent<
 export function withArtifacts<P>(
   WrappedComponent: ArtifactsComponent<P>,
   fetcher: () => Promise<Artifact[]>,
-  fetchEngagementById: (id: string) => Promise<Partial<Engagement>>
 ) {
   return (
     <ArtifactFetcher
       component={WrappedComponent}
       fetcher={fetcher}
-      getEngagementById={fetchEngagementById}
     />
   );
 }
 
 interface ArtifactFetcherProps<P> {
   component: ArtifactsComponent<P>;
   fetcher: () => Promise<Artifact[]>;
-  getEngagementById: (id: string) => Promise<Partial<Engagement>>;
 }
 
 const ArtifactFetcher = (props: ArtifactFetcherProps<any>) => {
-  const { component: WrappedComponent, getEngagementById } = props;
+  const { component: WrappedComponent } = props;
   const [artifacts, fetchArtifacts] = useArtifacts(props.fetcher);
-  const [engagements, setEngagements] = useState([]);
   useEffect(() => {
     fetchArtifacts();
   }, [fetchArtifacts]);
-  useEffect(() => {
-    Promise.all(
-      artifacts.map(artifact => getEngagementById(artifact.engagement_uuid))
-    ).then(engagements => setEngagements(engagements));
-  }, [artifacts, getEngagementById]);
+  useEffect(() => {}, [artifacts]);
   return (
     <WrappedComponent
       {...props}
       artifacts={artifacts}
-      engagements={engagements}
     />
   );
 };

src/hocs/with_artifacts.tsx

@@ -4,6 +4,7 @@ import faker from 'faker';
 export const mockEngagementUseCase = (): EngagementUseCase => {
   return {
     id: faker.random.uuid(),
+    engagement_uuid: "1",
     description: faker.lorem.sentences(2),
   };
 };
@@ -13,6 +14,8 @@ export const mockEngagementArtifact = (useStaticData = false): Artifact => {
     uuid: useStaticData ? '1' : faker.random.uuid(),
     linkAddress: useStaticData ? 'https://example.com' : faker.internet.url(),
     title: useStaticData ? 'An engagement artifact' : faker.lorem.words(3),
+    customer_name: useStaticData ? "Customer A1" : faker.lorem.words(2),
+    project_name: useStaticData ? "Residency B1" : faker.lorem.words(2),
     type: 'demo',
     description: useStaticData
       ? 'Artifact Description'

src/mocks/engagement_mocks.ts

@@ -53,15 +53,18 @@ export class Apiv1ArtifactService implements ArtifactService {
       uuid: apiResponseObject['uuid'],
       title: apiResponseObject['title'],
       type: apiResponseObject['type'],
+      pretty_type: apiResponseObject['pretty_type'],
       engagement_uuid: apiResponseObject['engagement_uuid'],
+      customer_name: apiResponseObject['customer_name'],
+      project_name: apiResponseObject['project_name'],
     };
   };
   async getArtifacts(filter: ArtifactFilter = {}): Promise<Artifact[]> {
     const queryString = this.buildQueryString(filter);
     const { data } = await this.axios.get(
       `/engagements/artifacts?${queryString}`,
       {
-        headers: { "Accept-version": "v1" }
+        headers: { "Accept-version": "v2" }
       }
     );
     const artifacts = data.map(this.apiResponseToArtifact);

src/packages/api_v1_sdk/apiv1_artifact_service.ts

@@ -322,14 +322,13 @@ export function Dashboard() {
                       regions: selectedRegions,
                       sortOrder: 'DESC',
                       sortFields: 'updated',
-                    }),
-                  engagementService.getEngagementById
+                    })
                 )}
               </GridItem>
               <GridItem sm={12} xl={12} xl2={6}>
                 {withArtifacts(
                   ({ artifacts, engagements }) => (
-                    <DwLastDemo demos={artifacts} engagements={engagements} />
+                    <DwLastDemo demos={artifacts} />
                   ),
                   () =>
                     artifactService.getArtifacts({
@@ -341,8 +340,7 @@ export function Dashboard() {
                       regions: selectedRegions,
                       sortOrder: 'DESC',
                       sortFields: 'updated',
-                    }),
-                  engagementService.getEngagementById
+                    })
                 )}
               </GridItem>
               <GridItem sm={12} xl={12} xl2={6}>
@@ -358,9 +356,7 @@ export function Dashboard() {
                       regions: selectedRegions,
                       sortOrder: 'DESC',
                       sortFields: 'updated',
-                    }),
-
-                  engagementService.getEngagementById
+                    })
                 )}
               </GridItem>
             </Grid>

src/routes/dashboard/index.tsx

@@ -70,8 +70,11 @@ export interface Artifact {
   linkAddress: string;
   title: string;
   type: string;
+  pretty_type?: string;
   description: string;
   engagement_uuid?: string;
+  project_name?: string;
+  customer_name?: string;
 }
 
 export interface EngagementOverview {