group environment variable interpolation suggestions

koyeb · Oct 3, 2024 · 9dddb6b · 9dddb6b
1 parent 465b0d2
commit 9dddb6b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 15 deletions.
diff --git a/src/components/select-instance.tsx b/src/components/select-instance.tsx
@@ -13,7 +13,7 @@ type SelectInstanceOwnProps = {
 
 type SelectInstanceProps = SelectInstanceOwnProps &
   Omit<
-    React.ComponentProps<typeof Select>,
+    React.ComponentProps<typeof Select<Instance>>,
     'items' | 'selectedItem' | 'onSelectedItemChange' | 'getKey' | 'itemToString' | 'renderItem'
   >;
 

diff --git a/src/intl/en.json b/src/intl/en.json
@@ -1055,7 +1055,6 @@
       "valueLabel": "Value",
       "valueTooltip": "You can reference secrets or environment variables (including Koyeb variables) using <documentationLink>interpolation</documentationLink>",
       "valuePlaceholder": "https://'{{ 'KOYEB_PUBLIC_DOMAIN '}}'/",
-      "noVariablesToInterpolate": "No matching variables",
       "secretLabel": "Secret",
       "addVariable": "Add another",
       "deleteVariable": "Delete variable",

diff --git a/...dules/service-form/sections/04-environment-variables/environment-variable-value-field.tsx b/...dules/service-form/sections/04-environment-variables/environment-variable-value-field.tsx
@@ -2,12 +2,12 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import clsx from 'clsx';
 import { useCombobox } from 'downshift';
 import sort from 'lodash-es/sortBy';
-import uniq from 'lodash-es/uniq';
 import { useRef, useState } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
 import {
   Dropdown,
+  DropdownGroup,
   Field,
   FieldHelperText,
   FieldLabel,
@@ -54,7 +54,7 @@ export function EnvironmentVariableValueField({
     }),
     placeholderData: keepPreviousData as never,
     refetchInterval: false,
-    select: (result) => uniq(mapServiceVariables(result)),
+    select: mapServiceVariables,
   });
 
   const [isOpen, setIsOpen] = useState(false);
@@ -65,11 +65,31 @@ export function EnvironmentVariableValueField({
 
   const variableName = useWatchServiceForm(`environmentVariables.${index}.name`);
 
-  const filteredItems = [
-    '__new_secret__',
-    ...filterItems(variablesQuery.data ?? [], variableName, field.value),
+  const groups: Array<DropdownGroup<string>> = [
+    {
+      key: 'secrets',
+      label: 'Secrets',
+      items: filterItems(variablesQuery.data?.secrets ?? [], variableName, field.value),
+    },
+    {
+      key: 'userEnv',
+      label: 'Service variables',
+      items: filterItems(variablesQuery.data?.userEnv ?? [], variableName, field.value),
+    },
+    {
+      key: 'systemEnv',
+      label: 'Koyeb variables',
+      items: filterItems(variablesQuery.data?.systemEnv ?? [], variableName, field.value),
+    },
+    {
+      key: 'create',
+      label: 'Create new',
+      items: ['__new_secret__'],
+    },
   ];
 
+  const items = groups.flatMap((group) => group.items);
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { highlightedIndex, getLabelProps, getInputProps, getMenuProps, getItemProps, toggleMenu } =
@@ -78,7 +98,7 @@ export function EnvironmentVariableValueField({
       onIsOpenChange: ({ isOpen }) => setIsOpen(isOpen),
       id,
       itemToString: String,
-      items: filteredItems,
+      items,
       inputValue: field.value,
       selectedItem: null,
       onSelectedItemChange({ selectedItem }) {
@@ -166,25 +186,24 @@ export function EnvironmentVariableValueField({
 
       <Dropdown
         dropdown={dropdown}
-        items={filteredItems}
+        groups={groups.filter((group) => group.items.length > 0)}
         selectedItem={undefined}
         highlightedIndex={highlightedIndex}
         getMenuProps={getMenuProps}
         getItemProps={getItemProps}
         getKey={identity}
         renderItem={(item) => (item === '__new_secret__' ? <T id="createSecret" /> : item)}
-        renderNoItems={() => <T id="noVariablesToInterpolate" />}
       />
     </Field>
   );
 }
 
 function mapServiceVariables({ secrets, system_env, user_env }: Record<string, string[]>) {
-  return [
-    //
-    ...sort([...system_env!, ...user_env!]),
-    ...secrets!.map((name) => `secret.${name}`),
-  ].filter((value) => value !== '');
+  return {
+    secrets: secrets!.map((name) => `secret.${name}`),
+    userEnv: sort(user_env).filter((value) => value !== ''),
+    systemEnv: sort(system_env),
+  };
 }
 
 const regexp = /{{(((?!}}).)*)$/i;