Skip to content
This repository was archived by the owner on Jun 13, 2024. It is now read-only.

Commit 006382d

Browse files
JarytJaryt
authored
refactor: convert transform method to use sdk parsing helper functions
* chore: upgraded to newest sdk alpha * refactor: updated a few transforms to parsers * refactor: use parsing for components transform
1 parent e72fef3 commit 006382d

19 files changed

Lines changed: 266 additions & 250 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"homepage": "https://circleci-public.github.io/visual-config-editor/",
55
"dependencies": {
6-
"@circleci/circleci-config-sdk": "0.5.0-alpha.11",
6+
"@circleci/circleci-config-sdk": "0.6.0-alpha.2",
77
"@craco/craco": "^6.3.0",
88
"@monaco-editor/react": "^4.3.1",
99
"@testing-library/jest-dom": "^5.11.4",

‎src/components/atoms/Definition.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import { Generable } from '@circleci/circleci-config-sdk/dist/src/lib/Components';
12
import ComponentMapping from '../../mappings/ComponentMapping';
23
import { useStoreActions } from '../../state/Hooks';
34
import { InspectorDefinitionMenuNav } from '../menus/definitions/InspectorDefinitionMenu';
45

5-
const Definition = (props: { data: any; type: ComponentMapping }) => {
6+
const Definition = (props: { data: Generable; type: ComponentMapping }) => {
67
const Summary = props.type.components.summary;
78
const navigateTo = useStoreActions((actions) => actions.navigateTo);
89
const setDragging = useStoreActions((actions) => actions.setDragging);
@@ -20,9 +21,16 @@ const Definition = (props: { data: any; type: ComponentMapping }) => {
2021
}
2122
}}
2223
onClick={(e) => {
24+
// this generated object should always have a single key
25+
const generated = props.data.generate() as { [key: string]: object };
26+
const flattened = Object.entries(generated).map(([key, value]) => ({
27+
name: key,
28+
...value,
29+
}))[0];
30+
2331
navigateTo({
2432
component: InspectorDefinitionMenuNav,
25-
props: { editing: true, values: props.data, dataType: props.type },
33+
props: { editing: true, values: flattened, dataType: props.type },
2634
});
2735
}}
2836
>

‎src/components/atoms/form/ListProperty.tsx‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FieldArray, useField } from 'formik';
1+
import { ArrayHelpers, FieldArray, useField } from 'formik';
22
import { ReactElement } from 'react';
33
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
44
import DeleteItemIcon from '../../../icons/ui/DeleteItemIcon';
@@ -14,6 +14,47 @@ export type ListPropertyProps = InspectorFieldProps & {
1414
emptyText?: string;
1515
};
1616

17+
export type ListItemProps = {
18+
index: number;
19+
name: string;
20+
arrayHelper: ArrayHelpers;
21+
};
22+
23+
const ListItem = ({ index, name, arrayHelper }: ListItemProps) => {
24+
return (
25+
<Draggable key={index} draggableId={`${index}`} index={index}>
26+
{(provided, snapshot) => (
27+
<div
28+
className="w-full mb-2 p-1 px-3 text-sm
29+
bg-white border border-circle-gray-300 rounded-md2 flex flex-row"
30+
ref={provided.innerRef}
31+
{...provided.draggableProps}
32+
>
33+
<button
34+
className="flex-1 cursor-pointer text-left text-circle-black leading-6"
35+
type="button"
36+
>
37+
{name}
38+
</button>
39+
<div className="ml-auto mr-3" {...provided.dragHandleProps}>
40+
<DragListIcon className="w-4 h-6 py-1" color="#AAAAAA" />
41+
</div>
42+
<button
43+
onClick={() => {
44+
arrayHelper.remove(index);
45+
}}
46+
type="button"
47+
className="my-auto"
48+
>
49+
<DeleteItemIcon className="w-3 h-3" color="#AAAAAA" />
50+
</button>
51+
</div>
52+
)}
53+
</Draggable>
54+
);
55+
};
56+
57+
// TODO: Refactor
1758
const ListProperty = ({
1859
label,
1960
values,
@@ -51,48 +92,11 @@ const ListProperty = ({
5192
className="p-2 pr-0"
5293
>
5394
{values?.map((cmd: any, index: number) => (
54-
<Draggable
55-
key={index}
56-
draggableId={`${index}`}
95+
<ListItem
96+
name={cmd.name}
5797
index={index}
58-
>
59-
{(provided, snapshot) => (
60-
<div
61-
className="w-full mb-2 p-1 px-3 text-sm
62-
bg-white border border-circle-gray-300 rounded-md2 flex flex-row"
63-
ref={provided.innerRef}
64-
{...provided.draggableProps}
65-
>
66-
<button
67-
className="flex-1 cursor-pointer text-left text-circle-black leading-6"
68-
type="button"
69-
>
70-
{cmd.name}
71-
</button>
72-
<div
73-
className="ml-auto mr-3"
74-
{...provided.dragHandleProps}
75-
>
76-
<DragListIcon
77-
className="w-4 h-6 py-1"
78-
color="#AAAAAA"
79-
/>
80-
</div>
81-
<button
82-
onClick={() => {
83-
arrayHelper.remove(index);
84-
}}
85-
type="button"
86-
className="my-auto"
87-
>
88-
<DeleteItemIcon
89-
className="w-3 h-3"
90-
color="#AAAAAA"
91-
/>
92-
</button>
93-
</div>
94-
)}
95-
</Draggable>
98+
arrayHelper={arrayHelper}
99+
/>
96100
))}
97101
{provided.placeholder}
98102
</div>

‎src/components/atoms/summaries/ExecutorSummary.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Executor';
1+
import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Reusable';
22
import ExecutorIcon from '../../../icons/components/ExecutorIcon';
33

44
const ExecutorSummary: React.FunctionComponent<{ data: ReusableExecutor }> = (

‎src/components/containers/DefinitionsContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@ const DefinitionsContainer = (props: DefinitionsProps) => {
4242
props: {
4343
typePage: props.type.subtypes?.component,
4444
menuPage: InspectorDefinitionMenu,
45-
menuProps: { dataType: props.type },
45+
menuProps: { dataType: props.type, flatten: true },
4646
},
4747
}
4848
: {
4949
component: InspectorDefinitionMenuNav,
50-
props: { dataType: props.type },
50+
props: { dataType: props.type, flatten: true },
5151
},
5252
)
5353
}

‎src/components/containers/inspector/CommandInspector.tsx‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,37 @@ import StepPropertiesMenu from '../../menus/definitions/StepDefinitionMenu';
88
import StepTypePageNav from '../../menus/definitions/subtypes/StepTypePage';
99
import SubTypeMenuNav from '../../menus/SubTypeMenu';
1010

11-
const CommandInspector = (
12-
props: FormikValues & { definitions: DefinitionModel },
11+
const NewButton = (
12+
props: FormikValues & {
13+
definitions: DefinitionModel;
14+
},
1315
) => {
1416
const navigateTo = useStoreActions((actions) => actions.navigateTo);
17+
return (
18+
<button
19+
type="button"
20+
onClick={() => {
21+
22+
navigateTo({
23+
component: SubTypeMenuNav,
24+
props: {
25+
typePage: StepTypePageNav,
26+
menuPage: StepPropertiesMenu,
27+
passThrough: { dataType: CommandMapping },
28+
},
29+
values: props.values,
30+
});
31+
}}
32+
className="ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium"
33+
>
34+
New
35+
</button>
36+
);
37+
};
1538

39+
const CommandInspector = (
40+
props: FormikValues & { definitions: DefinitionModel },
41+
) => {
1642
return (
1743
<div>
1844
<InspectorProperty
@@ -29,26 +55,8 @@ const CommandInspector = (
2955
expanded
3056
required
3157
emptyText="No steps defined yet. At least one step is required."
32-
titleExpanded={
33-
<button
34-
type="button"
35-
onClick={() => {
36-
navigateTo({
37-
component: SubTypeMenuNav,
38-
props: {
39-
typePage: StepTypePageNav,
40-
menuPage: StepPropertiesMenu,
41-
passThrough: { dataType: CommandMapping },
42-
},
43-
values: props.values,
44-
});
45-
}}
46-
className="ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium"
47-
>
48-
New
49-
</button>
50-
}
51-
></ListProperty>
58+
titleExpanded={<NewButton values={props.values} definitions={props.definitions} />}
59+
/>
5260
</div>
5361
);
5462
};

‎src/components/containers/inspector/ExecutorInspector.tsx‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,48 @@ import InspectorProperty from '../../atoms/form/InspectorProperty';
44
import { executorSubtypes } from './subtypes/ExecutorSubtypes';
55

66
const ExecutorInspector = (
7-
props: FormikValues & { definitions: DefinitionModel },
7+
props: FormikValues & {
8+
definitions: DefinitionModel;
9+
subtype?: string;
10+
},
811
) => {
12+
if (!props.subtype) {
13+
return <div>
14+
Something went wrong!
15+
</div>;
16+
}
17+
918
return (
1019
<div>
1120
<InspectorProperty label="Name" name="name" required />
12-
<InspectorProperty label="Description" name="executor.parameters.description" as="textarea" />
21+
<InspectorProperty
22+
label="Description"
23+
name={`${props.values.type}.parameters.description`}
24+
as="textarea"
25+
/>
1326
<InspectorProperty
1427
label="Resource Class"
1528
name="resource_class"
1629
required
1730
as="select"
1831
>
19-
{executorSubtypes[props.values.type]?.resourceClasses?.map(
32+
{executorSubtypes[props.subtype]?.resourceClasses?.map(
2033
(resourceClass) => (
2134
<option value={resourceClass} key={resourceClass}>
2235
{resourceClass}
2336
</option>
2437
),
2538
)}
2639
</InspectorProperty>
27-
{executorSubtypes[props.values.type]?.fields}
28-
<InspectorProperty label="Shell" name="executor.parameters.shell" />
29-
<InspectorProperty label="Working Directory" name="executor.parameters.working_directory" />
40+
{executorSubtypes[props.subtype]?.fields}
41+
<InspectorProperty
42+
label="Shell"
43+
name={`${props.values.type}.parameters.shell`}
44+
/>
45+
<InspectorProperty
46+
label="Working Directory"
47+
name={`${props.values.type}.parameters.working_directory`}
48+
/>
3049
</div>
3150
);
3251
};

‎src/components/containers/inspector/subtypes/ExecutorSubtypes.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
import { executor } from '@circleci/circleci-config-sdk';
2-
import { DockerExecutor, MachineExecutor, MacOSExecutor, WindowsExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Executor';
1+
import { executors } from '@circleci/circleci-config-sdk';
32
import { SubTypeMapping } from '../../../../mappings/ComponentMapping';
43
import InspectorProperty from '../../../atoms/form/InspectorProperty';
54

65
export interface ExecutorSubTypes {
76
[type: string]: SubTypeMapping & {
87
resourceClasses: string[];
9-
};
8+
};
109
}
1110

1211
const executorSubtypes: ExecutorSubTypes = {
1312
docker: {
1413
text: 'Docker',
15-
component: executor.DockerExecutor,
14+
component: executors.DockerExecutor,
1615
resourceClasses: [
1716
'small',
1817
'medium',
@@ -23,34 +22,35 @@ const executorSubtypes: ExecutorSubTypes = {
2322
'2xlarge+',
2423
],
2524
fields: (
26-
<InspectorProperty label="Image" name="executor.image.image" required />
25+
<InspectorProperty label="Image" name="docker[0].image" required />
2726
),
2827
docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-docker',
2928
description: 'Steps run in container with provided image',
3029
},
3130
machine: {
3231
text: 'Machine',
33-
component: executor.MachineExecutor,
32+
component: executors.MachineExecutor,
3433
resourceClasses: ['medium', 'large', 'xlarge', '2xlarge'],
35-
fields: <InspectorProperty label="Image" name="executor.image" required />,
34+
fields: <InspectorProperty label="Image" name="machine.image" required />,
3635
docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-machine',
3736
description: 'Steps run on Linux Virtual Machine',
3837
},
3938
macos: {
4039
text: 'MacOS',
41-
component: executor.MacOSExecutor,
40+
component: executors.MacOSExecutor,
4241
resourceClasses: ['medium', 'large'],
43-
fields: <InspectorProperty label="Xcode" name="executor.xcode" required />,
42+
fields: <InspectorProperty label="Xcode" name="macos.xcode" required />,
4443
docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-macos',
4544
description:
4645
'Steps run on macOS Virtual Machine with specific Xcode version',
4746
},
4847
windows: {
4948
text: 'Windows',
50-
component: executor.WindowsExecutor,
51-
resourceClasses: ['medium', 'large', 'xlarge', '2xlarge'],
52-
fields: <InspectorProperty label="Image" name="executor.image" required />,
53-
docsLink: 'https://circleci.com/docs/2.0/executor-types/#using-the-windows-executor',
49+
component: executors.WindowsExecutor,
50+
resourceClasses: ['windows.medium', 'windows.large', 'windows.xlarge', 'windows.2xlarge'],
51+
fields: <InspectorProperty label="Image" name="machine.image" required />,
52+
docsLink:
53+
'https://circleci.com/docs/2.0/executor-types/#using-the-windows-executor',
5454
description: 'Steps run on Windows Virtual Machine',
5555
},
5656
};

‎src/components/containers/inspector/subtypes/ParameterSubtypes.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Executor';
1+
import { ReusableExecutor } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Reusable';
22
import { SubTypeMapping } from '../../../../mappings/ComponentMapping';
33
import InspectorProperty from '../../../atoms/form/InspectorProperty';
44

‎src/components/menus/SubTypeMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export type SubTypeSelectPageProps<T> = {
1414
};
1515
export type SubTypeMenuPageProps<T> = {
1616
subtype: SubTypeReference<T>;
17-
selectSubtype: () => void;
17+
onSelectSubtype: () => void;
1818
};
1919
export interface SelectedSubType<T> {
2020
current?: SubTypeReference<T>;
@@ -42,7 +42,7 @@ const SubTypeMenu = <SubTypeRef,>(props: SubTypeMenuProps<SubTypeRef>) => {
4242
{subtype?.current ? (
4343
<SubTypeMenuPage
4444
subtype={subtype.current}
45-
selectSubtype={navBack}
45+
onSelectSubtype={navBack}
4646
{...props.menuProps}
4747
/>
4848
) : (

0 commit comments

Comments
 (0)
⚡