🔧 fix(codeTabsComponent): remove unnecessary max-h-48 class from codeTabsComponent to fix overflow issue

🔧 fix(keypairListComponent): add mx-2 class to keypairListComponent when there are multiple key-value pairs to improve spacing
🔧 fix(keypairListComponent): remove ref parameter from onChange function in keypairListComponent to fix unnecessary re-rendering
🔧 fix(keypairListComponent): add mx-2 class to keypairListComponent when there are multiple key-value pairs to improve spacing
🔧 fix(editNodeModal): add my-3 class to keypairListComponent when there are multiple key-value pairs to improve spacing
🔧 fix(types): add advanced property to KeyPairListComponentType to support advanced mode in keypairListComponent
This commit is contained in:
Cristhian Zanforlin Lousa 2023-09-27 23:05:10 -03:00
commit 61e50ac68e
4 changed files with 32 additions and 17 deletions

View file

@ -682,7 +682,7 @@ export default function CodeTabsComponent({
) : node.data.node.template[
templateField
].type === "dict" ? (
<div className="mx-auto max-h-48 overflow-auto custom-scroll">
<div className="mx-auto overflow-auto custom-scroll">
<KeypairListComponent
disabled={false}
editNode={true}

View file

@ -12,6 +12,7 @@ export default function KeypairListComponent({
disabled,
editNode = false,
duplicateKey,
advanced = false,
}: KeyPairListComponentType): JSX.Element {
useEffect(() => {
if (disabled) {
@ -24,7 +25,7 @@ export default function KeypairListComponent({
useEffect(() => {
if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
ref.current = value;
onChange(value, ref);
onChange(value);
}
}, [value]);
@ -46,14 +47,14 @@ export default function KeypairListComponent({
return (
<div
className={classNames(
ref.current?.length > 1 && editNode ? "my-1" : "",
ref.current?.length > 1 && editNode ? "mx-2 my-1" : "",
"flex h-full flex-col gap-3"
)}
>
{ref.current?.map((obj, index) => {
return Object.keys(obj).map((key, idx) => {
return (
<div key={idx} className="flex w-full gap-3">
<div key={idx} className="flex w-full gap-2">
<Input
type="text"
value={key.trim()}

View file

@ -256,8 +256,21 @@ const EditNodeModal = forwardRef(
</div>
) : myData.current.node?.template[templateParam]
.type === "dict" ? (
<div className="mt-2 max-h-48 w-full overflow-auto custom-scroll">
<div
className={classNames(
"max-h-48 w-full overflow-auto custom-scroll",
myData.current.node!.template[templateParam]
.value?.length > 1
? "my-3"
: ""
)}
>
<KeypairListComponent
advanced={
myData.current.node?.template[
templateParam
].advanced
}
disabled={disabled}
editNode={true}
value={

View file

@ -61,6 +61,7 @@ export type KeyPairListComponentType = {
disabled: boolean;
editNode?: boolean;
duplicateKey?: boolean;
advanced?: boolean;
};
export type DictComponentType = {
@ -134,18 +135,18 @@ export type TooltipComponentType = {
children: ReactElement;
title: string | ReactElement;
placement?:
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
| "bottom-end"
| "bottom-start"
| "bottom"
| "left-end"
| "left-start"
| "left"
| "right-end"
| "right-start"
| "right"
| "top-end"
| "top-start"
| "top";
};
export type ProgressBarType = {