Show empty properties section on artifact details page

DaoDaoNoCode · Aug 21, 2024 · 3c9266c · 3c9266c
1 parent ac4aac6
commit 3c9266c
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 16 deletions.
diff --git a/frontend/src/__mocks__/mlmd/mockGetArtifacts.ts b/frontend/src/__mocks__/mlmd/mockGetArtifacts.ts
@@ -344,6 +344,17 @@ export const mockedArtifactsResponse: GetArtifactsResponse = {
       createTimeSinceEpoch: 1611399342384,
       lastUpdateTimeSinceEpoch: 1611399342384,
     },
+    {
+      id: 7,
+      typeId: 14,
+      type: 'system.Metrics',
+      uri: 's3://scalar-metrics-uri-scalar-metrics-uri',
+      properties: {},
+      customProperties: {},
+      state: 2,
+      createTimeSinceEpoch: 1611399342384,
+      lastUpdateTimeSinceEpoch: 1611399342384,
+    },
   ],
 };
 

diff --git a/frontend/src/__tests__/cypress/cypress/pages/pipelines/artifacts.ts b/frontend/src/__tests__/cypress/cypress/pages/pipelines/artifacts.ts
@@ -106,6 +106,14 @@ class ArtifactDetails {
     return cy.findByTestId(`custom-props-description-list-${label}`);
   }
 
+  findPropSection() {
+    return cy.findByTestId('artifact-properties-section');
+  }
+
+  findCustomPropSection() {
+    return cy.findByTestId('artifact-custom-properties-section');
+  }
+
   mockGetArtifactById(projectName: string, response: GrpcResponse) {
     return cy.interceptOdh(
       'POST /api/service/mlmd/:namespace/:serviceName/ml_metadata.MetadataStoreService/GetArtifactsByID',

diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/artifacts.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/pipelines/artifacts.cy.ts
@@ -146,6 +146,18 @@ describe('Artifacts', () => {
   });
 
   describe('details', () => {
+    it('shows empty state for properties and custom properties', () => {
+      artifactDetails.mockGetArtifactById(
+        projectName,
+        mockGetArtifactsById({
+          artifacts: [mockedArtifactsResponse.artifacts[5]],
+          artifactTypes: [],
+        }),
+      );
+      artifactDetails.visit(projectName, '(No name)', '7');
+      artifactDetails.findPropSection().should('contain.text', 'No properties');
+      artifactDetails.findCustomPropSection().should('contain.text', 'No custom properties');
+    });
     it('shows Overview tab content', () => {
       artifactDetails.mockGetArtifactById(
         projectName,

diff --git a/.../pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactOverviewDetails.tsx b/.../pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactOverviewDetails.tsx
@@ -9,6 +9,8 @@ import {
   DescriptionListGroup,
   DescriptionListTerm,
   DescriptionListDescription,
+  TextContent,
+  Text,
 } from '@patternfly/react-core';
 
 import { Artifact } from '~/third_party/mlmd';
@@ -46,30 +48,37 @@ export const ArtifactOverviewDetails: React.FC<ArtifactOverviewDetailsProps> = (
           </DescriptionList>
         </Stack>
       </FlexItem>
-
-      {!!artifactObject?.propertiesMap.length && (
-        <FlexItem>
-          <Stack hasGutter>
-            <Title headingLevel="h3">Properties</Title>
+      <FlexItem data-testid="artifact-properties-section">
+        <Stack hasGutter>
+          <Title headingLevel="h3">Properties</Title>
+          {artifactObject?.propertiesMap && artifactObject.propertiesMap.length !== 0 ? (
             <ArtifactPropertyDescriptionList
               propertiesMap={artifactObject.propertiesMap}
               testId="props-description-list"
             />
-          </Stack>
-        </FlexItem>
-      )}
-
-      {!!artifactObject?.customPropertiesMap.length && (
-        <FlexItem>
-          <Stack hasGutter>
-            <Title headingLevel="h3">Custom properties</Title>
+          ) : (
+            <TextContent>
+              <Text component="small">No properties</Text>
+            </TextContent>
+          )}
+        </Stack>
+      </FlexItem>
+      <FlexItem data-testid="artifact-custom-properties-section">
+        <Stack hasGutter>
+          <Title headingLevel="h3">Custom properties</Title>
+          {artifactObject?.customPropertiesMap &&
+          artifactObject.customPropertiesMap.length !== 0 ? (
             <ArtifactPropertyDescriptionList
               propertiesMap={artifactObject.customPropertiesMap}
               testId="custom-props-description-list"
             />
-          </Stack>
-        </FlexItem>
-      )}
+          ) : (
+            <TextContent>
+              <Text component="small">No custom properties</Text>
+            </TextContent>
+          )}
+        </Stack>
+      </FlexItem>
     </Flex>
   );
 };