Packages: Hide package types that are throwing error (#366)

src/views/QueryEditorPackages.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { Input, Select, InlineField } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
@@ -10,14 +10,7 @@ interface Props extends PackagesOptions {
   onChange: (value: PackagesOptions) => void;
 }
 
-export const DefaultPackageType = PackageType.NPM;
-
-const packageTypeOptions: Array<SelectableValue<string>> = Object.keys(PackageType).map((v) => {
-  return {
-    label: v.replace('/_/gi', ' '),
-    value: v,
-  };
-});
+export const DefaultPackageType = PackageType.DOCKER;
 
 const QueryEditorPackages = (props: Props) => {
   const [names, setNames] = useState<string>(props.names || '');
@@ -32,6 +25,39 @@ const QueryEditorPackages = (props: Props) => {
     }
   }, [props]);
 
+  const packageTypeOptions = useMemo(() => {
+    // @TODO: These package types are not supported through GraphQL endpoint that we are using in our queries.
+    // We should remove them from the list of options, but for now we will just ignore them
+    // and not show them in the dropdown, if they have not been selected before.
+    // Not sure if they ever been supported.
+    const notSupportedTroughGraphQL: string[] = [PackageType.NPM, PackageType.RUBYGEMS, PackageType.NUGET];
+    const packageTypeOptions: SelectableValue[] = Object.values(PackageType)
+      .filter((packageType) => {
+        // Filter out package types that are not supported through GraphQL
+        return !notSupportedTroughGraphQL.includes(packageType);
+      })
+      .map((v) => {
+        return {
+          label: v.replace('/_/gi', ' '),
+          value: v,
+        };
+      });
+
+    // If user has selected a package type that is not in the list of options, add it to the list
+    if (props.packageType) {
+      const selectedPackageType = packageTypeOptions.find((opt: SelectableValue) => opt.value === props.packageType);
+      if (!selectedPackageType) {
+        packageTypeOptions.push({
+          label: props.packageType.replace('/_/gi', ' '),
+          value: props.packageType,
+        });
+      }
+    }
+    return packageTypeOptions;
+    // We want to run this only once when component is mounted and not every time packageType is changed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <InlineField labelWidth={LeftColumnWidth * 2} label="Package type">