From e99080509b7b80eda2f47124b797a72df2553aa0 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <ivana.huckova@gmail.com>
Date: Mon, 23 Sep 2024 15:20:29 +0200
Subject: [PATCH 1/2] Packages: Hide package types that were throwing error

---
 src/views/QueryEditorPackages.tsx | 42 ++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/views/QueryEditorPackages.tsx b/src/views/QueryEditorPackages.tsx
index 2d21f462..83c30a52 100644
--- a/src/views/QueryEditorPackages.tsx
+++ b/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,37 @@ 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;
+  }, [props.packageType]);
+
   return (
     <>
       <InlineField labelWidth={LeftColumnWidth * 2} label="Package type">

From d2f7a67feaf79cdd4efcdf3d0088de7c7b4ab5dc Mon Sep 17 00:00:00 2001
From: Ivana Huckova <ivana.huckova@gmail.com>
Date: Mon, 23 Sep 2024 17:12:23 +0200
Subject: [PATCH 2/2] Update

---
 src/views/QueryEditorPackages.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/QueryEditorPackages.tsx b/src/views/QueryEditorPackages.tsx
index 83c30a52..9efd0db8 100644
--- a/src/views/QueryEditorPackages.tsx
+++ b/src/views/QueryEditorPackages.tsx
@@ -54,7 +54,9 @@ const QueryEditorPackages = (props: Props) => {
       }
     }
     return packageTypeOptions;
-  }, [props.packageType]);
+    // 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 (
     <>