Use Case Links (#562)

* Use cases with engagement and customer name

* Fix broken tests

* Cleanup router test readability

* Attempt to fix routing error in artifact component spec

* Actually use the mock artifact array during the tests...

* Get rid of unused property and whitespace that makes everything angry

Co-authored-by: TateDeVito <[email protected]>
Co-authored-by: Jacob See <[email protected]>

Author: 3 people

src/components/dashboard/widgets/dw_last_artifact.spec.tsx

@@ -1,17 +1,27 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { mockEngagementUseCase } from '../../../mocks/engagement_mocks';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router';
+import { mockEngagementArtifact, mockEngagementUseCase } from '../../../mocks/engagement_mocks';
 import { DwLastArtifacts } from './dw_last_artifact';
 import { DwLastUseCases } from './dw_last_use_cases';
 
 describe('Last Use Cases dashboard widget', () => {
   test('has the correct title', () => {
-    const component = render(<DwLastArtifacts artifacts={[]} />);
+    const component = render(
+      <Router history={createMemoryHistory({})}>
+        <DwLastArtifacts artifacts={[]} />
+      </Router>
+    );
     expect(component.getByText('Artifacts')).toBeDefined();
   });
   test('shows the artifacts', () => {
-    const artifacts = new Array(10).fill(null).map(mockEngagementUseCase);
-    const component = render(<DwLastUseCases useCases={artifacts} />);
+    const artifacts = new Array(10).fill(null).map(mockEngagementArtifact);
+    const component = render(
+      <Router history={createMemoryHistory({})}>
+        <DwLastArtifacts artifacts={artifacts} />
+      </Router>
+    );
     for (let artifact of artifacts) {
       expect(component.getByText(artifact.description)).toBeDefined();
     }

src/components/dashboard/widgets/dw_last_use_cases.spec.tsx

@@ -1,16 +1,26 @@
 import { render } from '@testing-library/react';
 import React from 'react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router';
 import { mockEngagementUseCase } from '../../../mocks/engagement_mocks';
 import { DwLastUseCases } from './dw_last_use_cases';
 
 describe('Last Use Cases dashboard widget', () => {
   test('has the correct title', () => {
-    const component = render(<DwLastUseCases useCases={[]} />);
-    expect(component.getByText('Use Cases')).toBeDefined();
+    const component = render(
+      <Router history={createMemoryHistory({})}>
+        <DwLastUseCases useCases={[]} />
+      </Router>
+    );
+    expect(component.getAllByText('Use Cases')).toBeDefined();
   });
   test('shows the use cases', () => {
     const useCases = new Array(10).fill(null).map(mockEngagementUseCase);
-    const component = render(<DwLastUseCases useCases={useCases} />);
+    const component = render(
+        <Router history={createMemoryHistory({})}>
+          <DwLastUseCases useCases={useCases} />
+        </Router>
+      );
     for (let useCase of useCases) {
       expect(component.getByText(useCase.description)).toBeDefined();
     }

src/components/dashboard/widgets/dw_last_use_cases.tsx

@@ -8,36 +8,51 @@ import {
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
-import {ReactComponent as AtomIcon} from '../../../assets/images/atom-alt.svg';
-import { Table, TableBody, TableHeader } from '@patternfly/react-table';
+import { ReactComponent as AtomIcon } from '../../../assets/images/atom-alt.svg';
+import {
+  Table,
+  TableBody,
+  TableHeader,
+} from '@patternfly/react-table';
 import { EngagementUseCase } from '../../../schemas/engagement';
 import CustomRowWrapper from '../../../components/custom_row_wrapper/custom_row_wrapper';
+import { Link } from 'react-router-dom';
 export interface DwLastUseCasesProps {
   useCases: EngagementUseCase[];
 }
-const columns = ['Use Case'];
+const columns = [
+  'Use Cases',
+];
 export const DwLastUseCases = (props: DwLastUseCasesProps) => {
   const rows = props.useCases.map(useCase => {
     return [
       {
-        title: useCase?.description,
-        // <Button variant={ButtonVariant.link} onClick={() => {}} isInline>
-        //   {useCase?.description}
-        // </Button>
+        title: <div><div><b>Engagement:</b> <Link to={`/app/engagements/${useCase.engagement_uuid}`}>{ useCase?.customer_name + ' - ' + useCase?.project_name }</Link></div><div>{useCase?.description}</div></div>,
       },
     ];
   });
   return (
     <Card>
       <CardHeader>
-      <AtomIcon
+        <AtomIcon
           width="25"
           fill="#EC7A0A"
           stroke="#EC7A0A"
-          style={{marginRight:"5px"}}
+          style={{ marginRight: '5px' }}
         ></AtomIcon>
         <TextContent>
-          <Text component={TextVariants.h2}>Use Cases <span style={{fontSize:"12px", color:"#999999", verticalAlign:"middle"}}>(last 5)</span></Text>
+          <Text component={TextVariants.h2}>
+            Use Cases{' '}
+            <span
+              style={{
+                fontSize: '12px',
+                color: '#999999',
+                verticalAlign: 'middle',
+              }}
+            >
+              (last 5)
+            </span>
+          </Text>
         </TextContent>
       </CardHeader>
       <CardBody>
@@ -46,7 +61,10 @@ export const DwLastUseCases = (props: DwLastUseCasesProps) => {
           rows={rows}
           cells={columns}
           gridBreakPoint={'grid-lg'}
-          rowWrapper={({trRef, rowProps, ...props}) => <CustomRowWrapper trref={trRef} rowprops={rowProps} {...props}/>}        >
+          rowWrapper={({ trRef, rowProps, ...props }) => (
+            <CustomRowWrapper trref={trRef} rowprops={rowProps} {...props} />
+          )}
+        >
           <TableHeader />
           <TableBody />
         </Table>

src/packages/api_v1_sdk/apiv1_use_cases_service.ts

@@ -40,6 +40,9 @@ export class Apiv1UseCasesService implements UseCaseService {
     return {
       id: apiResponseObject['uuid'],
       description: apiResponseObject['description'],
+      engagement_uuid: apiResponseObject['engagement_uuid'],
+      project_name: apiResponseObject['name'],
+      customer_name: apiResponseObject['customer_name'],
     };
   };
   async getUseCases(filter?: UseCaseFilter): Promise<EngagementUseCase[]> {

src/schemas/engagement.ts

@@ -61,6 +61,8 @@ export interface EngagementUseCase {
   description?: string;
   id: string;
   engagement_uuid: string;
+  project_name?: string;
+  customer_name?: string;
 }
 
 export interface Artifact {
@@ -264,11 +266,17 @@ export abstract class Engagement {
         : null,
       status: ClusterStatus.fromFake(staticData, options),
       use_cases: staticData
-        ? [{ id: '1', description: 'an engagement use case', engagement_uuid: '475hf89-578978972897-8979879' }]
+        ? [
+            {
+              id: '1',
+              description: 'an engagement use case',
+              engagement_uuid: '475hf89-578978972897-8979879',
+            },
+          ]
         : new Array(3).fill(null).map(() => ({
             description: faker.lorem.sentence(),
             id: faker.random.uuid().toString(),
-            engagement_uuid: "475hf89-578978972897-8979879"
+            engagement_uuid: '475hf89-578978972897-8979879',
           })),
       ...getStatusDeterminers(),
       uuid: staticData ? 'uuid' : faker.random.uuid(),