From af4fb3774ee0bc6298a60507512f73f6debb0c74 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 7 Jan 2025 09:07:08 -0300 Subject: [PATCH] feat: Revamp GlobalVariableModal (#5512) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 📝 (GlobalVariableModal.tsx): Refactor GlobalVariableModal component to use Tabs component instead of Select for type selection and improve layout and styling of input fields and labels 🔧 (index.tsx): Add popoverWidth prop to InputComponent to allow setting the width of the popover in CustomInputPopover component 🔧 (index.tsx): Add popoverWidth prop to InputComponent in InputGlobalComponent to set the width of the popover to 315px ✨ (tabs-button.tsx): introduce new TabsButton component to handle tab functionality in UI components 📝 (tabs-button.tsx): add documentation for Tabs, TabsContent, TabsList, TabsTrigger components 📝 (components/index.ts): add popoverWidth property to InputComponentType to control the width of the popover in UI components * ✨ (GlobalVariableModal.tsx): Add ForwardedIconComponent to display an icon next to the modal header text for better visual representation 📝 (GlobalVariableModal.tsx): Update TabsTrigger components to include data-testid attribute for testing purposes ✨ (index.tsx): Introduce new components OptionBadge, CommandItemContent, and SelectionIndicator to improve code organization and reusability ♻️ (index.tsx): Refactor handleRemoveOption function to have a more descriptive parameter signature and improve readability 📝 (index.tsx): Add comments to clarify the purpose of handleOptionSelect function and improve code documentation 📝 (index.tsx): Add comments to describe the purpose of getInputClassName and getAnchorClassName functions for better code understanding ✨ (globalVariables.spec.ts): improve placeholder text for variable name and value fields for better user understanding and experience * 🐛 (GlobalVariableModal.tsx): Fix disabled state logic for TabsTrigger components to correctly reflect initialData type 📝 (GlobalVariableModal.tsx): Update label for submit button to dynamically change based on the presence of initialData * 🐛 (index.tsx): Fix issue where options were not being correctly memoized as a Set to prevent unnecessary re-renders. Update memoizedOptions to correctly memoize options as a Set. * 📝 (userSettings.spec.ts): Update placeholder text for variable name and value fields to improve clarity and user experience. --- .../GlobalVariableModal.tsx | 150 +++++----- .../components/popover/index.tsx | 278 ++++++++++++------ .../components/inputComponent/index.tsx | 3 +- .../components/inputGlobalComponent/index.tsx | 1 + .../src/components/ui/tabs-button.tsx | 54 ++++ src/frontend/src/types/components/index.ts | 1 + .../core/features/globalVariables.spec.ts | 11 +- .../extended/features/userSettings.spec.ts | 23 +- 8 files changed, 327 insertions(+), 194 deletions(-) create mode 100644 src/frontend/src/components/ui/tabs-button.tsx diff --git a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx b/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx index f71685bf1..42707ba0b 100644 --- a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx +++ b/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx @@ -7,17 +7,10 @@ import getUnavailableFields from "@/stores/globalVariablesStore/utils/get-unavai import { GlobalVariable } from "@/types/global_variables"; import { useEffect, useState } from "react"; -import ForwardedIconComponent from "@/components/common/genericIconComponent"; +import { ForwardedIconComponent } from "@/components/common/genericIconComponent"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { Textarea } from "@/components/ui/textarea"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs-button"; import BaseModal from "@/modals/baseModal"; import useAlertStore from "@/stores/alertStore"; import { useTypesStore } from "@/stores/typesStore"; @@ -134,88 +127,89 @@ export default function GlobalVariableModal({ onSubmit={submitForm} disable={disabled} > - - - {" "} - {initialData ? "Update" : "Create"} Variable{" "} - + {children} -
- - { - setKey(e.target.value); - }} - placeholder="Insert a name for the variable..." - > - - - + + + Credential + + + Generic + + + +
- - {type === "Credential" ? ( +
+ + setKey(e.target.value)} + placeholder="Enter a name for the variable..." + /> +
+ +
+ + {type === "Credential" ? ( + setValue(e)} + placeholder="Enter a value for the variable..." + nodeStyle + /> + ) : ( + setValue(e.target.value)} + placeholder="Enter a value for the variable..." + /> + )} +
+ +
+ { - setValue(e); - }} - placeholder="Insert a value for the variable..." - nodeStyle + setSelectedOptions={(value) => setFields(value)} + selectedOptions={fields} + options={availableFields} + password={false} + placeholder="Choose a field for the variable..." + id="apply-to-fields" + popoverWidth="520px" + optionsPlaceholder="Fields" /> - ) : ( -