Clean up form wrapper, focus

uyuni-project · Oct 18, 2023 · 32fb2fe · 32fb2fe
1 parent f4cbfc1
commit 32fb2fe
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 43 deletions.
diff --git a/web/html/src/components/combobox.tsx b/web/html/src/components/combobox.tsx
@@ -92,7 +92,7 @@ export class Combobox extends React.Component<ComboboxProps, ComboboxState> {
         options={options}
         styles={colourStyles}
         menuPortalTarget={document.body}
-        formatCreateLabel={(label: string) => `Create "${label}"`}
+        formatCreateLabel={(label: string) => t("Create {label}", { label })}
         getNewOptionData={this.props.getNewOptionData}
         {...testAttributes}
       />

diff --git a/web/html/src/manager/schedule-options/action-chain-picker.renderer.tsx b/web/html/src/manager/schedule-options/action-chain-picker.renderer.tsx
@@ -11,7 +11,11 @@ export const renderer = (id: string, props: Props) => {
   let actionChains = [] as any[];
   let startsChecked = false;
   try {
-    actionChains = JSON.parse(props.actionChains || "");
+    actionChains = JSON.parse(
+      (props.actionChains || "")
+        // TODO: Fix this in JSP
+        .replace(/&quot;/g, '"')
+    );
     startsChecked = JSON.parse(props.startsChecked || "");
   } catch (error) {
     Loggerhead.error(error);

diff --git a/web/html/src/manager/schedule-options/action-chain-picker.tsx b/web/html/src/manager/schedule-options/action-chain-picker.tsx
@@ -1,14 +1,10 @@
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
 
 import { Combobox } from "components/combobox";
-import { Form } from "components/input";
-
-import Network from "utils/network";
 
 type ActionChain = {
   id: string;
-  label: string;
-  entrycount: number;
+  text: string;
 };
 
 type Props = {
@@ -17,30 +13,14 @@ type Props = {
 };
 
 export const ActionChainPicker = (props: Props) => {
-  const newActionChain: ActionChain = { label: t("new action chain"), id: "new action chain", entrycount: 0 };
-  const [selectedId, setSelectedId] = useState(newActionChain.id);
-  const [actionChains, setActionChains] = useState<ActionChain[]>([newActionChain]);
-
-  useEffect(() => {
-    Network.apiGet<ActionChain[]>("actionchain/listChains").then((items) => {
-      console.log(items);
-      setActionChains([newActionChain, ...items]);
-    });
-  }, []);
-
-  useEffect(() => {
-    console.log(props.actionChains, actionChains, JSON.stringify(props.actionChains) === JSON.stringify(actionChains));
-  }, [actionChains]);
-
-  const comboboxItems = actionChains.map((item) => ({
-    id: item.label,
-    text: item.label,
-  }));
+  const radioRef = useRef<HTMLInputElement | null>(null);
+  const [selectedId, setSelectedId] = useState(props.actionChains[0]?.id || "");
 
   return (
     <div className="form-group">
       <div className="col-sm-3 control-label">
         <input
+          ref={radioRef}
           type="radio"
           name="schedule_type"
           value="action_chain"
@@ -50,22 +30,24 @@ export const ActionChainPicker = (props: Props) => {
         <label htmlFor="schedule-by-action-chain">{t("Add to:")}</label>
       </div>
       <div className="col-sm-6">
-        {/* TODO: Remove this <Form> wrapper once https://github.com/SUSE/spacewalk/issues/14250 is implemented */}
-        <Form>
-          <Combobox
-            id="action-chain"
-            name="action_chain"
-            options={comboboxItems}
-            selectedId={selectedId}
-            getNewOptionData={(input, label) => {
-              const sanitized = input.replace(/[',]/g, "");
-              const maxLength = 256;
-              const cut = sanitized.substring(0, maxLength);
-              return { id: cut, value: cut, label };
-            }}
-            onSelect={(item) => setSelectedId(item.id)}
-          />
-        </Form>
+        <Combobox
+          id="action-chain"
+          name="action_chain"
+          options={props.actionChains}
+          selectedId={selectedId}
+          getNewOptionData={(input, label) => {
+            const sanitized = input.replace(/[',]/g, "");
+            const maxLength = 256;
+            const cut = sanitized.substring(0, maxLength);
+            return { id: cut, value: cut, label };
+          }}
+          onSelect={(item) => setSelectedId(item.id)}
+          onFocus={() => {
+            if (radioRef.current) {
+              radioRef.current.checked = true;
+            }
+          }}
+        />
       </div>
     </div>
   );