feat(keppel): transform component functions to components

Author: VoigtS

…omponents/modalHelpers/moveOperation.jsx …nents/componentHelpers/MoveOperation.jsxplugins/keppel/app/javascript/widgets/app/components/modalHelpers/moveOperation.jsx renamed to plugins/keppel/app/javascript/widgets/app/components/componentHelpers/MoveOperation.jsx plugins/keppel/app/javascript/widgets/app/components/modalHelpers/moveOperation.jsx renamed to plugins/keppel/app/javascript/widgets/app/components/componentHelpers/MoveOperation.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, fireEvent } from "@testing-library/react"
 import { screen } from "@testing-library/dom"
-import { MoveOperation } from "./moveOperation"
+import { MoveOperation } from "./MoveOperation"
 
 describe("MoveOperation", () => {
   const onMove = jest.fn()

…nents/modalHelpers/moveOperation.test.js …s/componentHelpers/MoveOperation.test.jsplugins/keppel/app/javascript/widgets/app/components/modalHelpers/moveOperation.test.js renamed to plugins/keppel/app/javascript/widgets/app/components/componentHelpers/MoveOperation.test.js plugins/keppel/app/javascript/widgets/app/components/modalHelpers/moveOperation.test.js renamed to plugins/keppel/app/javascript/widgets/app/components/componentHelpers/MoveOperation.test.js

@@ -0,0 +1,24 @@
+import React from "react"
+
+export const SelectBox = ({ testID = "", options, value, isEditable, onChange }) => {
+  const current = options.find((o) => o.value == value)
+  const trimEllipsis = (str) => (str.substr(-3) === "..." ? str.substr(0, str.length - 3) : str)
+
+  if (!isEditable) {
+    return current ? trimEllipsis(current.label) : ""
+  }
+  return (
+    <select data-testid={testID} value={value} className="form-control select" onChange={onChange}>
+      {!current && (
+        <option key="unknown" value={value}>
+          -- Please select --
+        </option>
+      )}
+      {options.map((o) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  )
+}

plugins/keppel/app/javascript/widgets/app/components/componentHelpers/SelectBox.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { SelectBox } from "./SelectBox"
+import { render, screen } from "@testing-library/react"
+
+const options = [
+  { value: "1", label: "Option 1" },
+  { value: "2", label: "Option 2" },
+  { value: "3", label: "Option 3" },
+]
+describe("SelectBox", () => {
+  it("displays correct label when isEditable is true", () => {
+    render(<SelectBox testID="select-box" options={options} value={"0"} isEditable={true} onChange={() => {}} />)
+    expect(screen.getByText("-- Please select --")).not.toBeNull()
+  })
+  it("displays correct label when isEditable is false", () => {
+    render(<SelectBox testID="select-box" options={options} value={"2"} isEditable={false} onChange={() => {}} />)
+    expect(screen.queryByText("Option 1")).toBeNull()
+    expect(screen.getByText("Option 2")).not.toBeNull()
+  })
+})

plugins/keppel/app/javascript/widgets/app/components/componentHelpers/SelectBox.test.js

@@ -0,0 +1,12 @@
+import React from "react"
+
+export const TextInput = ({ testid = "", value, isEditable, onChange }) => {
+  value = value || ""
+  if (!isEditable) {
+    if (value === "") {
+      return <em>Any</em>
+    }
+    return <code>{value || ""}</code>
+  }
+  return <input data-testid={testid} type="text" className="form-control" onChange={(e) => onChange(e)} />
+}

plugins/keppel/app/javascript/widgets/app/components/componentHelpers/TextInput.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { render, fireEvent, screen } from "@testing-library/react"
+import { TextInput } from "./TextInput" // Adjust the import according to your file structure
+
+describe("TextInput", () => {
+  it("renders input element when isEditable is true", () => {
+    const mockOnChange = jest.fn()
+    render(<TextInput testid="input" value="" isEditable={true} onChange={mockOnChange} />)
+    const inputElement = screen.getByTestId("input")
+    expect(inputElement).not.toBeNull()
+    fireEvent.change(inputElement, { target: { value: "New Value" } })
+    expect(mockOnChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders input element when isEditable is false', () => {
+    render(<TextInput value="" isEditable={false} onChange={() => {}} />)
+    expect(screen.getByText("Any")).not.toBeNull()
+  })
+})

plugins/keppel/app/javascript/widgets/app/components/componentHelpers/TextInput.test.js

@@ -7,7 +7,7 @@ import React from "react"
 import GCPoliciesEditRow from "./row"
 import { validatePolicy } from "./utils"
 import { apiStateIsDeleting } from "../utils"
-import { moveItems } from "../modalHelpers/moveOperation"
+import { moveItems } from "../componentHelpers/MoveOperation"
 
 export default class GCPoliciesEditModal extends React.Component {
   state = {

plugins/keppel/app/javascript/widgets/app/components/gc_policies/edit.jsx

@@ -1,7 +1,8 @@
-import { MoveOperation } from "../modalHelpers/moveOperation"
-import { makeSelectBox } from "../utils"
-import { validatePolicy } from "./utils"
 import React from "react"
+import { MoveOperation } from "../componentHelpers/MoveOperation"
+import { SelectBox } from "../componentHelpers/SelectBox"
+import { TextInput } from "../componentHelpers/TextInput"
+import { validatePolicy } from "./utils"
 
 const actionOptions = [
   { value: "protect", label: "Protect image" },
@@ -45,24 +46,6 @@ const GCPoliciesEditRow = ({
   setPolicyAttribute,
   removePolicy,
 }) => {
-  const makeTextInput = (attr, value) => {
-    value = value || ""
-    if (!isEditable) {
-      if (value === "") {
-        return <em>Any</em>
-      }
-      return <code>{value || ""}</code>
-    }
-    return (
-      <input
-        type="text"
-        value={value}
-        className="form-control"
-        onChange={(e) => setPolicyAttribute(index, attr, e.target.value)}
-      />
-    )
-  }
-
   const makeNumberInput = (attr, value) => {
     value = value || 0
     if (!isEditable) {
@@ -74,130 +57,147 @@ const GCPoliciesEditRow = ({
         value={value.toString()}
         className="form-control"
         min="1"
-        onChange={(e) =>
-          setPolicyAttribute(index, attr, parseInt(e.target.value, 10))
-        }
+        onChange={(e) => setPolicyAttribute(index, attr, parseInt(e.target.value, 10))}
       />
     )
   }
 
   const timeConstraint = policy.time_constraint || {}
   const currentTimestampOption = timeConstraint.on || "off"
-  const currentTimeConstraintOption = timeConstraintOptions
-    .map((o) => o.value)
-    .find((key) => key in timeConstraint)
+  const currentTimeConstraintOption = timeConstraintOptions.map((o) => o.value).find((key) => key in timeConstraint)
 
   const validationError = validatePolicy(policy)
 
   return (
     <tr>
       {isEditable ? (
         <td key="order" className="policy-order-buttons">
-          <MoveOperation
-            index={index}
-            itemCount={policyCount}
-            onMove={movePolicy}
-          />
+          <MoveOperation index={index} itemCount={policyCount} onMove={movePolicy} />
         </td>
       ) : (
         <td key="order" className="policy-order-buttons"></td>
       )}
       <td>
-        {makeSelectBox({
-          isEditable,
-          options: actionOptions,
-          value: policy.action,
-          onChange: (e) => setPolicyAttribute(index, "action", e.target.value),
-        })}
+        {
+          <SelectBox
+            isEditable={isEditable}
+            options={actionOptions}
+            value={policy.action}
+            onChange={(e) => setPolicyAttribute(index, "action", e.target.value)}
+          />
+        }
       </td>
       <td className="form-inline">
         <div className="policy-matching-rule-line">
-          {makeSelectBox({
-            isEditable,
-            options: repoFilterOptions,
-            value: policy.ui_hints.repo_filter,
-            onChange: (e) =>
-              setPolicyAttribute(index, "repo_filter", e.target.value),
-          })}
+          {
+            <SelectBox
+              isEditable={isEditable}
+              options={repoFilterOptions}
+              value={policy.ui_hints.repo_filter}
+              onChange={(e) => setPolicyAttribute(index, "repo_filter", e.target.value)}
+            />
+          }
           {policy.ui_hints.repo_filter === "on" && (
             <>
               {" regex "}
-              {makeTextInput("match_repository", policy.match_repository)}
+              <TextInput
+                value={policy.match_repository}
+                isEditable={isEditable}
+                onChange={(e) => {
+                  setPolicyAttribute(index, "match_repository", e.target.value)
+                }}
+              />
               {(isEditable || policy.except_repository) && (
                 <>
                   {" but not regex "}
-                  {makeTextInput("except_repository", policy.except_repository)}
+                  <TextInput
+                    value={policy.except_repository}
+                    isEditable={isEditable}
+                    onChange={(e) => {
+                      setPolicyAttribute(index, "except_repository", e.target.value)
+                    }}
+                  />
                 </>
               )}
             </>
           )}
         </div>
         <div className="policy-matching-rule-line">
-          {makeSelectBox({
-            isEditable,
-            options: tagFilterOptions,
-            value: policy.ui_hints.tag_filter,
-            onChange: (e) =>
-              setPolicyAttribute(index, "tag_filter", e.target.value),
-          })}
+          {
+            <SelectBox
+              isEditable={isEditable}
+              options={tagFilterOptions}
+              value={policy.ui_hints.tag_filter}
+              onChange={(e) => setPolicyAttribute(index, "tag_filter", e.target.value)}
+            />
+          }
           {policy.ui_hints.tag_filter === "on" && (
             <>
               {" regex "}
-              {makeTextInput("match_tag", policy.match_tag)}
+              <TextInput
+                value={policy.match_tag}
+                isEditable={isEditable}
+                onChange={(e) => {
+                  setPolicyAttribute(index, "match_tag", e.target.value)
+                }}
+              />
               {(isEditable || policy.except_tag) && (
                 <>
                   {" but not regex "}
-                  {makeTextInput("except_tag", policy.except_tag)}
+                  <TextInput
+                    value={policy.match_tag}
+                    isEditable={isEditable}
+                    onChange={(e) => {
+                      setPolicyAttribute(index, "except_tag", e.target.value)
+                    }}
+                  />
                 </>
               )}
             </>
           )}
         </div>
         <div className="policy-matching-rule-line">
-          {makeSelectBox({
-            isEditable,
-            options: timestampOptions,
-            value: currentTimestampOption,
-            onChange: (e) =>
-              setPolicyAttribute(index, "timestamp", e.target.value),
-          })}
+          {
+            <SelectBox
+              isEditable={isEditable}
+              options={timestampOptions}
+              value={currentTimestampOption}
+              onChange={(e) => setPolicyAttribute(index, "timestamp", e.target.value)}
+            />
+          }
           {currentTimestampOption !== "off" && (
             <>
               {" "}
-              {makeSelectBox({
-                isEditable,
-                options: timeConstraintOptions,
-                value: currentTimeConstraintOption,
-                onChange: (e) =>
-                  setPolicyAttribute(index, "time_constraint", e.target.value),
-              })}
-              {(currentTimeConstraintOption === "oldest" ||
-                currentTimeConstraintOption == "newest") && (
+              {
+                <SelectBox
+                  isEditable={isEditable}
+                  options={timeConstraintOptions}
+                  value={currentTimeConstraintOption}
+                  onChange={(e) => setPolicyAttribute(index, "time_constraint", e.target.value)}
+                />
+              }
+              {(currentTimeConstraintOption === "oldest" || currentTimeConstraintOption == "newest") && (
                 <>
                   {" "}
-                  {makeNumberInput(
-                    currentTimeConstraintOption,
-                    policy.time_constraint[currentTimeConstraintOption]
-                  )}
+                  {makeNumberInput(currentTimeConstraintOption, policy.time_constraint[currentTimeConstraintOption])}
                   {" in this repository"}
                 </>
               )}
-              {(currentTimeConstraintOption === "older_than" ||
-                currentTimeConstraintOption == "newer_than") && (
+              {(currentTimeConstraintOption === "older_than" || currentTimeConstraintOption == "newer_than") && (
                 <>
                   {" "}
                   {makeNumberInput(
                     currentTimeConstraintOption,
                     policy.time_constraint[currentTimeConstraintOption].value
                   )}{" "}
-                  {makeSelectBox({
-                    isEditable,
-                    options: timeUnitOptions,
-                    value:
-                      policy.time_constraint[currentTimeConstraintOption].unit,
-                    onChange: (e) =>
-                      setPolicyAttribute(index, "time_unit", e.target.value),
-                  })}
+                  {
+                    <SelectBox
+                      isEditable={isEditable}
+                      options={timeUnitOptions}
+                      value={policy.time_constraint[currentTimeConstraintOption].unit}
+                      onChange={(e) => setPolicyAttribute(index, "time_unit", e.target.value)}
+                    />
+                  }
                 </>
               )}
             </>