rename list (#24)

Author: yaacov

src/components/status/ConditionLabel/ConditionLabel.md

@@ -0,0 +1,10 @@
+Examples
+
+```js
+<ConditionLabel
+  message={'success'}
+  reason={'ready'}
+  status={'true'}
+  type={'Ready'}
+/>
+```

src/components/status/ConditionLabel/ConditionLabel.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+import { conditionsMock } from './tests/mocks';
+import { ConditionLabel } from './ConditionLabel';
+
+afterEach(cleanup);
+
+test('ConditionLabel', async () => {
+  const { message, reason, status, type } = conditionsMock[0];
+  const { asFragment, getByText } = render(
+    <ConditionLabel message={message} reason={reason} status={status} type={type} />,
+  );
+  const firstRender = asFragment();
+
+  expect(firstRender).toMatchSnapshot();
+
+  // click on condition to open popover
+  fireEvent.click(getByText(`${reason}=${status}`));
+
+  if (!message) return;
+
+  const popoverMessage = await screen.findByText(message);
+
+  expect(popoverMessage).toHaveTextContent(message);
+});

src/components/status/ConditionLabel/ConditionLabel.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { Label, Popover, PopoverPosition } from '@patternfly/react-core';
+
+export interface k8sStatusConditions {
+  type: string;
+  status?: string;
+  reason?: string;
+  message?: string;
+}
+
+/**
+ * ConditionLabel renders a k8sStatusConditions
+ */
+export const ConditionLabel: React.FC<k8sStatusConditions> = React.memo((condition) => {
+  const preventLabelLink = React.useCallback((e) => e.preventDefault(), []);
+
+  const getBodyContent = React.useCallback(
+    () => <div>{condition?.message}</div>,
+    [condition?.message],
+  );
+
+  return (
+    <Popover
+      position={PopoverPosition.top}
+      aria-label="Condition Popover"
+      bodyContent={getBodyContent}
+    >
+      <Label color="grey" isTruncated href="#" onClick={preventLabelLink}>
+        {condition?.reason}={condition?.status}
+      </Label>
+    </Popover>
+  );
+});
+ConditionLabel.displayName = 'ConditionLabel';

src/components/status/ConditionLabel/__snapshots__/ConditionLabel.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConditionLabel 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-c-label"
+  >
+    <a
+      class="pf-c-label__content"
+      href="#"
+    >
+      <span
+        class="pf-c-label__text"
+      >
+        no_vmi=true
+      </span>
+    </a>
+  </span>
+</DocumentFragment>
+`;

src/components/status/ConditionLabel/index.ts

@@ -0,0 +1 @@
+export * from './ConditionLabel';

src/components/status/VMStatusConditionLabelList/tests/mocks.ts renamed to src/components/status/ConditionLabel/tests/mocks.ts

@@ -1,7 +1,7 @@
 Examples
 
 ```js
-<VMStatusConditionLabelList conditions={[
+<ConditionLabelList conditions={[
     {
       message: 'no vmi found',
       reason: 'no_vmi',

src/components/status/VMStatusConditionLabelList/VMStatusConditionLabelList.md renamed to src/components/status/ConditionLabelList/ConditionLabelList.md

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { cleanup, render } from '@testing-library/react';
+
+import { conditionsMock } from './tests/mocks';
+import { ConditionLabelList } from './ConditionLabelList';
+
+afterEach(cleanup);
+
+test('Render ConditionLabelList', () => {
+  const { asFragment } = render(<ConditionLabelList conditions={conditionsMock} />);
+  expect(asFragment()).toMatchSnapshot();
+});

src/components/status/ConditionLabelList/ConditionLabelList.test.tsx

@@ -1,18 +1,17 @@
 import * as React from 'react';
 
-import { V1VirtualMachineCondition } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { LabelGroup } from '@patternfly/react-core';
 
-import { ConditionLabel } from '../ConditionLabel';
+import { ConditionLabel, k8sStatusConditions } from '../ConditionLabel';
 
 /**
  * VirtualMachineCondition renders a list of a k8s resource conditions
  * */
-export interface VMStatusConditionLabelListProps {
-  conditions: V1VirtualMachineCondition[];
+export interface ConditionLabelListProps {
+  conditions: k8sStatusConditions[];
 }
 
-export const VMStatusConditionLabelList: React.FC<VMStatusConditionLabelListProps> = React.memo(
+export const ConditionLabelList: React.FC<ConditionLabelListProps> = React.memo(
   ({ conditions }) => {
     return (
       <LabelGroup>
@@ -29,4 +28,4 @@ export const VMStatusConditionLabelList: React.FC<VMStatusConditionLabelListProp
     );
   },
 );
-VMStatusConditionLabelList.displayName = 'VMStatusConditionLabelList';
+ConditionLabelList.displayName = 'ConditionLabelList';

src/components/status/VMStatusConditionLabelList/VMStatusConditionLabelList.tsx renamed to src/components/status/ConditionLabelList/ConditionLabelList.tsx

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Render VMStatusConditionLabelList 1`] = `
+exports[`Render ConditionLabelList 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-label-group"