Restructure components to extract library part

locales/en/plugin__forklift-console-plugin.json

@@ -2,32 +2,38 @@
   "AddProvider": "Add Provider",
   "Any": "Any",
   "Cancel": "Cancel",
+  "Clusters": "Clusters",
+  "False": "False",
   "FilterByName": "Filter by name",
   "FilterByNamespace": "Filter by namespace",
   "FilterByStatus": "Filter by status",
   "FilterByType": "Filter by type",
   "FilterByUrl": "Filter by endpoint",
+  "Hosts": "Hosts",
   "ManageColumns": "Manage columns",
   "Mappings for VM Import": "Mappings for VM Import",
   "Name": "Name",
   "Namespace": "Namespace",
-  "No": "No",
+  "Networks": "Newtworks",
   "Openshift": "Openshift",
   "Ovirt": "oVirt",
   "Plans for VM Import": "Plans for VM Import",
+  "Providers": "Providers",
   "Providers for VM Import": "Providers for VM Import",
-  "Virtualization": "Virtualization"
   "Ready": "Ready",
   "Reorder": "Reorder",
   "RestoreDefaultColums": "Restore default colums",
   "Save": "Save",
   "SelectFilter": "Select Filter",
   "Status": "Status",
+  "Storage": "Storage",
   "Success": "Success",
   "TableColumnManagement": "Table column management",
   "Type": "Type",
+  "True": "True",
+  "Unknown": "Unknown",
   "Url": "Endpoint",
   "Virtualization": "Virtualization",
   "Vsphere": "vSphere",
-  "Yes": "Yes"
-}
+  "VMs": "VMs"
+}

package.json

@@ -72,8 +72,8 @@
     "prettier": "^2.7.1",
     "prettier-stylelint": "^0.4.2",
     "q": "^1.5.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.8.11",
     "react-query": "^3.39.2",
@@ -106,7 +106,7 @@
       "HostsPage": "./extensions/HostsPageWrapper",
       "PlanWizard": "./extensions/PlanWizardWrapper",
       "VMMigrationDetails": "./extensions/VMMigrationDetailsWrapper",
-      "ProvidersRes": "./Providers/ProvidersPage"
+      "ProvidersRes": "./extensions/NewProvidersWrapper"
     },
     "dependencies": {
       "@console/pluginAPI": "*"

src/Providers/ProviderRow.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { RowProps } from 'src/components/TableView';
+import { useTranslation } from 'src/internal/i18n';
+import { NAME, NAMESPACE, READY, TYPE, URL } from 'src/utils/constants';
+
+import { StatusIcon } from '@migtools/lib-ui';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
+import { Button, Popover } from '@patternfly/react-core';
+import { Td, Tr } from '@patternfly/react-table';
+
+import { MergedProvider } from './data';
+
+interface CellProps {
+  value: string;
+  entity: MergedProvider;
+  kind: string;
+}
+const StatusCell = ({ value, entity: { conditions } }: CellProps) => {
+  const { t } = useTranslation();
+  const existingConditions = Object.values(conditions).filter(Boolean);
+  const toState = (value) =>
+    value === 'True' ? 'Ok' : value === 'False' ? 'Error' : 'Unknown';
+  return (
+    <Popover
+      hasAutoWidth
+      bodyContent={
+        <div>
+          {existingConditions.length > 0
+            ? existingConditions.map(({ message, status }) => {
+                return (
+                  <StatusIcon
+                    key={message}
+                    status={toState(status)}
+                    label={message}
+                  />
+                );
+              })
+            : 'No information'}
+        </div>
+      }
+    >
+      <Button variant="link" isInline aria-label={t(value)}>
+        <StatusIcon status={toState(value)} label={t(value)} />
+      </Button>
+    </Popover>
+  );
+};
+
+const TextCell = ({ value }: { value: string }) => <>{value}</>;
+
+const ProviderLink = ({ value, entity, kind }: CellProps) => (
+  <ResourceLink kind={kind} name={value} namespace={entity?.namespace} />
+);
+
+const cellCreator = {
+  [NAME]: ProviderLink,
+  [READY]: StatusCell,
+  [URL]: TextCell,
+  [TYPE]: TextCell,
+  [NAMESPACE]: ({ value }: CellProps) => (
+    <ResourceLink kind="Namespace" name={value} />
+  ),
+};
+
+const ProviderRow = (kind: string) =>
+  function ProviderRow({ columns, entity }: RowProps<MergedProvider>) {
+    return (
+      <Tr>
+        {columns.map(({ id }) => (
+          <Td key={id} dataLabel="foo">
+            {cellCreator?.[id]?.({
+              kind,
+              value: entity[id],
+              entity,
+            }) ?? <TextCell value={String(entity[id] ?? '')} />}
+          </Td>
+        ))}
+      </Tr>
+    );
+  };
+
+export default ProviderRow;