Add dropdown and radio config item types (#4813)

* Add 'radio' and 'dropdown' config item types (#4811) --------- Co-authored-by: Salah Al Saleh <[email protected]>
replicatedhq · Aug 9, 2024 · 8b96ced · 8b96ced
1 parent f10a45c
commit 8b96ced
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 0 deletions.
diff --git a/e2e/playwright/tests/smoke-test/test.spec.ts b/e2e/playwright/tests/smoke-test/test.spec.ts
@@ -61,6 +61,12 @@ test('smoke test', async ({ page }) => {
   await page.getByRole('link', { name: 'Config', exact: true }).click();
   await expect(page.locator('h3')).toContainText('My Example Config');
   await expect(page.locator('#version_sequence-group')).toContainText('This version is 1');
+  await expect(page.getByRole("combobox")).toHaveValue("option_1");
+  await page.getByRole("combobox").selectOption("option_2");
+  await expect(page.getByRole("combobox")).toHaveValue("option_2");
+  await expect(page.getByLabel("radio_1")).toBeChecked();
+  await page.getByLabel("radio_2").click();
+  await expect(page.getByLabel("radio_2")).toBeChecked();
   await expect(page.getByRole('button', { name: 'Save config' })).toBeVisible();
   await page.getByRole('link', { name: 'Troubleshoot' }).click();
   await expect(page.getByRole('button', { name: 'Analyze App Name' })).toBeVisible();

diff --git a/pkg/kotsadmconfig/types/types.go b/pkg/kotsadmconfig/types/types.go
@@ -10,6 +10,8 @@ const (
 	PasswordItemType  = "password"
 	TextAreaItemType  = "textarea"
 	SelectOneItemType = "select_one"
+	RadioItemType     = "radio"
+	DropdownItemType  = "dropdown"
 )
 
 type ConfigGroupValidationError struct {

diff --git a/pkg/template/config_context.go b/pkg/template/config_context.go
@@ -205,6 +205,8 @@ func isReadOnly(item kotsv1beta1.ConfigItem) bool {
 		"select":      {},
 		"select_many": {},
 		"select_one":  {},
+		"radio":       {},
+		"dropdown":    {},
 		"text":        {},
 		"textarea":    {},
 	}

diff --git a/web/src/components/config_render/ConfigDropdown.tsx b/web/src/components/config_render/ConfigDropdown.tsx
@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { ConfigWrapper } from "./ConfigComponents";
+import ConfigItemTitle from "./ConfigItemTitle";
+import Icon from "@components/Icon";
+import Markdown from "react-remarkable";
+import { isEmpty } from "lodash";
+
+const ConfigDropdown = (props) => {
+  const [selectedValue, setSelectedValue] = useState(
+    props.value || props.default || ""
+  );
+
+  let options = [{ value: "", label: "Select an option" }];
+
+  props.items.map((item) => {
+    if (isEmpty(item)) {
+      return null;
+    }
+    options.push({ value: item.name, label: item.title });
+  });
+
+  const handleChange = (val) => {
+    setSelectedValue(val);
+    props.handleOnChange(props.name, val);
+  };
+
+  return (
+    <ConfigWrapper
+      id={`${props.name}-group`}
+      className={`field-type-dropdown`}
+      marginTop={props.hidden || props.affix ? "0" : "15px"}
+      hidden={props.hidden}
+    >
+      {props.title !== "" ? (
+        <ConfigItemTitle
+          title={props.title}
+          recommended={props.recommended}
+          required={props.required}
+          name={props.name}
+          error={props.error}
+        />
+      ) : null}
+      {props.help_text !== "" ? (
+        <div className="field-section-help-text help-text-color">
+          <Markdown
+            options={{
+              linkTarget: "_blank",
+              linkify: true,
+            }}
+          >
+            {props.help_text}
+          </Markdown>
+        </div>
+      ) : null}
+      <select
+        className="Input tw-mt-4"
+        value={selectedValue}
+        onChange={(e) => handleChange(e.target.value)}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {props.repeatable && (
+        <div
+          className="u-marginTop--10"
+          onClick={() => props.handleAddItem(props.name)}
+        >
+          <span className="add-btn u-fontSize--small u-fontWeight--bold link">
+            <Icon icon="plus" size={14} className="clickable" />
+            Add another {props.title}
+          </span>
+        </div>
+      )}
+    </ConfigWrapper>
+  );
+};
+
+export default ConfigDropdown;
diff --git a/web/src/components/config_render/ConfigGroup.jsx b/web/src/components/config_render/ConfigGroup.jsx
@@ -13,6 +13,7 @@ import ConfigFileInput from "./ConfigFileInput";
 import { setOrder } from "./ConfigUtil";
 import { ConfigWrapper } from "./ConfigComponents";
 import Icon from "../Icon";
+import ConfigDropdown from "./ConfigDropdown";
 
 const ConfigGroup = (props) => {
   const markdownNode = createRef();
@@ -150,6 +151,19 @@ const ConfigGroup = (props) => {
               />
             </ConfigWrapper>
           );
+        case "radio":
+          return (
+            <ConfigSelectOne
+              key={`${i}-${item.name}`}
+              handleOnChange={handleItemChange}
+              hidden={item.hidden}
+              groupName={props.item.name}
+              when={item.when}
+              {...item}
+              readonly={isReadOnly}
+              index={i + 1}
+            />
+          );
         case "select_one":
           return (
             <ConfigSelectOne
@@ -163,6 +177,19 @@ const ConfigGroup = (props) => {
               index={i + 1}
             />
           );
+        case "dropdown":
+          return (
+            <ConfigDropdown
+              key={`${i}-${item.name}`}
+              handleOnChange={handleItemChange}
+              hidden={item.hidden}
+              groupName={props.item.name}
+              when={item.when}
+              {...item}
+              readonly={isReadOnly}
+              index={i + 1}
+            />
+          );
         case "heading":
           return (
             <div