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

Commit e72fef3

Browse files
JarytJaryt
authored
Chore: Upgrade to SDK version with latest config features (#92)
Also added foundational elements for guide
1 parent eb03055 commit e72fef3

24 files changed

Lines changed: 11413 additions & 11829 deletions

‎package.json‎

Lines changed: 4 additions & 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.10",
6+
"@circleci/circleci-config-sdk": "0.5.0-alpha.11",
77
"@craco/craco": "^6.3.0",
88
"@monaco-editor/react": "^4.3.1",
99
"@testing-library/jest-dom": "^5.11.4",
@@ -33,6 +33,9 @@
3333
"uuid": "^8.3.2",
3434
"web-vitals": "^2.1.2"
3535
},
36+
"resolutions": {
37+
"@types/react": "^17.0.38"
38+
},
3639
"scripts": {
3740
"start": "craco start",
3841
"build": "craco build",

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import NavigationPane from './components/panes/NavigationPane';
44
import WorkflowsPane from './components/panes/WorkflowsPane';
55
import Store from './state/Store';
66

7+
// Workaround for https://github.com/ctrlplusb/easy-peasy/issues/741
8+
// const StoreProviderOverride = StoreProvider as any;
79

810
const App = () => {
911
return (

‎src/components/atoms/Card.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export interface CardProps {
2+
description?: string;
3+
title: string;
4+
pinned?: React.ReactElement;
5+
onClick: React.MouseEventHandler<HTMLButtonElement>;
6+
}
7+
8+
const Card = (props: CardProps) => {
9+
return (
10+
<button
11+
type="button"
12+
className="p-4 mb-4 w-full border-circle-gray-300 border-2 rounded text-left"
13+
onClick={props.onClick}
14+
>
15+
<div className="flex flex-row">
16+
<p className="font-bold">{props.title}</p>
17+
<div className="ml-auto z-10">{props.pinned}</div>
18+
</div>
19+
<p className="text-sm mt-1 leading-4 text-circle-gray-500">
20+
{props.description}
21+
</p>
22+
</button>
23+
);
24+
};
25+
26+
export default Card;

‎src/components/atoms/ComponentInfo.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,18 @@ import ComponentMapping from '../../mappings/ComponentMapping';
22

33
const ComponentInfo = (props: { type: ComponentMapping }) => {
44
return (
5-
<>
6-
<p className="font-medium text-sm text-circle-gray-500">{props.type.docsInfo.description}</p>
7-
<a className="ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium" href={props.type.docsInfo.link}>Learn More</a><br></br>
8-
</>
5+
<div className="pb-4">
6+
<p className="font-medium text-sm text-circle-gray-500">
7+
{props.type.docsInfo.description}
8+
</p>
9+
<a
10+
className="ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium"
11+
href={props.type.docsInfo.link}
12+
target="circleci_docs"
13+
>
14+
Learn More
15+
</a>
16+
</div>
917
);
1018
};
1119

‎src/components/atoms/Definition.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import ComponentMapping from '../../mappings/ComponentMapping';
22
import { useStoreActions } from '../../state/Hooks';
3-
import EditDefinitionMenu from '../menus/definitions/EditDefinitionMenu';
3+
import { InspectorDefinitionMenuNav } from '../menus/definitions/InspectorDefinitionMenu';
44

55
const Definition = (props: { data: any; type: ComponentMapping }) => {
66
const Summary = props.type.components.summary;
@@ -21,8 +21,8 @@ const Definition = (props: { data: any; type: ComponentMapping }) => {
2121
}}
2222
onClick={(e) => {
2323
navigateTo({
24-
component: EditDefinitionMenu,
25-
props: { data: props.data, dataType: props.type },
24+
component: InspectorDefinitionMenuNav,
25+
props: { editing: true, values: props.data, dataType: props.type },
2626
});
2727
}}
2828
>

‎src/components/atoms/Tooltip.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { MutableRefObject, ReactElement, useEffect, useState } from 'react';
2+
import ToolTipPointerIcon from '../../icons/ui/ToolTipPointerIcon';
3+
4+
export interface ToolTipProps {
5+
target: MutableRefObject<any>;
6+
pointerColor?: string;
7+
pointerClass?: string;
8+
offsetX?: number;
9+
offsetY?: number;
10+
centered?: boolean;
11+
facing?: 'top' | 'bottom' | 'left' | 'right';
12+
children: ReactElement;
13+
}
14+
15+
const ToolTip = (props: ToolTipProps) => {
16+
const [pos, setPos] = useState({ left: 0, top: 0 });
17+
18+
const updatePos = () => {
19+
const rect = props.target.current.getBoundingClientRect();
20+
21+
setPos({ left: rect.x - rect.width - 32, top: rect.y + 6 });
22+
};
23+
24+
useEffect(() => {
25+
updatePos();
26+
});
27+
28+
return (
29+
<div style={pos} className="fixed flex z-10">
30+
{props.children}
31+
<ToolTipPointerIcon
32+
color="#FFFFFF"
33+
className="h-3 mt-4"
34+
direction="right"
35+
/>
36+
</div>
37+
);
38+
};
39+
40+
export default ToolTip;

‎src/components/atoms/nodes/JobNode.tsx‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ const JobNode: React.FunctionComponent<NodeProps & { data: WorkflowJob }> = (
2020
// );
2121
const updateJob = useStoreActions((actions) => actions.updateJob);
2222
const setConnecting = useStoreActions((actions) => actions.setConnecting);
23+
const removeWorkflowElement = useStoreActions((actions) => actions.removeWorkflowElement);
24+
2325
const connecting = useStoreState((state) => state.connecting);
2426
const updateConnecting = useStoreActions(
2527
(actions) => actions.updateConnecting,
@@ -72,27 +74,6 @@ const JobNode: React.FunctionComponent<NodeProps & { data: WorkflowJob }> = (
7274

7375
const nodeRef = useRef(null);
7476

75-
// const onConnect = (params: Connection) => {
76-
// const targetJob = elements.find(
77-
// (element) => element.id === params.target,
78-
// )?.data;
79-
80-
// setWorkflowElements(
81-
// addEdge(
82-
// {
83-
// ...params,
84-
// animated: false,
85-
// style: { stroke: '#A3A3A3', strokeWidth: '2px' },
86-
// },
87-
// updateWorkflowJob(targetJob, {
88-
// parameters: {
89-
// requires: [props.data.job.name],
90-
// },
91-
// }),
92-
// ),
93-
// );
94-
// };
95-
9677
return (
9778
<div
9879
className={`p-8 flex flex-row cursor-default`}
@@ -171,17 +152,20 @@ const JobNode: React.FunctionComponent<NodeProps & { data: WorkflowJob }> = (
171152
<JobIcon className="w-5 mr-2" />
172153
{props.data.parameters?.name || props.data.job.name}
173154
</div>
174-
<div
155+
<button
175156
className={`my-auto
176157
opacity-${hovering['node'] ? 100 : 0}
177158
transition-opacity duration-150 w-8 h-full flex`}
178159
{...trackHovering(['remove'], ['remove'])}
160+
onClick={() => {
161+
removeWorkflowElement(props.id);
162+
}}
179163
>
180164
<DeleteItemIcon
181165
className="w-3 cursor-pointer m-auto"
182166
color={hovering['remove'] ? 'red' : '#AAAAAA'}
183167
/>
184-
</div>
168+
</button>
185169
</button>
186170

187171
<button
@@ -218,12 +202,12 @@ const JobNode: React.FunctionComponent<NodeProps & { data: WorkflowJob }> = (
218202

219203
<Handle
220204
type="source"
221-
className="opacity-0"
205+
className="opacity-0 cursor-default"
222206
position={Position.Right}
223207
id={`${props.id}_source`}
224208
></Handle>
225209
<Handle
226-
className="opacity-0"
210+
className="opacity-0 cursor-default"
227211
id={`${props.id}_target`}
228212
type="target"
229213
position={Position.Left}

‎src/components/containers/DefinitionsContainer.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1+
import { useRef } from 'react';
12
import ComponentMapping from '../../mappings/ComponentMapping';
23
import { useStoreActions, useStoreState } from '../../state/Hooks';
3-
import CollapsibleList from './CollapsibleList';
4+
import ComponentInfo from '../atoms/ComponentInfo';
45
import Definition from '../atoms/Definition';
56
import {
6-
CreateDefinitionMenu,
7-
CreateDefinitionMenuNav,
8-
} from '../menus/definitions/CreateDefinitionMenu';
7+
InspectorDefinitionMenu,
8+
InspectorDefinitionMenuNav,
9+
} from '../menus/definitions/InspectorDefinitionMenu';
910
import SubTypeMenuNav from '../menus/SubTypeMenu';
10-
import ComponentInfo from '../atoms/ComponentInfo';
11+
import CollapsibleList from './CollapsibleList';
12+
import GuideContainer from './GuideContainer';
1113

1214
export interface DefinitionsProps {
1315
type: ComponentMapping;
@@ -18,10 +20,14 @@ export interface DefinitionsProps {
1820
const DefinitionsContainer = (props: DefinitionsProps) => {
1921
const items = useStoreState(props.type.store.get);
2022
const navigateTo = useStoreActions((actions) => actions.navigateTo);
23+
const guideStep = useStoreState((state) => state.guideStep);
24+
const ref = useRef(null);
2125

22-
console.log(props, 'props')
2326
return (
24-
<div className="w-full p-4 pb-0">
27+
<div ref={ref} className="w-full p-4 pb-0">
28+
{props.type.guide && guideStep === props.type.guide.step && (
29+
<GuideContainer target={ref}>{props.type.guide.info}</GuideContainer>
30+
)}
2531
<CollapsibleList
2632
title={props.type.name.plural}
2733
expanded={props.expanded}
@@ -35,12 +41,12 @@ const DefinitionsContainer = (props: DefinitionsProps) => {
3541
component: SubTypeMenuNav,
3642
props: {
3743
typePage: props.type.subtypes?.component,
38-
menuPage: CreateDefinitionMenu,
44+
menuPage: InspectorDefinitionMenu,
3945
menuProps: { dataType: props.type },
4046
},
4147
}
4248
: {
43-
component: CreateDefinitionMenuNav,
49+
component: InspectorDefinitionMenuNav,
4450
props: { dataType: props.type },
4551
},
4652
)

‎src/components/containers/GuideContainer.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { MutableRefObject } from 'react';
2+
import InfoIcon from '../../icons/ui/InfoIcon';
3+
import { useStoreState } from '../../state/Hooks';
4+
import ToolTip from '../atoms/Tooltip';
5+
6+
export interface GuideContainerProps {
7+
target: MutableRefObject<any>;
8+
children: string;
9+
}
10+
11+
const GuideContainer = (props: GuideContainerProps) => {
12+
const guideStep = useStoreState((state) => state.guideStep);
13+
14+
return (
15+
<ToolTip target={props.target}>
16+
<div className="w-80 p-4 bg-white drop-shadow-lg rounded-lg">
17+
<div className="flex flex-row">
18+
<InfoIcon className="w-5 h-5" color="#000000"></InfoIcon>
19+
<div className="px-3 w-full">
20+
<header className="pb-3 font-bold leading-5">
21+
Step {guideStep} of 3
22+
</header>
23+
<div className="font-medium text-sm text-circle-gray-500 whitespace-pre-line">
24+
{props.children}
25+
</div>
26+
<div className="w-full flex flex-row pt-2">
27+
<button className=" ml-auto tracking-wide hover:underline leading-6 text-sm text-circle-blue font-medium">
28+
Dismiss
29+
</button>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</ToolTip>
35+
);
36+
};
37+
38+
export default GuideContainer;

‎src/components/containers/ParametersContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FieldArray, useField } from 'formik';
22
import ComponentMapping from '../../mappings/ComponentMapping';
33
import ParameterMapping from '../../mappings/ParameterMapping';
44
import { useStoreActions } from '../../state/Hooks';
5-
import { CreateDefinitionMenu } from '../menus/definitions/CreateDefinitionMenu';
5+
import { InspectorDefinitionMenu } from '../menus/definitions/InspectorDefinitionMenu';
66
import SubTypeMenuNav from '../menus/SubTypeMenu';
77

88
const ParameterContainer = (props: {
@@ -26,7 +26,7 @@ const ParameterContainer = (props: {
2626
props: {
2727
typePage: ParameterMapping.subtypes?.component,
2828
typeProps: { component: props.dataMapping },
29-
menuPage: CreateDefinitionMenu,
29+
menuPage: InspectorDefinitionMenu,
3030
menuProps: {
3131
dataType: ParameterMapping,
3232
passBackKey: 'parameters',

0 commit comments

Comments
 (0)
⚡