Merge pull request #3429 from nymtech/feature/explorer-show-all-gateway-versions

Add 'show all versions' options to gateways list

.gitignore

@@ -8,6 +8,7 @@
 .idea
 target
 .env
+.env.dev
 /.vscode/settings.json
 validator/.vscode
 sample-configs/validator-config.toml

explorer/src/components/Gateways/VersionDisplaySelector.tsx

@@ -5,6 +5,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 export enum VersionSelectOptions {
   latestVersion = 'Latest versions',
   olderVersions = 'Older versions',
+  all = 'All',
 }
 export const VersionDisplaySelector = ({
   selected,
@@ -32,6 +33,9 @@ export const VersionDisplaySelector = ({
         <MenuItem value={VersionSelectOptions.olderVersions} data-testid="show-gateway-old-versions">
           {VersionSelectOptions.olderVersions}
         </MenuItem>
+        <MenuItem value={VersionSelectOptions.all} data-testid="show-gateway-all-versions">
+          {VersionSelectOptions.all}
+        </MenuItem>
       </Select>
     </FormControl>
   );

explorer/src/pages/Gateways/index.tsx

@@ -25,7 +25,7 @@ export const PageGateways: FCWithChildren = () => {
   const [filteredGateways, setFilteredGateways] = React.useState<GatewayResponse>([]);
   const [pageSize, setPageSize] = React.useState<string>('50');
   const [searchTerm, setSearchTerm] = React.useState<string>('');
-  const [versionFilter, setVersionFilter] = React.useState<VersionSelectOptions>(VersionSelectOptions.latestVersion);
+  const [versionFilter, setVersionFilter] = React.useState<VersionSelectOptions>(VersionSelectOptions.all);
 
   const theme = useTheme();
 
@@ -61,10 +61,18 @@ export const PageGateways: FCWithChildren = () => {
     return [];
   }, [gateways]);
 
-  const filteredByVersion = React.useMemo(
-    () => (versionFilter === VersionSelectOptions.latestVersion ? filterByLatestVersions : filterByOlderVersions),
-    [versionFilter, gateways],
-  );
+  const filteredByVersion = React.useMemo(() => {
+    switch (versionFilter) {
+      case VersionSelectOptions.latestVersion:
+        return filterByLatestVersions;
+      case VersionSelectOptions.olderVersions:
+        return filterByOlderVersions;
+      case VersionSelectOptions.all:
+        return gateways?.data || [];
+      default:
+        return [];
+    }
+  }, [versionFilter, gateways]);
 
   React.useEffect(() => {
     if (searchTerm === '') {

explorer/src/pages/ServiceProviders/index.tsx

@@ -55,7 +55,7 @@ export const ServiceProviders = () => {
                   pageSize={pageSize}
                   childrenBefore={<SupportedApps />}
                 />
-                <UniversalDataGrid pagination rows={serviceProviders} columns={columns} pageSize={pageSize} />
+                <UniversalDataGrid pagination rows={serviceProviders?.data?.items} columns={columns} pageSize={pageSize} />
               </>
             ) : (
               <Typography>No service providers to display</Typography>

explorer/src/typeDefs/explorer-api.ts

@@ -250,6 +250,6 @@ export type DirectoryServiceProvider = {
 
 export type DirectoryService = {
   id: string;
-  descrtiption: string;
+  description: string;
   items: DirectoryServiceProvider[];
 };