Skip to content

Commit ebc2d63

Browse files
madeindjsmadeindjs
authored
Merge pull request #1056 from writer/AB-103
feat(ui): introduce new blueprint node design - AB-103
2 parents f592a59 + 5d64b01 commit ebc2d63

File tree

11 files changed

+496
-221
lines changed

11 files changed

+496
-221
lines changed

‎src/ui/src/builder/settings/BuilderSettings.vue‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,6 @@ import WdsButton from "@/wds/WdsButton.vue";
9797
import WdsIcon from "@/wds/WdsIcon.vue";
9898
import { SelectionStatus } from "../builderManager";
9999
import { useButtonClipboard } from "../useButtonClipboard";
100-
import { COMPONENT_TYPES_PAGE } from "@/constants/component";
101100
import SharedMoreDropdown from "@/components/shared/SharedMoreDropdown.vue";
102101
import { useWriterTracking } from "@/composables/useWriterTracking";
103102
import BuilderSettingsActions from "./BuilderSettingsActions.vue";
@@ -106,25 +105,17 @@ import {
106105
useBuilderSettingsActions,
107106
} from "./useBuilderSettingsActions";
108107
import BuilderSettingsAddComponentModal from "./BuilderSettingsAddComponentModal.vue";
108+
import { useComponentInformation } from "@/composables/useComponentInformation";
109+
import { useBlueprintComponentResultId } from "@/composables/useBlueprintComponentResultId";
109110
110111
const wf = inject(injectionKeys.core);
111112
const ssbm = inject(injectionKeys.builderManager);
112113
113-
const component = computed(() =>
114-
wf.getComponentById(ssbm.firstSelectedId.value),
114+
const { component, definition: componentDefinition } = useComponentInformation(
115+
wf,
116+
ssbm.firstSelectedId,
115117
);
116-
117-
const resultId = computed(() => {
118-
const componentType = component.value?.type;
119-
120-
const hasResultId =
121-
componentType &&
122-
!COMPONENT_TYPES_PAGE.has(componentType) &&
123-
component.value?.type.startsWith("blueprints_") &&
124-
componentDefinition.value?.outs?.["success"] !== undefined;
125-
126-
return hasResultId ? `@{results.${component.value.id}}` : "";
127-
});
118+
const resultId = useBlueprintComponentResultId(component, componentDefinition);
128119
129120
const { copyText: copyComponentId, isCopied: isComponentIdCopied } =
130121
useButtonClipboard(resultId);
@@ -154,12 +145,6 @@ function toggleSettings() {
154145
ssbm.isSettingsBarCollapsed.value = !ssbm.isSettingsBarCollapsed.value;
155146
}
156147
157-
const componentDefinition = computed(() => {
158-
const { type } = component.value;
159-
const definition = wf.getComponentDefinition(type);
160-
return definition;
161-
});
162-
163148
watch(component, (newComponent) => {
164149
if (!newComponent) ssbm.setSelection(null);
165150
});

‎src/ui/src/builder/settings/useBuilderSettingsActions.ts‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { computed } from "vue";
1+
import { computed, MaybeRef, unref } from "vue";
22
import { useComponentActions } from "../useComponentActions";
33
import { Core, BuilderManager } from "@/writerTypes";
44
import { getModifierKeyName, isPlatformMac } from "@/core/detectPlatform";
@@ -17,11 +17,26 @@ export enum BuilderSettingsDropdownActions {
1717
Delete = "delete",
1818
}
1919

20+
export function isBuilderSettingsDropdownAction(
21+
value: unknown,
22+
): value is BuilderSettingsDropdownActions {
23+
return (
24+
typeof value === "string" &&
25+
Object.values(BuilderSettingsDropdownActions).includes(
26+
value as BuilderSettingsDropdownActions,
27+
)
28+
);
29+
}
30+
31+
/**
32+
* @param targetComponent specific the component that will be used for actions
33+
*/
2034
export function useBuilderSettingsActions(
2135
wf: Core,
22-
ssbm: BuilderManager,
36+
wfbm: BuilderManager,
2337
tracking?: ReturnType<typeof useWriterTracking>,
2438
callbacks: Partial<Record<BuilderSettingsDropdownActions, () => void>> = {},
39+
targetComponent?: MaybeRef<{ instancePath: string; componentId: string }>,
2540
) {
2641
const {
2742
moveComponentUp,
@@ -38,49 +53,59 @@ export function useBuilderSettingsActions(
3853
getEnabledMoves,
3954
removeComponentsSubtree,
4055
goToParent,
41-
} = useComponentActions(wf, ssbm, tracking);
56+
} = useComponentActions(wf, wfbm, tracking);
4257

4358
const toasts = useToasts();
4459

45-
const selectedId = ssbm.firstSelectedId;
46-
const selectedInstancePath = computed(
47-
() => ssbm.firstSelectedItem.value?.instancePath,
48-
);
60+
const componentId = computed(() => {
61+
return targetComponent
62+
? unref(targetComponent).componentId
63+
: wfbm.firstSelectedId.value;
64+
});
65+
const instancePath = computed(() => {
66+
return targetComponent
67+
? unref(targetComponent).instancePath
68+
: wfbm.firstSelectedItem.value.instancePath;
69+
});
4970

5071
const shortcutsInfo = computed(() => {
51-
const component = wf.getComponentById(selectedId.value);
72+
const component = wf.getComponentById(componentId.value);
5273
if (!component) return {};
5374
const { up: isMoveUpEnabled, down: isMoveDownEnabled } =
54-
getEnabledMoves(selectedId.value);
75+
getEnabledMoves(componentId.value);
5576
return {
56-
isAddEnabled: isAddAllowed(selectedId.value),
77+
isAddEnabled: isAddAllowed(componentId.value),
5778
componentTypeName: wf.getComponentDefinition(component.type)?.name,
5879
toolkit: wf.getComponentDefinition(component.type)?.toolkit,
5980
isMoveUpEnabled,
6081
isMoveDownEnabled,
61-
isCopyEnabled: isCopyAllowed(selectedId.value),
62-
isCutEnabled: isCutAllowed(selectedId.value),
63-
isGoToParentEnabled: isGoToParentAllowed(selectedId.value),
64-
isDeleteEnabled: isDeleteAllowed(selectedId.value),
82+
isCopyEnabled: isCopyAllowed(componentId.value),
83+
isCutEnabled: isCutAllowed(componentId.value),
84+
isGoToParentEnabled: isGoToParentAllowed(componentId.value),
85+
isDeleteEnabled: isDeleteAllowed(componentId.value),
6586
};
6687
});
6788

6889
const isPasteEnabled = computed(() => {
69-
if (!ssbm.firstSelectedId.value) return false;
70-
return isPasteAllowed(ssbm.firstSelectedId.value);
90+
if (!wfbm.firstSelectedId.value) return false;
91+
return isPasteAllowed(wfbm.firstSelectedId.value);
7192
});
7293

7394
async function handlePasteComponent() {
7495
try {
75-
await pasteComponent(selectedId.value);
96+
await pasteComponent(componentId.value);
7697
} catch (error) {
7798
toasts.pushToast({ type: "error", message: String(error) });
7899
}
79100
}
80101

81-
function deleteSelectedComponents() {
102+
function deleteComponent() {
82103
if (!shortcutsInfo.value.isDeleteEnabled) return;
83-
const componentIds = ssbm.selection.value.map((c) => c.componentId);
104+
if (targetComponent) {
105+
removeComponentsSubtree(unref(targetComponent).componentId);
106+
return;
107+
}
108+
const componentIds = wfbm.selection.value.map((c) => c.componentId);
84109
if (componentIds.length === 0) return;
85110
removeComponentsSubtree(...componentIds);
86111
}
@@ -154,25 +179,25 @@ export function useBuilderSettingsActions(
154179
// Handled by callback
155180
break;
156181
case BuilderSettingsDropdownActions.MoveUp:
157-
moveComponentUp(selectedId.value);
182+
moveComponentUp(componentId.value);
158183
break;
159184
case BuilderSettingsDropdownActions.MoveDown:
160-
moveComponentDown(selectedId.value);
185+
moveComponentDown(componentId.value);
161186
break;
162187
case BuilderSettingsDropdownActions.Cut:
163-
cutComponent(selectedId.value);
188+
cutComponent(componentId.value);
164189
break;
165190
case BuilderSettingsDropdownActions.Copy:
166-
copyComponent(selectedId.value);
191+
copyComponent(componentId.value);
167192
break;
168193
case BuilderSettingsDropdownActions.Paste:
169194
handlePasteComponent();
170195
break;
171196
case BuilderSettingsDropdownActions.GoToParent:
172-
goToParent(selectedId.value, selectedInstancePath.value);
197+
goToParent(componentId.value, instancePath.value);
173198
break;
174199
case BuilderSettingsDropdownActions.Delete:
175-
deleteSelectedComponents();
200+
deleteComponent();
176201
break;
177202
}
178203

‎src/ui/src/builder/stateDropdown/BuilderStateSelectorDropdownComponent.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ async function goToComponent() {
4646
class="BuilderStateSelectorDropdownItemComponent"
4747
:option="option"
4848
:selected="selected"
49+
show-custom-action
4950
@mousemove="isHovered = true"
5051
@mouseout="isHovered = false"
5152
>

‎src/ui/src/builder/stateDropdown/__snapshots__/BuilderStateSelectorDropdown.spec.ts.snap‎

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ exports[`BuilderStateSelectorDropdown > should search from the options 1`] = `
2222
data-automation-key="setState"
2323
data-v-eb3dac76=""
2424
data-v-ee0f150a=""
25+
style="grid-template-columns: auto minmax(0, 1fr) auto;"
2526
>
2627
2728
<div
@@ -47,14 +48,6 @@ exports[`BuilderStateSelectorDropdown > should search from the options 1`] = `
4748
</span>
4849
<!--v-if-->
4950
</div>
50-
<div
51-
class="WdsDropdownMenuItem__detail"
52-
data-v-eb3dac76=""
53-
data-writer-tooltip="Fallback Component"
54-
data-writer-tooltip-strategy="overflow"
55-
>
56-
Fallback Component
57-
</div>
5851
<div
5952
class="WdsDropdownMenuItem__action"
6053
data-v-eb3dac76=""
@@ -81,6 +74,7 @@ exports[`BuilderStateSelectorDropdown > should search from the options 1`] = `
8174
data-automation-key="binding"
8275
data-v-eb3dac76=""
8376
data-v-ee0f150a=""
77+
style="grid-template-columns: auto minmax(0, 1fr) auto;"
8478
>
8579
8680
<div
@@ -106,14 +100,6 @@ exports[`BuilderStateSelectorDropdown > should search from the options 1`] = `
106100
</span>
107101
<!--v-if-->
108102
</div>
109-
<div
110-
class="WdsDropdownMenuItem__detail"
111-
data-v-eb3dac76=""
112-
data-writer-tooltip="Fallback Component"
113-
data-writer-tooltip-strategy="overflow"
114-
>
115-
Fallback Component
116-
</div>
117103
<div
118104
class="WdsDropdownMenuItem__action"
119105
data-v-eb3dac76=""
@@ -141,6 +127,7 @@ exports[`BuilderStateSelectorDropdown > should search from the options 1`] = `
141127
data-automation-key="vault.apiKey"
142128
data-v-eb3dac76=""
143129
data-v-ee0f150a=""
130+
style="grid-template-columns: auto minmax(0, 1fr);"
144131
>
145132
146133
<div
@@ -172,13 +159,6 @@ exports[`BuilderStateSelectorDropdown > should search from the options 1`] = `
172159
<!--v-if-->
173160
</div>
174161
<!--v-if-->
175-
<div
176-
class="WdsDropdownMenuItem__action"
177-
data-v-eb3dac76=""
178-
>
179-
180-
181-
</div>
182162
</button>
183163
184164
</div>
@@ -198,6 +178,7 @@ exports[`BuilderStateSelectorDropdown > should search from the options 1`] = `
198178
data-automation-key="state"
199179
data-v-eb3dac76=""
200180
data-v-ee0f150a=""
181+
style="grid-template-columns: auto minmax(0, 1fr);"
201182
>
202183
203184
<div
@@ -229,13 +210,6 @@ exports[`BuilderStateSelectorDropdown > should search from the options 1`] = `
229210
<!--v-if-->
230211
</div>
231212
<!--v-if-->
232-
<div
233-
class="WdsDropdownMenuItem__action"
234-
data-v-eb3dac76=""
235-
>
236-
237-
238-
</div>
239213
</button>
240214
241215
</div>

0 commit comments

Comments
 (0)