Skip to content

Commit 2af3ef7

Browse files
wzrdxwzrdx
committed
Default custom key value pairs
1 parent dbc2f92 commit 2af3ef7

File tree

7 files changed

+79
-23
lines changed

7 files changed

+79
-23
lines changed

‎src/components/job/job-steps/deployment-types/GenericDeployment.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function GenericDeployment() {
4848
</SlateCard>
4949

5050
<SlateCard title="ENV Variables">
51-
<KeyValueEntriesSection name="deployment.envVars" />
51+
<KeyValueEntriesSection name="deployment.envVars" displayLabel="environment variables" />
5252
</SlateCard>
5353

5454
<SlateCard title="Dynamic ENV Variables">

‎src/components/job/job-steps/deployment-types/NativeDeployment.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { BOOLEAN_TYPES } from '@data/booleanTypes';
2+
import { pluginSignaturesCustomParams } from '@data/default-values/customParams';
23
import { PLUGIN_SIGNATURE_TYPES } from '@data/pluginSignatureTypes';
34
import { SlateCard } from '@shared/cards/SlateCard';
45
import KeyValueEntriesSection from '@shared/deployment/KeyValueEntriesSection';
@@ -11,6 +12,7 @@ import { useFormContext } from 'react-hook-form';
1112
function NativeDeployment() {
1213
const { watch } = useFormContext();
1314
const enableTunneling = watch('deployment.enableTunneling');
15+
const pluginSignature: (typeof PLUGIN_SIGNATURE_TYPES)[number] = watch('deployment.pluginSignature');
1416

1517
return (
1618
<div className="col gap-6">
@@ -50,7 +52,12 @@ function NativeDeployment() {
5052
</SlateCard>
5153

5254
<SlateCard title="Custom Parameters">
53-
<KeyValueEntriesSection name="deployment.customParams" maxEntries={50} />
55+
<KeyValueEntriesSection
56+
name="deployment.customParams"
57+
displayLabel="custom parameters"
58+
maxEntries={50}
59+
defaultEntries={pluginSignaturesCustomParams[pluginSignature] ?? []}
60+
/>
5461
</SlateCard>
5562

5663
<SlateCard title="Pipeline">
@@ -60,7 +67,11 @@ function NativeDeployment() {
6067
<InputWithLabel name="deployment.pipelineInputUri" label="Pipeline Input URI" placeholder="None" />
6168
</div>
6269

63-
<KeyValueEntriesSection name="deployment.pipelineParams" label="Pipeline Parameters" maxEntries={50} />
70+
<KeyValueEntriesSection
71+
name="deployment.pipelineParams"
72+
displayLabel="pipeline parameters"
73+
maxEntries={50}
74+
/>
6475
</div>
6576
</SlateCard>
6677

‎src/data/default-values/customParams.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
export const pluginSignaturesCustomParams = {
2+
SOME_PLUGIN_01: [
3+
{
4+
key: 'DEFAULT_KEY',
5+
value: 'DEFAULT_VALUE1',
6+
},
7+
],
8+
SOME_PLUGIN_02: [
9+
{
10+
key: 'DEFAULT_KEY',
11+
value: 'DEFAULT_VALUE2',
12+
},
13+
],
14+
SOME_PLUGIN_03: [
15+
{
16+
key: 'DEFAULT_KEY',
17+
value: 'DEFAULT_VALUE3',
18+
},
19+
],
20+
};

‎src/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ body {
88
@apply h-screen w-screen font-mona text-body;
99
}
1010

11+
@layer utilities {
12+
input:disabled {
13+
opacity: 0.7 !important;
14+
}
15+
}
16+
1117
/* Utilities */
1218
.row {
1319
@apply flex items-center;

‎src/shared/deployment/DynamicEnvSection.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default function DynamicEnvSection() {
1717
});
1818

1919
// Get array-level errors
20-
const arrayError = (formState.errors.deployment as any)?.dynamicEnvVars;
20+
const errors = (formState.errors.deployment as any)?.dynamicEnvVars;
2121

2222
return (
2323
<div className="col gap-4">
@@ -27,7 +27,7 @@ export default function DynamicEnvSection() {
2727
) : (
2828
fields.map((field, index) => {
2929
// Get the error for this specific dynamic env entry
30-
const entryError = arrayError?.[index];
30+
const entryError = errors?.[index];
3131

3232
return (
3333
<div className="col gap-2" key={field.id}>
@@ -41,7 +41,7 @@ export default function DynamicEnvSection() {
4141
// Check for specific error on this key input or array-level error
4242
const specificKeyError = entryError?.key;
4343
const hasError =
44-
!!fieldState.error || !!specificKeyError || !!arrayError?.root?.message;
44+
!!fieldState.error || !!specificKeyError || !!errors?.root?.message;
4545

4646
return (
4747
<StyledInput
@@ -63,9 +63,7 @@ export default function DynamicEnvSection() {
6363
errorMessage={
6464
fieldState.error?.message ||
6565
specificKeyError?.message ||
66-
(arrayError?.root?.message && index === 0
67-
? arrayError.root.message
68-
: undefined)
66+
(errors?.root?.message && index === 0 ? errors.root.message : undefined)
6967
}
7068
/>
7169
);

‎src/shared/deployment/KeyValueEntriesSection.tsx‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,16 @@ import VariableSectionRemove from './VariableSectionRemove';
77
// This component assumes it's being used in the deployment step
88
export default function KeyValueEntriesSection({
99
name,
10+
displayLabel = 'entries',
1011
label,
1112
maxEntries,
13+
defaultEntries,
1214
}: {
1315
name: string;
16+
displayLabel?: string;
1417
label?: string;
1518
maxEntries?: number;
19+
defaultEntries?: { key: string; value: string }[];
1620
}) {
1721
const { control, formState, trigger } = useFormContext();
1822

@@ -24,7 +28,7 @@ export default function KeyValueEntriesSection({
2428
// Get array-level errors
2529
const key = name.split('.')[1];
2630
const deploymentErrors = formState.errors.deployment as any;
27-
const arrayError = deploymentErrors?.[key];
31+
const errors = deploymentErrors?.[key];
2832

2933
return (
3034
<div className="col gap-4">
@@ -36,16 +40,35 @@ export default function KeyValueEntriesSection({
3640
)}
3741

3842
<div className="col gap-2">
43+
{!!defaultEntries && defaultEntries.length > 0 && (
44+
<>
45+
{defaultEntries.map((entry, index) => (
46+
<div key={entry.key} className="flex gap-3">
47+
<VariableSectionIndex index={index} />
48+
49+
<div className="flex w-full gap-2">
50+
<StyledInput value={entry.key} isDisabled />
51+
<StyledInput value={entry.value} isDisabled />
52+
</div>
53+
54+
<div className="invisible">
55+
<VariableSectionRemove onClick={() => {}} />
56+
</div>
57+
</div>
58+
))}
59+
</>
60+
)}
61+
3962
{fields.length === 0 ? (
40-
<div className="text-sm italic text-slate-500">No entries added yet.</div>
63+
<div className="text-sm italic text-slate-500">No {displayLabel} added yet.</div>
4164
) : (
4265
fields.map((field, index) => {
4366
// Get the error for this specific entry
44-
const entryError = arrayError?.[index];
67+
const entryError = errors?.[index];
4568

4669
return (
47-
<div className="flex gap-3" key={field.id}>
48-
<VariableSectionIndex index={index} />
70+
<div key={field.id} className="flex gap-3">
71+
<VariableSectionIndex index={index + (defaultEntries?.length ?? 0)} />
4972

5073
<div className="flex w-full gap-2">
5174
<Controller
@@ -55,7 +78,7 @@ export default function KeyValueEntriesSection({
5578
// Check for specific error on this key input or array-level error
5679
const specificKeyError = entryError?.key;
5780
const hasError =
58-
!!fieldState.error || !!specificKeyError || !!arrayError?.root?.message;
81+
!!fieldState.error || !!specificKeyError || !!errors?.root?.message;
5982

6083
return (
6184
<StyledInput
@@ -77,8 +100,8 @@ export default function KeyValueEntriesSection({
77100
errorMessage={
78101
fieldState.error?.message ||
79102
specificKeyError?.message ||
80-
(arrayError?.root?.message && index === 0
81-
? arrayError.root.message
103+
(errors?.root?.message && index === 0
104+
? errors.root.message
82105
: undefined)
83106
}
84107
/>

‎src/shared/deployment/TargetNodesSection.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function TargetNodesSection() {
1515
const targetNodesCount: number = watch('specifications.targetNodesCount');
1616

1717
// Get array-level errors
18-
const arrayError = (formState.errors.deployment as any)?.targetNodes;
18+
const errors = (formState.errors.deployment as any)?.targetNodes;
1919

2020
return (
2121
<div className="col gap-4" key={fields.length}>
@@ -30,7 +30,7 @@ export default function TargetNodesSection() {
3030
) : (
3131
fields.map((field, index) => {
3232
// Get the error for this specific entry
33-
const entryError = arrayError?.[index];
33+
const entryError = errors?.[index];
3434

3535
return (
3636
<div className="flex gap-3" key={field.id}>
@@ -43,7 +43,7 @@ export default function TargetNodesSection() {
4343
// Check for specific error on this address input or array-level error
4444
const specificAddressError = entryError?.address;
4545
const hasError =
46-
!!fieldState.error || !!specificAddressError || !!arrayError?.root?.message;
46+
!!fieldState.error || !!specificAddressError || !!errors?.root?.message;
4747

4848
return (
4949
<StyledInput
@@ -62,9 +62,7 @@ export default function TargetNodesSection() {
6262
errorMessage={
6363
fieldState.error?.message ||
6464
specificAddressError?.message ||
65-
(arrayError?.root?.message && index === 0
66-
? arrayError.root.message
67-
: undefined)
65+
(errors?.root?.message && index === 0 ? errors.root.message : undefined)
6866
}
6967
/>
7068
);

0 commit comments

Comments
 (0)