Remove "X Components" label when editing existing component

app/gui/integration-test/project-view/componentBrowser.spec.ts

@@ -1,6 +1,7 @@
 import { test, type Page } from '@playwright/test'
 import * as actions from './actions'
 import { expect } from './customExpect'
+import { mockExpressionUpdate } from './expressionUpdates'
 import { CONTROL_KEY } from './keyboard'
 import * as locate from './locate'
 
@@ -14,12 +15,18 @@ async function deselectAllNodes(page: Page) {
 async function expectAndCancelBrowser(
   page: Page,
   expectedText: string,
+  expectedLabel: string | null,
   expectedSelfArgument?: string,
 ) {
   const nodeCount = await locate.graphNode(page).count()
   await expect(locate.componentBrowser(page)).toExist()
   await expect(locate.componentBrowserEntry(page)).toExist()
   await expect(page.locator('[data-transitioning]')).toHaveCount(0)
+  if (expectedLabel != null) {
+    await expect(locate.componentBrowserInput(page)).toContainText(expectedLabel)
+  } else {
+    await expect(locate.componentBrowserInput(page)).not.toContainText(/\S/)
+  }
   if (expectedSelfArgument != null)
     await expect(locate.componentBrowser(page)).toHaveAttribute(
       'data-self-argument',
@@ -41,38 +48,41 @@ test('Different ways of opening Component Browser', async ({ page }) => {
 
   // (+) button
   await locate.addNewNodeButton(page).click()
-  await expectAndCancelBrowser(page, '')
+  await expectAndCancelBrowser(page, '', 'Input Components')
   // (+) button with selection (ignored)
   await locate.graphNodeByBinding(page, 'selected').click()
   await locate.addNewNodeButton(page).click()
-  await expectAndCancelBrowser(page, '')
+  await expectAndCancelBrowser(page, '', 'Input Components')
   // Enter key
   await locate.graphEditor(page).click({ position: { x: 100, y: 500 } })
   await locate.graphEditor(page).press('Enter')
-  await expectAndCancelBrowser(page, '')
+  await expectAndCancelBrowser(page, '', 'Input Components')
 
   // With source node
 
   // Enter key
+  await mockExpressionUpdate(page, 'selected', {
+    type: ['Standard.Table.Table.Table'],
+  })
   await locate.graphNodeByBinding(page, 'selected').click()
   await locate.graphEditor(page).press('Enter')
-  await expectAndCancelBrowser(page, '', 'selected')
+  await expectAndCancelBrowser(page, '', 'Table Components', 'selected')
   // Dragging out an edge
   let outputPort = await locate.outputPortCoordinates(
     page,
     locate.graphNodeByBinding(page, 'selected'),
   )
   await page.mouse.click(outputPort.x, outputPort.y)
   await locate.graphEditor(page).click({ position: { x: 100, y: 500 } })
-  await expectAndCancelBrowser(page, '', 'selected')
+  await expectAndCancelBrowser(page, '', 'Table Components', 'selected')
   // Double-clicking port
   // TODO[ao] Without timeout, even the first click would be treated as double due to previous
   // event. Probably we need a better way to simulate double clicks.
   await page.waitForTimeout(600)
   outputPort = await locate.outputPortCoordinates(page, locate.graphNodeByBinding(page, 'selected'))
   await page.mouse.click(outputPort.x, outputPort.y)
   await page.mouse.click(outputPort.x, outputPort.y)
-  await expectAndCancelBrowser(page, '', 'selected')
+  await expectAndCancelBrowser(page, '', 'Table Components', 'selected')
 })
 
 test('Opening Component Browser from output port buttons', async ({ page }) => {
@@ -84,14 +94,14 @@ test('Opening Component Browser from output port buttons', async ({ page }) => {
   const createNodeFromPortButton = await locate.createNodeFromPortButton(page, node)
   await expect(createNodeFromPortButton).toBeVisible()
   await createNodeFromPortButton.click({ force: true })
-  await expectAndCancelBrowser(page, '', 'selected')
+  await expectAndCancelBrowser(page, '', null, 'selected')
 
   // Small (+) button shown when node is selected
   await page.keyboard.press('Escape')
   await node.click()
   await expect(createNodeFromPortButton).toBeVisible()
   await createNodeFromPortButton.click({ force: true })
-  await expectAndCancelBrowser(page, '', 'selected')
+  await expectAndCancelBrowser(page, '', null, 'selected')
 })
 
 test('Graph Editor pans to Component Browser', async ({ page }) => {
@@ -106,7 +116,7 @@ test('Graph Editor pans to Component Browser', async ({ page }) => {
   await expect(locate.graphNodeByBinding(page, 'final')).not.toBeInViewport()
   await locate.graphEditor(page).press('Enter')
   await expect(locate.graphNodeByBinding(page, 'final')).toBeInViewport()
-  await expectAndCancelBrowser(page, '', 'final')
+  await expectAndCancelBrowser(page, '', null)
 
   // Dragging out an edge to the bottom of the viewport; when the CB pans into view, some nodes are out of view.
   await page.mouse.move(100, 1100)
@@ -121,7 +131,7 @@ test('Graph Editor pans to Component Browser', async ({ page }) => {
   await page.mouse.click(outputPort.x, outputPort.y)
   await locate.graphEditor(page).click({ position: { x: 100, y: 1700 } })
   await expect(locate.graphNodeByBinding(page, 'five')).not.toBeInViewport()
-  await expectAndCancelBrowser(page, '', 'final')
+  await expectAndCancelBrowser(page, '', null)
 })
 
 test('Accepting suggestion', async ({ page }) => {
@@ -259,6 +269,7 @@ test('Editing existing nodes', async ({ page }) => {
   // Start node editing
   await locate.graphNodeIcon(node).click({ modifiers: [CONTROL_KEY] })
   await expect(locate.componentBrowser(page)).toBeVisible()
+  await expect(locate.componentBrowserInput(page)).not.toContainText(/\S/)
   const input = locate.componentBrowserInput(page).locator('input')
   await expect(input).toHaveValue('Data.read')
 

app/gui/src/project-view/components/ComponentBrowser/ComponentEditor.vue

@@ -51,14 +51,13 @@ const icon = computed(() => {
   return DEFAULT_ICON
 })
 
-const selfTypeName = computed(() => {
-  if (
-    props.mode.mode === 'componentBrowsing' &&
-    props.mode.filter.selfArg?.type === 'known' &&
-    props.mode.filter.selfArg.typename.path
-  ) {
-    return qnLastSegment(props.mode.filter.selfArg.typename.path)
+const label = computed(() => {
+  if (props.mode.mode !== 'componentBrowsing') return undefined
+  if (props.mode.filter.selfArg == null) return 'Input Components'
+  if (props.mode.filter.selfArg.type === 'known' && props.mode.filter.selfArg.typename.path) {
+    return `${qnLastSegment(props.mode.filter.selfArg.typename.path)} Components`
   }
+
   return undefined
 })
 
@@ -79,8 +78,8 @@ const rootStyle = computed(() => {
     <div :class="{ componentEditorIcon: true, port: props.mode.mode !== 'componentBrowsing' }">
       <SvgIcon :name="icon" />
     </div>
-    <span class="selfArgInfo">{{ selfTypeName ?? 'Input' }} Components</span>
-    <SvgIcon class="selfArgInfoArrow" name="folder_closed" />
+    <span v-if="label" class="selfArgInfo" v-text="label" />
+    <SvgIcon v-if="label" class="selfArgInfoArrow" name="folder_closed" />
     <AutoSizedInput
       ref="inputField"
       v-model="fieldContent.text"