Convert Providers screen to Console page

Changes:
1. display all providers in ons table
2. provide attribute-value filter implementation with:
  a) free text filter
  b) enum based filter

Reference-Url: oVirt/ovirt-web-ui#1600
Reference-Url: oVirt/ovirt-web-ui#1592
Reference-Url: https://www.patternfly.org/v4/guidelines/filters#attribute-value-filter

console-extensions.json

@@ -8,6 +8,36 @@
       "insertAfter": "workloads"
     }
   },
+  {
+    "type": "console.navigation/resource-ns",
+    "properties": {
+      "id": "providers",
+      "section": "migrationtoolkit",
+      "name": "%plugin__forklift-console-plugin~Providers%",
+      "model": {
+        "group": "forklift.konveyor.io",
+        "kind": "Provider",
+        "version": "v1beta1"
+      },
+      "dataAttributes": {
+        "data-quickstart-id": "qs-nav-providers",
+        "data-test-id": "providers-nav-item"
+      }
+    }
+  },
+  {
+    "type": "console.page/resource/list",
+    "properties": {
+      "component": {
+        "$codeRef": "ProvidersRes"
+      },
+      "model": {
+        "group": "forklift.konveyor.io",
+        "kind": "Provider",
+        "version": "v1beta1"
+      }
+    }
+  },
   {
     "type": "console.navigation/href",
     "properties": {
@@ -113,4 +143,4 @@
       "exact": true
     }
   }
-]
+]

locales/en/plugin__forklift-console-plugin.json

@@ -1,7 +1,23 @@
 {
+  "AddProvider": "Add Provider",
+  "Any": "Any",
+  "Error": "Error",
+  "FilterByName": "Filter by name",
+  "FilterByStatus": "Filter by status",
+  "FilterByType": "Filter by type",
+  "FilterByUrl": "Filter by endpoint",
   "Migration Toolkit": "Migration Toolkit",
+  "Name": "Name",
   "NetworkMaps": "NetworkMaps",
+  "Openshift": "Openshift",
+  "Ovirt": "oVirt",
   "Plans": "Plans",
   "Providers": "Providers",
-  "StorageMaps": "StorageMaps"
-}
+  "SelectFilter": "Select Filter",
+  "StorageMaps": "StorageMaps",
+  "Status": "Status",
+  "Success": "Success",
+  "Type": "Type",
+  "Url": "Endpoint",
+  "Vsphere": "vSphere"
+}

package.json

@@ -104,10 +104,11 @@
       "MappingsPage": "./extensions/MappingsWrapper",
       "HostsPage": "./extensions/HostsPageWrapper",
       "PlanWizard": "./extensions/PlanWizardWrapper",
-      "VMMigrationDetails": "./extensions/VMMigrationDetailsWrapper"
+      "VMMigrationDetails": "./extensions/VMMigrationDetailsWrapper",
+      "ProvidersRes": "./Providers/ProvidersPage"
     },
     "dependencies": {
       "@console/pluginAPI": "*"
     }
   }
-}
+}

src/Providers/ProvidersPage.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'src/internal/i18n';
+import { ProviderResource } from 'src/internal/k8s';
+
+import { MOCK_CLUSTER_PROVIDERS } from '@app/queries/mocks/providers.mock';
+import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  Button,
+  Level,
+  LevelItem,
+  PageSection,
+  Title,
+  Toolbar,
+  ToolbarContent,
+} from '@patternfly/react-core';
+
+import AttributeValueFilter from './components/AttributeValueFilter';
+import ProvidersTableView from './components/ProvidersTableView';
+import { Field } from './components/shared';
+import { NAME, STATUS, TYPE, URL } from './components/shared';
+
+const isMock = process.env.DATA_SOURCE === 'mock';
+
+const useProviders = ({ kind, namespace }) => {
+  const [providers, loaded, error] = isMock
+    ? [MOCK_CLUSTER_PROVIDERS, true, false]
+    : useK8sWatchResource<ProviderResource[]>({
+        kind,
+        isList: true,
+        namespaced: true,
+        namespace,
+      });
+
+  // const inventoryProvidersQuery = useInventoryProvidersQuery();
+  // providers.map(p => enhanceWithInventory(inventoryProvidersQuery))
+
+  // const allErrorTitles = [
+  //   'Cannot load providers from cluster API',
+  //   'Cannot load providers from inventory API',
+  // ];
+
+  return [providers, loaded, error];
+};
+
+const fields: Field[] = [
+  {
+    id: NAME,
+    tKey: 'plugin__forklift-console-plugin~Name',
+    filter: {
+      type: 'freetext',
+      placeholderKey: 'plugin__forklift-console-plugin~FilterByName',
+    },
+    sortable: true,
+    from: (provider) => provider?.metadata?.name ?? '',
+  },
+  {
+    id: STATUS,
+    tKey: 'plugin__forklift-console-plugin~Status',
+    filter: {
+      type: 'enum',
+      placeholderKey: 'plugin__forklift-console-plugin~FilterByStatus',
+      values: [
+        {
+          id: 'ConnectionTested',
+          tKey: 'plugin__forklift-console-plugin~Success',
+        },
+        {
+          id: 'ConnectionTestSucceeded',
+          tKey: 'plugin__forklift-console-plugin~Success',
+        },
+        { id: 'URLNotValid', tKey: 'plugin__forklift-console-plugin~Error' },
+      ],
+    },
+    sortable: true,
+    from: (provider) => provider?.status?.conditions?.[0]?.type ?? '',
+  },
+  {
+    id: URL,
+    tKey: 'plugin__forklift-console-plugin~Url',
+    filter: {
+      type: 'freetext',
+      placeholderKey: 'plugin__forklift-console-plugin~FilterByUrl',
+    },
+    sortable: true,
+    from: (provider) => provider?.spec?.url ?? '',
+  },
+  {
+    id: TYPE,
+    tKey: 'plugin__forklift-console-plugin~Type',
+    filter: {
+      type: 'enum',
+      placeholderKey: 'plugin__forklift-console-plugin~FilterByType',
+      values: [
+        { id: 'vsphere', tKey: 'plugin__forklift-console-plugin~Vsphere' },
+        { id: 'ovirt', tKey: 'plugin__forklift-console-plugin~Ovirt' },
+        { id: 'openshift', tKey: 'plugin__forklift-console-plugin~Openshift' },
+      ],
+    },
+    sortable: true,
+    from: (provider) => provider?.spec?.type ?? '',
+  },
+];
+
+export const ProvidersPage: React.FunctionComponent<ProvidersPageProps> = ({
+  namespace,
+  kind,
+}) => {
+  const { t } = useTranslation();
+  const [providers, loaded, error] = useProviders({ kind, namespace });
+  const [selectedFilters, setSelectedFilters] = useState({});
+
+  console.error('Providers', providers, fields, selectedFilters);
+
+  return (
+    <>
+      <PageSection variant="light">
+        <Level>
+          <LevelItem>
+            <Title headingLevel="h1">{t('Providers')}</Title>
+          </LevelItem>
+          <LevelItem>
+            <Button variant="primary" onClick={() => ''}>
+              {t('AddProvider')}
+            </Button>
+          </LevelItem>
+        </Level>
+      </PageSection>
+      <PageSection>
+        <Toolbar clearAllFilters={() => setSelectedFilters({})}>
+          <ToolbarContent>
+            <AttributeValueFilter
+              filterTypes={fields.map(({ id, tKey, filter }) => ({
+                id,
+                tKey,
+                filter,
+              }))}
+              onFilterUpdate={setSelectedFilters}
+              selectedFilters={selectedFilters}
+            />
+          </ToolbarContent>
+        </Toolbar>
+
+        {loaded && error && <Errors />}
+        {!loaded && <Loading />}
+        {loaded && !error && (
+          <ProvidersTableView providers={providers} fields={fields} />
+        )}
+      </PageSection>
+    </>
+  );
+};
+
+const Errors = () => <> Erorrs!</>;
+
+const Loading = () => <> Loading!</>;
+
+type ProvidersPageProps = {
+  kind: string;
+  namespace: string;
+};
+
+export default ProvidersPage;

src/Providers/components/AttributeValueFilter.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'src/internal/i18n';
+
+import {
+  Select,
+  SelectOption,
+  SelectOptionObject,
+  SelectVariant,
+  ToolbarGroup,
+  ToolbarItem,
+  ToolbarToggleGroup,
+} from '@patternfly/react-core';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons';
+
+import EnumFilter from './EnumFilter';
+import FreetextFilter from './FreetextFilter';
+import { EnumFilterDef, FreetextFilterDef } from './shared';
+
+interface IdOption extends SelectOptionObject {
+  id: string;
+}
+
+const toSelectOption = (id: string, label: string): IdOption => ({
+  id,
+  compareTo: (other: IdOption): boolean => id === other?.id,
+  toString: () => label,
+});
+
+const AttributeValueFilter: React.FunctionComponent<FiltersProps> = ({
+  selectedFilters,
+  onFilterUpdate,
+  filterTypes,
+}) => {
+  const { t } = useTranslation();
+  const [currentFilterType, setCurrentFilterType] = useState(filterTypes[0]);
+  const [expanded, setExpanded] = useState(false);
+
+  //   const nameFilter = filterTypes.find(({ id }) => id === textBasedFilterId);
+  const selectOptionToFilter = (selectedId) =>
+    filterTypes.find(({ id }) => id === selectedId) ?? currentFilterType;
+
+  const onFilterTypeSelect = (event, value, isPlaceholder) => {
+    if (!isPlaceholder) {
+      setCurrentFilterType(selectOptionToFilter(value?.id));
+      setExpanded(!expanded);
+    }
+  };
+
+  return (
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      <ToolbarGroup variant="filter-group">
+        <ToolbarItem>
+          <Select
+            onSelect={onFilterTypeSelect}
+            onToggle={setExpanded}
+            isOpen={expanded}
+            toggleIcon={<FilterIcon />}
+            variant={SelectVariant.single}
+            aria-label={t('SelectFilter')}
+            selections={toSelectOption(
+              currentFilterType.id,
+              t(currentFilterType.tKey),
+            )}
+          >
+            {filterTypes.map(({ id, tKey }) => (
+              <SelectOption key={id} value={toSelectOption(id, t(tKey))} />
+            ))}
+          </Select>
+        </ToolbarItem>
+
+        {filterTypes.map(({ id, tKey: fieldKey, filter }) => {
+          switch (filter.type) {
+            case 'freetext':
+              return (
+                <FreetextFilter
+                  filterId={id}
+                  onFilterUpdate={(values) =>
+                    onFilterUpdate({
+                      ...selectedFilters,
+                      [id]: values,
+                    })
+                  }
+                  placeholderLabel={t(filter.placeholderKey)}
+                  selectedFilters={selectedFilters[id] ?? []}
+                  showFilter={currentFilterType?.id === id}
+                  title={t(filter.tKey ?? fieldKey)}
+                />
+              );
+            case 'enum':
+              return (
+                <EnumFilter
+                  filterId={id}
+                  placeholderText={t(filter.placeholderKey)}
+                  setFilters={(values) =>
+                    onFilterUpdate({
+                      ...selectedFilters,
+                      [id]: values,
+                    })
+                  }
+                  selectedEnumIds={selectedFilters[id] ?? []}
+                  showFilter={currentFilterType?.id === id}
+                  supportedValues={filter.values}
+                  title={t(filter.tKey ?? fieldKey)}
+                />
+              );
+          }
+        })}
+      </ToolbarGroup>
+    </ToolbarToggleGroup>
+  );
+};
+
+interface FiltersProps {
+  selectedFilters: { [id: string]: string[] };
+  filterTypes: {
+    id: string;
+    tKey: string;
+    filter: EnumFilterDef | FreetextFilterDef;
+  }[];
+  onFilterUpdate(filters: { [id: string]: string[] }): void;
+}
+
+export default AttributeValueFilter;