diff --git a/src/components/forms/form-template-meta-field-form.js b/src/components/forms/form-template-meta-field-form.js
deleted file mode 100644
index 068ead2cc..000000000
--- a/src/components/forms/form-template-meta-field-form.js
+++ /dev/null
@@ -1,349 +0,0 @@
-/**
- * Copyright 2024 OpenStack Foundation
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * */
-
-import React, { useEffect, useState } from "react";
-import T from "i18n-react/dist/i18n-react";
-import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css";
-import {
- Dropdown,
- Input,
- SortableTable
-} from "openstack-uicore-foundation/lib/components";
-import Swal from "sweetalert2";
-import { hasErrors, scrollToError, shallowEqual } from "../../utils/methods";
-import { metafieldHasValues } from "../../actions/inventory-shared-actions";
-
-const FormTemplateMetaFieldForm = ({
- entity: initialEntity,
- errors: initialErrors,
- index,
- onMetaFieldTypeValueDeleted,
- onChange
-}) => {
- const [entity, setEntity] = useState({ ...initialEntity });
- const [errors, setErrors] = useState(initialErrors);
- const [currentValue, setCurrentValue] = useState(null);
- const [showValues, setShowValues] = useState(
- metafieldHasValues(initialEntity.type)
- );
-
- useEffect(() => {
- if (onChange && !shallowEqual(initialEntity, entity)) {
- onChange(entity);
- }
- }, [entity]);
-
- useEffect(() => {
- scrollToError(initialErrors);
- if (!shallowEqual(initialEntity, entity)) {
- setEntity({ ...initialEntity });
- setErrors({});
- }
-
- if (!shallowEqual(initialErrors, errors)) {
- setErrors({ ...initialErrors });
- }
- }, [initialEntity, initialErrors]);
-
- const meta_field_value_types_ddl = [
- { label: "CheckBox", value: "CheckBox" },
- { label: "CheckBoxList", value: "CheckBoxList" },
- { label: "ComboBox", value: "ComboBox" },
- { label: "RadioButtonList", value: "RadioButtonList" },
- { label: "Text", value: "Text" },
- { label: "TextArea", value: "TextArea" }
- ];
-
- const handleMetaFieldChange = (id, ev) => {
- const { value, checked, type } = ev.target;
- setEntity((prevEntity) => ({
- ...prevEntity,
- [id]: type === "checkbox" ? checked : value
- }));
- setShowValues(type === "dropdown" && metafieldHasValues(value));
- };
-
- const handleMetaFieldValueChange = (id, ev) => {
- const { value, checked, type } = ev.target;
- setCurrentValue((prevValue) => ({
- ...prevValue,
- [id]: type === "checkbox" ? checked : value
- }));
- };
-
- const handleEditValueRequest = (valueId) => {
- const selectedValue = entity.values.find((value) => value.id === valueId);
- setCurrentValue(selectedValue);
- };
-
- const handleCommitValue = () => {
- if (!currentValue || !currentValue.name || !currentValue.value) return;
-
- const formerValue = entity.values?.find(
- (v) => v.name === currentValue.name
- );
- const rest =
- entity.values?.filter((v) => v.name !== currentValue.name) ?? [];
-
- let value = null;
- if (formerValue) {
- value = { ...currentValue, id: formerValue.id, order: formerValue.order };
- if (formerValue.isNew) {
- value.isNew = formerValue.isNew;
- }
- } else {
- value = {
- ...currentValue,
- id: Date.now(),
- order: rest.length + 1,
- isNew: true
- };
- }
-
- setEntity((prevEntity) => ({
- ...prevEntity,
- values: [...rest, value]
- }));
-
- setCurrentValue(null);
- };
-
- const removeValueLocally = (value) => {
- const values = entity.values
- .filter((v) => v.id !== value.id)
- .map((v, ix) => ({ ...v, order: ix + 1 }));
-
- setEntity((prevEntity) => ({
- ...prevEntity,
- values: [...values]
- }));
-
- setCurrentValue(null);
- };
-
- const handleDeleteValue = (valueId) => {
- if (!onMetaFieldTypeValueDeleted) return;
- const value = entity.values.find((v) => v.id === valueId);
- if (value && value.isNew) {
- removeValueLocally(value);
- return;
- }
-
- Swal.fire({
- title: T.translate("general.are_you_sure"),
- text: `${T.translate("meta_field_values_list.delete_value_warning")} ${
- value.name
- }`,
- type: "warning",
- showCancelButton: true,
- confirmButtonColor: "#DD6B55",
- confirmButtonText: T.translate("general.yes_delete")
- }).then((result) => {
- if (result.value) {
- onMetaFieldTypeValueDeleted(entity.id, valueId);
- }
- });
- };
-
- const columns = [
- { columnKey: "name", value: T.translate("meta_field_values_list.name") },
- { columnKey: "value", value: T.translate("meta_field_values_list.value") },
- {
- columnKey: "is_default",
- value: T.translate("meta_field_values_list.is_default"),
- render: (filter) => (filter.is_default ? "YES" : "NO")
- }
- ];
-
- const table_options = {
- actions: {
- edit: { onClick: handleEditValueRequest },
- delete: { onClick: handleDeleteValue }
- }
- };
-
- const sortedValues = entity.values
- ? entity.values.sort((a, b) => a.order - b.order)
- : [];
-
- return (
-
-
-
-
-
- {
- handleMetaFieldChange("name", ev);
- }}
- />
-
-
-
- {
- handleMetaFieldChange("type", ev);
- }}
- options={meta_field_value_types_ddl}
- />
-
-
-
-
- {
- handleMetaFieldChange("is_required", ev);
- }}
- className="form-check-input"
- />
-
-
-
-
-
- {showValues && (
-
-
-
- {sortedValues.length > 0 && (
-
- {}}
- orderField="order"
- />
-
- )}
-
-
-
- )}
-
-
-
-
-
-
- {
- handleMetaFieldChange("name", ev);
- }}
- />
-
-
-
- {
- handleMetaFieldChange("type", ev);
- }}
- options={meta_field_value_types_ddl}
- />
-
-
-
-
- {
- handleMetaFieldChange("is_required", ev);
- }}
- className="form-check-input"
- />
-
-
-
-
- {showValues && (
-
-
-
- {sortedValues.length > 0 && (
-
- {}}
- orderField="order"
- />
-
- )}
-
-
-
- )}
-
-
- {item.name}
- {item.type}
-
-
-
- );
- }
-);
-
-// Helper function to render the component with Formik
-const renderWithFormik = (props, initialValues = { meta_fields: [] }) =>
- render(
-
-
-
- );
-
-describe("AdditionalInputList", () => {
- const defaultMetaField = {
- id: 1,
- name: "Field 1",
- type: "Text",
- is_required: false,
- minimum_quantity: 0,
- maximum_quantity: 0,
- values: []
- };
-
- const defaultProps = {
- name: "meta_fields",
- onDelete: jest.fn(),
- onDeleteValue: jest.fn(),
- entityId: 1
- };
-
- const defaultInitialValues = {
- meta_fields: [defaultMetaField]
- };
-
- beforeEach(() => {
- jest.clearAllMocks();
- });
-
- describe("Rendering", () => {
- test("renders an AdditionalInput for each meta field", () => {
- const multipleFields = {
- meta_fields: [
- { ...defaultMetaField, id: 1, name: "Field 1" },
- { ...defaultMetaField, id: 2, name: "Field 2" },
- { ...defaultMetaField, id: 3, name: "Field 3" }
- ]
- };
-
- renderWithFormik(defaultProps, multipleFields);
-
- expect(screen.getByTestId("additional-input-0")).toBeInTheDocument();
- expect(screen.getByTestId("additional-input-1")).toBeInTheDocument();
- expect(screen.getByTestId("additional-input-2")).toBeInTheDocument();
- expect(screen.getByTestId("item-name-0")).toHaveTextContent("Field 1");
- expect(screen.getByTestId("item-name-1")).toHaveTextContent("Field 2");
- expect(screen.getByTestId("item-name-2")).toHaveTextContent("Field 3");
- });
-
- test("renders a default metafield when meta_fields is empty", () => {
- renderWithFormik(defaultProps, { meta_fields: [] });
-
- // Should render one default empty field
- expect(screen.getByTestId("additional-input-0")).toBeInTheDocument();
- expect(screen.getByTestId("item-name-0")).toHaveTextContent("");
- expect(screen.getByTestId("item-type-0")).toHaveTextContent("");
- });
- });
-
- describe("handleAddItem", () => {
- test("adds a new empty meta field when onAdd is called", async () => {
- const TestWrapper = () => {
- const { values } = useFormikContext();
- return (
- <>
-
- {values.meta_fields.length}
-
- );
- };
-
- render(
-
-
-
- );
-
- expect(screen.getByTestId("field-count")).toHaveTextContent("1");
-
- const addButton = screen.getByTestId("add-btn-0");
- await userEvent.click(addButton);
-
- await waitFor(() => {
- expect(screen.getByTestId("field-count")).toHaveTextContent("2");
- });
- });
- });
-
- describe("handleRemove", () => {
- test("shows confirmation dialog when delete is clicked", async () => {
- showConfirmDialog.mockResolvedValue(false);
-
- renderWithFormik(defaultProps, defaultInitialValues);
-
- const deleteButton = screen.getByTestId("delete-btn-0");
- await userEvent.click(deleteButton);
-
- expect(showConfirmDialog).toHaveBeenCalledWith(
- expect.objectContaining({
- title: expect.any(String),
- type: "warning"
- })
- );
- });
-
- test("calls API and removes from UI when item has id", async () => {
- const mockOnDelete = jest.fn().mockResolvedValue();
- showConfirmDialog.mockResolvedValue(true);
-
- const TestWrapper = ({ onDelete }) => {
- const { values } = useFormikContext();
- return (
- <>
-
- {values.meta_fields.length}
-
- );
- };
-
- render(
-
-
-
- );
-
- expect(screen.getByTestId("field-count")).toHaveTextContent("1");
-
- const deleteButton = screen.getByTestId("delete-btn-0");
- await userEvent.click(deleteButton);
-
- await waitFor(() => {
- expect(mockOnDelete).toHaveBeenCalledWith(1, 1); // entityId, item.id
- });
- });
-
- test("removes from UI without API call when item has no id", async () => {
- const mockOnDelete = jest.fn();
- showConfirmDialog.mockResolvedValue(true);
-
- const fieldWithoutId = {
- name: "New Field",
- type: "Text",
- is_required: false,
- values: []
- };
-
- const TestWrapper = ({ onDelete }) => {
- const { values } = useFormikContext();
- return (
- <>
-
- {values.meta_fields.length}
-
- );
- };
-
- render(
-
-
-
- );
-
- expect(screen.getByTestId("field-count")).toHaveTextContent("2");
-
- // remove the second field (without id)
- const deleteButton = screen.getByTestId("delete-btn-1");
- await userEvent.click(deleteButton);
-
- await waitFor(() => {
- expect(mockOnDelete).not.toHaveBeenCalled();
- expect(screen.getByTestId("field-count")).toHaveTextContent("1");
- });
- });
-
- test("resets to default meta field when last item is deleted", async () => {
- const mockOnDelete = jest.fn().mockResolvedValue();
- showConfirmDialog.mockResolvedValue(true);
-
- const TestWrapper = ({ onDelete }) => {
- const { values } = useFormikContext();
- return (
- <>
-
- {values.meta_fields.length}
-
- {values.meta_fields[0]?.name || "empty"}
-
-
- );
- };
-
- render(
-
-
-
- );
-
- const deleteButton = screen.getByTestId("delete-btn-0");
- await userEvent.click(deleteButton);
-
- await waitFor(() => {
- // should still have 1 field (the default empty one)
- expect(screen.getByTestId("field-count")).toHaveTextContent("1");
- // field should be reset to empty
- expect(screen.getByTestId("first-field-name")).toHaveTextContent(
- "empty"
- );
- });
- });
- });
-
- describe("areMetafieldsIncomplete", () => {
- test("disables add button when name is empty", () => {
- const fieldWithEmptyName = { ...defaultMetaField, name: "" };
-
- renderWithFormik(defaultProps, { meta_fields: [fieldWithEmptyName] });
-
- expect(screen.getByTestId("add-btn-0")).toBeDisabled();
- });
-
- test("disables add button when type is empty", () => {
- const fieldWithEmptyType = {
- ...defaultMetaField,
- name: "Field",
- type: ""
- };
-
- renderWithFormik(defaultProps, { meta_fields: [fieldWithEmptyType] });
-
- expect(screen.getByTestId("add-btn-0")).toBeDisabled();
- });
-
- test("disables add button when type with options has no values", () => {
- const fieldWithNoValues = {
- ...defaultMetaField,
- name: "Field",
- type: "CheckBoxList",
- values: []
- };
-
- renderWithFormik(defaultProps, { meta_fields: [fieldWithNoValues] });
-
- expect(screen.getByTestId("add-btn-0")).toBeDisabled();
- });
-
- test("disables add button when values are incomplete", () => {
- const fieldWithIncompleteValues = {
- ...defaultMetaField,
- name: "Field",
- type: "ComboBox",
- values: [{ name: "Option", value: "" }] // value is empty
- };
-
- renderWithFormik(defaultProps, {
- meta_fields: [fieldWithIncompleteValues]
- });
-
- expect(screen.getByTestId("add-btn-0")).toBeDisabled();
- });
-
- test("enables add button when all fields are complete", () => {
- const completeField = {
- ...defaultMetaField,
- name: "Field",
- type: "Text"
- };
-
- renderWithFormik(defaultProps, { meta_fields: [completeField] });
-
- expect(screen.getByTestId("add-btn-0")).not.toBeDisabled();
- });
-
- test("enables add button when type with options has complete values", () => {
- const completeFieldWithValues = {
- ...defaultMetaField,
- name: "Field",
- type: "CheckBoxList",
- values: [{ name: "Option 1", value: "opt1" }]
- };
-
- renderWithFormik(defaultProps, {
- meta_fields: [completeFieldWithValues]
- });
-
- expect(screen.getByTestId("add-btn-0")).not.toBeDisabled();
- });
- });
-});
diff --git a/src/components/mui/__tests__/additional-input.test.js b/src/components/mui/__tests__/additional-input.test.js
deleted file mode 100644
index de283043d..000000000
--- a/src/components/mui/__tests__/additional-input.test.js
+++ /dev/null
@@ -1,253 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Formik, Form } from "formik";
-import "@testing-library/jest-dom";
-import AdditionalInput from "../formik-inputs/additional-input/additional-input";
-
-// Mocks
-jest.mock(
- "../formik-inputs/additional-input/meta-field-values",
- () =>
- function MockMetaFieldValues() {
- return MetaFieldValues
;
- }
-);
-
-// Helper function to render the component with Formik
-const renderWithFormik = (props, initialValues = { meta_fields: [] }) =>
- render(
-
-
-
- );
-
-describe("AdditionalInput", () => {
- const defaultItem = {
- id: 1,
- name: "Test Field",
- type: "",
- is_required: false,
- minimum_quantity: 0,
- maximum_quantity: 0,
- values: []
- };
-
- const defaultProps = {
- item: defaultItem,
- itemIdx: 0,
- baseName: "meta_fields",
- onAdd: jest.fn(),
- onDelete: jest.fn(),
- onDeleteValue: jest.fn(),
- entityId: 1,
- isAddDisabled: false
- };
-
- const defaultInitialMetaFields = {
- meta_fields: [defaultItem]
- };
-
- beforeEach(() => {
- jest.clearAllMocks();
- });
-
- describe("Rendering", () => {
- test("renders name, type and is_required fields", () => {
- renderWithFormik(defaultProps, defaultInitialMetaFields);
-
- expect(
- screen.getByPlaceholderText(
- "additional_inputs.placeholders.meta_field_title"
- )
- ).toBeInTheDocument();
- expect(screen.getByRole("combobox")).toBeInTheDocument();
- expect(screen.getByRole("checkbox")).toBeInTheDocument();
- });
-
- test("renders add and delete buttons", () => {
- renderWithFormik(defaultProps, defaultInitialMetaFields);
-
- expect(
- screen.getByRole("button", { name: /delete/i })
- ).toBeInTheDocument();
- expect(screen.getByRole("button", { name: /add/i })).toBeInTheDocument();
- });
- });
-
- describe("Conditional rendering based on type", () => {
- test("shows MetaFieldValues when type is CheckBoxList", () => {
- const itemWithOptions = { ...defaultItem, type: "CheckBoxList" };
-
- renderWithFormik(
- { ...defaultProps, item: itemWithOptions },
- { meta_fields: [itemWithOptions] }
- );
-
- expect(screen.getByTestId("meta-field-values")).toBeInTheDocument();
- });
-
- test("shows MetaFieldValues when type is ComboBox", () => {
- const itemWithOptions = { ...defaultItem, type: "ComboBox" };
-
- renderWithFormik(
- { ...defaultProps, item: itemWithOptions },
- { meta_fields: [itemWithOptions] }
- );
-
- expect(screen.getByTestId("meta-field-values")).toBeInTheDocument();
- });
-
- test("shows MetaFieldValues when type is RadioButtonList", () => {
- const itemWithOptions = { ...defaultItem, type: "RadioButtonList" };
-
- renderWithFormik(
- { ...defaultProps, item: itemWithOptions },
- { meta_fields: [itemWithOptions] }
- );
-
- expect(screen.getByTestId("meta-field-values")).toBeInTheDocument();
- });
-
- test("does not show MetaFieldValues when type is Text", () => {
- renderWithFormik(defaultProps, defaultInitialMetaFields);
-
- expect(screen.queryByTestId("meta-field-values")).not.toBeInTheDocument();
- });
-
- test("shows quantity fields when type is Quantity", () => {
- const itemQuantity = { ...defaultItem, type: "Quantity" };
-
- renderWithFormik(
- { ...defaultProps, item: itemQuantity },
- { meta_fields: [itemQuantity] }
- );
-
- expect(
- screen.getByPlaceholderText(
- "additional_inputs.placeholders.meta_field_minimum_quantity"
- )
- ).toBeInTheDocument();
- expect(
- screen.getByPlaceholderText(
- "additional_inputs.placeholders.meta_field_maximum_quantity"
- )
- ).toBeInTheDocument();
- });
-
- test("does not show quantity fields when type is not Quantity", () => {
- renderWithFormik(defaultProps, defaultInitialMetaFields);
-
- expect(
- screen.queryByPlaceholderText(
- "additional_inputs.placeholders.meta_field_minimum_quantity"
- )
- ).not.toBeInTheDocument();
- expect(
- screen.queryByPlaceholderText(
- "additional_inputs.placeholders.meta_field_maximum_quantity"
- )
- ).not.toBeInTheDocument();
- });
- });
-
- describe("Button interactions", () => {
- test("calls onDelete with item and index when delete button is clicked", async () => {
- const mockOnDelete = jest.fn();
-
- renderWithFormik(
- { ...defaultProps, onDelete: mockOnDelete },
- defaultInitialMetaFields
- );
-
- const deleteButton = screen.getByRole("button", { name: /delete/i });
- await userEvent.click(deleteButton);
-
- expect(mockOnDelete).toHaveBeenCalledWith(defaultItem, 0);
- });
-
- test("calls onAdd when add button is clicked", async () => {
- const mockOnAdd = jest.fn();
-
- renderWithFormik(
- { ...defaultProps, onAdd: mockOnAdd },
- defaultInitialMetaFields
- );
-
- const addButton = screen.getByRole("button", { name: /add/i });
- await userEvent.click(addButton);
-
- expect(mockOnAdd).toHaveBeenCalled();
- });
-
- test("disables add button when isAddDisabled is true", () => {
- renderWithFormik(
- { ...defaultProps, isAddDisabled: true },
- defaultInitialMetaFields
- );
-
- const addButton = screen.getByRole("button", { name: /add/i });
- expect(addButton).toBeDisabled();
- });
-
- test("enables add button when isAddDisabled is false", () => {
- renderWithFormik(
- { ...defaultProps, isAddDisabled: false },
- defaultInitialMetaFields
- );
-
- const addButton = screen.getByRole("button", { name: /add/i });
- expect(addButton).not.toBeDisabled();
- });
- });
-
- describe("Error display", () => {
- test("shows values error when touched and has error", () => {
- const itemWithOptions = { ...defaultItem, type: "CheckBoxList" };
-
- render(
-
-
-
- );
-
- expect(
- screen.getByText("At least one option required")
- ).toBeInTheDocument();
- });
-
- test("does not show values error when not touched", () => {
- const itemWithOptions = { ...defaultItem, type: "CheckBoxList" };
-
- render(
-
-
-
- );
-
- expect(
- screen.queryByText("At least one option required")
- ).not.toBeInTheDocument();
- });
- });
-});
diff --git a/src/components/mui/__tests__/meta-field-values.test.js b/src/components/mui/__tests__/meta-field-values.test.js
deleted file mode 100644
index 36b8950ed..000000000
--- a/src/components/mui/__tests__/meta-field-values.test.js
+++ /dev/null
@@ -1,319 +0,0 @@
-import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Formik, Form, useFormikContext } from "formik";
-import "@testing-library/jest-dom";
-import MetaFieldValues from "../formik-inputs/additional-input/meta-field-values";
-import showConfirmDialog from "../showConfirmDialog";
-
-// Mocks
-jest.mock("../showConfirmDialog", () => jest.fn());
-
-jest.mock(
- "../dnd-list",
- () =>
- function MockDragAndDropList({ items, renderItem }) {
- return (
-
- {items.map((item, index) => (
-
- {renderItem(item, index, {}, { isDragging: false })}
-
- ))}
-