Merge branch 'develop' into wip/vitvakatu/visualization-fixes

Author: vitvakatu

app/gui2/e2e/collapsingAndEntering.spec.ts

@@ -11,16 +11,16 @@ test('Entering nodes', async ({ page }) => {
   await actions.goToGraph(page)
   await mockCollapsedFunctionInfo(page, 'final', 'func1')
   await expectInsideMain(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project'])
 
   await locate.graphNodeByBinding(page, 'final').dblclick()
   await mockCollapsedFunctionInfo(page, 'f2', 'func2')
   await expectInsideFunc1(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1'])
 
   await locate.graphNodeByBinding(page, 'f2').dblclick()
   await expectInsideFunc2(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1', 'func2'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1', 'func2'])
 })
 
 test('Leaving entered nodes', async ({ page }) => {
@@ -42,7 +42,7 @@ test('Using breadcrumbs to navigate', async ({ page }) => {
   await page.mouse.dblclick(100, 100)
   await expectInsideMain(page)
   // Breadcrumbs still have all the crumbs, but the last two are dimmed.
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1', 'func2'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1', 'func2'])
   await expect(locate.navBreadcrumb(page, (f) => f.class('inactive'))).toHaveText([
     'func1',
     'func2',
@@ -51,7 +51,7 @@ test('Using breadcrumbs to navigate', async ({ page }) => {
   await locate.navBreadcrumb(page).filter({ hasText: 'func2' }).click()
   await expectInsideFunc2(page)
 
-  await locate.navBreadcrumb(page).filter({ hasText: 'main' }).click()
+  await locate.navBreadcrumb(page).filter({ hasText: 'Mock Project' }).click()
   await expectInsideMain(page)
 
   await locate.navBreadcrumb(page).filter({ hasText: 'func1' }).click()

app/gui2/e2e/componentBrowser.spec.ts

@@ -5,7 +5,8 @@ import * as actions from './actions'
 import * as customExpect from './customExpect'
 import * as locate from './locate'
 
-const ACCEPT_SUGGESTION_SHORTCUT = os.platform() === 'darwin' ? 'Meta+Enter' : 'Control+Enter'
+const CONTROL_KEY = os.platform() === 'darwin' ? 'Meta' : 'Control'
+const ACCEPT_SUGGESTION_SHORTCUT = `${CONTROL_KEY}+Enter`
 
 async function deselectAllNodes(page: Page) {
   await page.keyboard.press('Escape')
@@ -148,3 +149,36 @@ test('Filtering list', async ({ page }) => {
   const highlighted = locate.componentBrowserEntry(page).locator('.component-label-segment.match')
   await expect(highlighted).toHaveText(['re', '_te'])
 })
+
+test('Editing existing nodes', async ({ page }) => {
+  await actions.goToGraph(page)
+  const node = locate.graphNodeByBinding(page, 'data')
+  const ADDED_PATH = '"/home/enso/Input.txt"'
+
+  // Start node editing
+  await locate.graphNodeIcon(node).click({ modifiers: [CONTROL_KEY] })
+  await expect(locate.componentBrowser(page)).toBeVisible()
+  const input = locate.componentBrowserInput(page).locator('input')
+  await expect(input).toHaveValue('Data.read')
+
+  // Add argument and accept
+  await page.keyboard.press('End')
+  await input.pressSequentially(` ${ADDED_PATH}`)
+  await expect(input).toHaveValue(`Data.read ${ADDED_PATH}`)
+  await page.keyboard.press('Enter')
+  await expect(locate.componentBrowser(page)).not.toBeVisible()
+  await expect(node.locator('.WidgetToken')).toHaveText(['Data', '.', 'read'])
+  await expect(node.locator('.WidgetText input')).toHaveValue(ADDED_PATH)
+
+  // Edit again, using "edit" button
+  await locate.graphNodeIcon(node).click()
+  await node.getByTestId('edit-button').click()
+  await expect(locate.componentBrowser(page)).toBeVisible()
+  await expect(input).toHaveValue(`Data.read ${ADDED_PATH}`)
+  for (let i = 0; i < ADDED_PATH.length; ++i) await page.keyboard.press('Backspace')
+  await expect(input).toHaveValue('Data.read ')
+  await page.keyboard.press('Enter')
+  await expect(locate.componentBrowser(page)).not.toBeVisible()
+  await expect(node.locator('.WidgetToken')).toHaveText(['Data', '.', 'read'])
+  await expect(node.locator('.WidgetText')).not.toBeVisible()
+})

app/gui2/e2e/locate.ts

@@ -113,6 +113,23 @@ export function exitFullscreenButton(page: Locator | Page) {
 
 export const toggleFullscreenButton = or(enterFullscreenButton, exitFullscreenButton)
 
+// === Nodes ===
+
+declare const nodeLocatorBrand: unique symbol
+type Node = Locator & { [nodeLocatorBrand]: never }
+
+export function graphNode(page: Page | Locator): Node {
+  return page.locator('.GraphNode') as Node
+}
+export function graphNodeByBinding(page: Locator | Page, binding: string): Node {
+  return graphNode(page).filter({
+    has: page.locator('.binding').and(page.getByText(binding)),
+  }) as Node
+}
+export function graphNodeIcon(node: Node) {
+  return node.locator('.icon')
+}
+
 // === Data locators ===
 
 type SanitizeClassName<T extends string> = T extends `${infer A}.${infer B}`
@@ -128,10 +145,6 @@ function componentLocator<T extends string>(className: SanitizeClassName<T>) {
 }
 
 export const graphEditor = componentLocator('GraphEditor')
-export const graphNode = componentLocator('GraphNode')
-export function graphNodeByBinding(page: Locator | Page, binding: string) {
-  return graphNode(page).filter({ has: page.locator('.binding').and(page.getByText(binding)) })
-}
 // @ts-expect-error
 export const anyVisualization = componentLocator('GraphVisualization > *')
 export const circularMenu = componentLocator('CircularMenu')

app/gui2/scripts/generateIconMetadata.js

@@ -11,8 +11,8 @@ console.info('Writing icon name type to "./src/util/iconName.ts"...')
 await fs.writeFile(
   './src/util/iconName.ts',
   `\
-// Generated by \`scripts/generateIcons.js\`.
-// Please run \`npm run generate\` to regenerate this file whenever \`icons.svg\` is changed.
+// Generated by \`scripts/generateIconMetadata.js\`.
+// Please run \`npm run generate-metadata\` to regenerate this file whenever \`icons.svg\` is changed.
 import iconNames from '@/util/iconList.json'
 
 export type Icon =

app/gui2/src/assets/icons.svg

@@ -31,7 +31,12 @@ const emit = defineEmits<{
       :modelValue="props.isVisualizationVisible"
       @update:modelValue="emit('update:isVisualizationVisible', $event)"
     />
-    <SvgIcon name="edit" class="icon-container button slot6" @click.stop="emit('startEditing')" />
+    <SvgIcon
+      name="edit"
+      class="icon-container button slot6"
+      data-testid="edit-button"
+      @click.stop="emit('startEditing')"
+    />
     <ToggleIcon
       :icon="props.isOutputContextEnabledGlobally ? 'no_auto_replay' : 'auto_replay'"
       class="icon-container button slot7"

app/gui2/src/components/CircularMenu.vue

@@ -419,10 +419,7 @@ const handler = componentBrowserBindings.handler({
                   :style="{ color: componentColor(item.component) }"
                 />
                 <span>
-                  <span
-                    v-if="!item.component.matchedRanges || item.component.matchedAlias"
-                    v-text="item.component.label"
-                  ></span>
+                  <span v-if="!item.component.matchedRanges" v-text="item.component.label"></span>
                   <span
                     v-for="range in allRanges(
                       item.component.matchedRanges,
@@ -450,10 +447,7 @@ const handler = componentBrowserBindings.handler({
               >
                 <SvgIcon :name="item.component.icon" />
                 <span>
-                  <span
-                    v-if="!item.component.matchedRanges || item.component.matchedAlias"
-                    v-text="item.component.label"
-                  ></span>
+                  <span v-if="!item.component.matchedRanges" v-text="item.component.label"></span>
                   <span
                     v-for="range in allRanges(
                       item.component.matchedRanges,