feat: Add support for project titles #2470

marc1404 · 2025-06-03T10:06:02Z

What this PR does / why we need it:

This PR adds support for Project "display names" via a new annotation:
dashboard.gardener.cloud/project-title: "..."

See the issue for more context:

Add support for Project display names via project-title annotations #2469

Screenshots:

Navigation on the left-hand side:

Shoot cluster list in the "All Projects"-scope:

Project creation dialog:

Project administration view:

Which issue(s) this PR fixes:

Fixes #2469

Special notes for your reviewer:

/cc @klocke-io @benedikt-haug
/cc @petersutter @grolu

Release note:

Added support for `Project` titles through a new annotation `dashboard.gardener.cloud/project-title`.

klocke-io · 2025-06-03T14:06:52Z

/ok-to-test

marc1404 · 2025-06-03T14:18:24Z

frontend/src/components/GMainNavigation.vue

+              <v-tooltip
+                activator="parent"
+                location="top"
+              >
+                {{ selectedProjectTitle }}
+              </v-tooltip>


Since project titles longer than 10 characters can be used, the text can be truncated with an ellipsis if too long. Therefore, a tooltip is added to be able to inspect the entire title if necessary.

marc1404 · 2025-06-03T14:22:41Z

frontend/src/components/GMainNavigation.vue

+    width: 153px !important;
    text-align: left !important;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;


A fixed width or max width is required so that the element cuts off overflowing text with the ellipsis.
Even on a widescreen, the element does not grow larger than the previously configured min-width: 153px.

grolu · 2025-06-03T14:25:00Z

Could you add some screenshots

marc1404 · 2025-06-03T14:27:57Z

frontend/src/components/GMainNavigation.vue

+      :deep(.v-list-item__prepend > .v-list-item__spacer) {
+        width: 16px;
+      }


The width has been halved from previously 32px to have vertical alignment between the filter input above and the projects below. Additionally, it increases the horizontal space for the project names/titles.

marc1404 · 2025-06-03T14:42:18Z

Could you add some screenshots

@grolu Added to the PR description :)

- create project dialog - edit project Signed-off-by: klocke-io <[email protected]>

Signed-off-by: klocke-io <[email protected]>

grolu · 2025-06-04T15:00:54Z

Looking at the screenshots, I have some concerns. The way the technical name is replaced with the title makes it unclear whether the currently displayed label is the title or the technical name. This can easily confuse users or even mislead them into selecting a project that looks legitimate but is actually incorrect or misleading — essentially a "honeypot" project.

I suggest keeping the technical name as it is and displaying the project title (if available) on a second line. If no title is set, that line can remain empty. The owner could move to a third line, or we might consider removing it from the main menu entirely — this should be discussed further.

Another option would be a complete overhaul of the project selection or introducing a new project selection page (e.g., in table format).

benedikt-haug · 2025-06-05T04:58:45Z

Looking at the screenshots, I have some concerns. The way the technical name is replaced with the title makes it unclear whether the currently displayed label is the title or the technical name. This can easily confuse users or even mislead them into selecting a project that looks legitimate but is actually incorrect or misleading — essentially a "honeypot" project.

Isn't there some chance to strike a middle ground here?
Like displaying <> or [] or 🎭 around it, cursive or any other distinctive discrepancy, like _ or another character likely illegal for project names? Maybe one could even go as far as making the project title unique (if that works, didn't chec yet)

Right now it already changes color which amusingly in my eyes upgrades it visually.

I find the current prominent presentation of the project name in its limitations weird. It's the identifier, so it must be presented. But it feels wrong to tell anyone that their
Dev, QA, Staging, Prod-Team1 etc. Projects only bear that name in some Grey, small font subdescription, when the prominent high font name is actually "D3FYH6UAGU" or "GTY7FEQKXU".

grolu · 2025-06-05T07:40:14Z

Isn't there some chance to strike a middle ground here?

Sure, as I already pointed out in the kickoff call, this is the main challenge :)
Implementing a project title from a technical perspective is simple. But integrating it in a way that truly adds value—while still ensuring the user always knows which project they are looking at—is the key point.
I'm open to suggestions!

benedikt-haug · 2025-06-10T09:16:41Z

But integrating it in a way that truly adds value—while still ensuring the user always knows which project they are looking at—is the key point. I'm open to suggestions!

Ideas how to solve this:

Change color (currently proposed solution)
Change font
Use italic
Prefix the project title with something that would be illegal for project-names like an emoji like 🎭 or a special character like _
Add an optional setting in store/config.js that allows operators to optionally take this security->functionality tradeoff
Check for uniqueness between project names and titles (my least favorite option, cause in my eyes it should be possible for users to use "QA" as an identifier for their QA project if that is unique for their use-case and tinkering with similar looking characters would still be an valid impersonation vector)

Obviously all of those are tradeoffs, given the intend of this change is to allow removing the project name from the center of presentation. This will inherently reduce visual uniqueness and increase risks of impersonation.

petersutter · 2025-06-10T09:09:26Z

frontend/src/components/editable/GEditableText.vue

+        :counter="counter"
+        :maxlength="maxLength"


I get the following warnings in the browser console:

Invalid prop: type check failed for prop "counter". Expected Boolean, got String with value "true". at <GEditableText read-only=false color="action-button" model-value="core" ... >

Invalid prop: type check failed for prop "maxLength". Expected Number with value 64, got String with value "64".

petersutter · 2025-06-10T13:19:06Z

frontend/src/components/dialogs/GProjectDialog.vue

+              <v-tooltip
+                activator="parent"
+                location="top"
+                text="Technical, unique project name."
+              />
+            </v-text-field>


instead of a tooltip, use hint prop on text-field

petersutter · 2025-06-10T13:19:28Z

frontend/src/components/dialogs/GProjectDialog.vue

+              <v-tooltip
+                activator="parent"
+                location="top"
+                text="Human-readable project title."
+              />
+            </v-text-field>


instead of a tooltip, use hint prop on text-field

petersutter · 2025-06-10T13:22:51Z

frontend/src/views/GAdministration.vue

@@ -26,7 +26,12 @@ SPDX-License-Identifier: Apache-2.0
                    </v-icon>
                  </template>
                  <div class="text-body-2 text-medium-emphasis">
-                    Name
+                    <span>Name</span>
+                    <v-tooltip


the tooltip is misaligned. It should be displayed for the span, not for the parent div

petersutter · 2025-06-10T13:23:09Z

frontend/src/views/GAdministration.vue

+                  </template>
+                  <div class="text-body-2 text-medium-emphasis">
+                    <span>Title</span>
+                    <v-tooltip


the tooltip is misaligned. It should be displayed for the span, not for the parent div

petersutter · 2025-06-10T13:40:25Z

frontend/src/views/GAdministration.vue

@@ -522,6 +553,8 @@ import {
  getDateFormatted,
 } from '@/utils'
 import { errorDetailsFromError } from '@/utils/error'
+import { annotations } from '@/utils/annotations.js'


this comment is not related to this particuluar line:

The confirm project deletion popup only shows the name, same for the GRemoveProjectMember and maybe others?

petersutter · 2025-06-10T13:42:54Z

frontend/src/utils/project.js

+import { maxLength } from '@vuelidate/validators'
+
+export function truncateProjectTitle (title, maxLength = 64) {
+  if (title.length > maxLength) {


should the title also be trimmed (e.g. leading and trailing whitespace)? rather move this function to the project helper composable (see other comment)

petersutter · 2025-06-10T13:56:10Z

frontend/src/components/GMainNavigation.vue

+const selectedProjectTitle = computed(() => {
+  return getProjectTitle(selectedProject.value) ?? selectedProjectName
+})
+


use (selected)projectName and (selected)projectTitle from useProjectMetadata composable

petersutter · 2025-06-10T13:56:39Z

frontend/src/components/GMainNavigation.vue

+function getProjectTitle (project) {
+  return get(project, ['metadata', 'annotations', annotations.projectTitle])
+}


move such helpers to project helper composable, similar to #2455
cc @grolu

petersutter · 2025-06-11T13:40:15Z

frontend/src/components/GMainNavigation.vue

-                {{ getProjectOwner(project) }}
+                <abbr :title="hasProjectTitle(project) ? '' : null">
+                  <span v-if="hasProjectTitle(project)">
+                    {{ project.metadata.name }} &bull;


I agree with Lukas regarding how the title and project name is shown here

gardener-robot added needs/review Needs review size/m Size of pull request is medium (see gardener-robot robot/bots/size.py) reviewed/do-not-merge Has no approval for merging as it may break things, be of poor quality or have (ext.) dependencies labels Jun 3, 2025

marc1404 force-pushed the feat/2469-project-titles branch from 741e134 to e2ff38f Compare June 3, 2025 10:10

gardener-robot-ci-3 added reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) and removed reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) labels Jun 3, 2025

marc1404 force-pushed the feat/2469-project-titles branch from a4ab6d6 to 9f26762 Compare June 3, 2025 14:16

gardener-robot-ci-2 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 3, 2025

marc1404 commented Jun 3, 2025

View reviewed changes

gardener-robot-ci-2 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 3, 2025

marc1404 commented Jun 3, 2025

View reviewed changes

marc1404 force-pushed the feat/2469-project-titles branch from 9f26762 to b76d410 Compare June 3, 2025 14:38

gardener-robot-ci-3 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 3, 2025

gardener-robot-ci-3 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 3, 2025

marc1404 marked this pull request as ready for review June 3, 2025 14:42

marc1404 requested review from grolu, holgerkoser, klocke-io and petersutter as code owners June 3, 2025 14:42

marc1404 force-pushed the feat/2469-project-titles branch from b76d410 to 4d3be08 Compare June 3, 2025 20:26

gardener-robot-ci-2 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 3, 2025

gardener-robot-ci-1 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 4, 2025

marc1404 force-pushed the feat/2469-project-titles branch from f4af4f8 to 20967fa Compare June 4, 2025 08:45

gardener-robot-ci-2 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 4, 2025

gardener-robot-ci-1 added reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) and removed reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) labels Jun 4, 2025

marc1404 force-pushed the feat/2469-project-titles branch from 97cef3a to 310816f Compare June 4, 2025 11:23

gardener-robot-ci-3 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 4, 2025

marc1404 force-pushed the feat/2469-project-titles branch from 310816f to 451e222 Compare June 4, 2025 11:24

gardener-robot-ci-3 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 4, 2025

marc1404 force-pushed the feat/2469-project-titles branch from 451e222 to d4f0b98 Compare June 4, 2025 11:31

gardener-robot-ci-2 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 4, 2025

gardener-robot-ci-3 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 4, 2025

marc1404 and others added 6 commits June 4, 2025 13:40

feat: Show project title in main navigation

4278ee9

feat: Add project title to project store

e158b72

feat: Provide project title in shoot composables

1b9999f

feat: Add project title to shoot list

3f81123

add project title to:

d650a87

- create project dialog - edit project Signed-off-by: klocke-io <[email protected]>

adapt project search and sorting

9e2839f

Signed-off-by: klocke-io <[email protected]>

marc1404 force-pushed the feat/2469-project-titles branch from d4f0b98 to 9e2839f Compare June 4, 2025 11:41

gardener-robot-ci-3 added the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 4, 2025

gardener-robot-ci-2 removed the reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) label Jun 4, 2025

add tool tip to project name and title

e2c540e

Signed-off-by: klocke-io <[email protected]>

gardener-robot-ci-1 added reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) and removed reviewed/ok-to-test Has approval for testing (check PR in detail before setting this label because PR is run on CI/CD) labels Jun 4, 2025

petersutter reviewed Jun 11, 2025

View reviewed changes

feat: Add support for project titles #2470

Are you sure you want to change the base?

feat: Add support for project titles #2470

Uh oh!

Conversation

marc1404 commented Jun 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

klocke-io commented Jun 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

grolu commented Jun 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marc1404 commented Jun 3, 2025

Uh oh!

grolu commented Jun 4, 2025

Uh oh!

benedikt-haug commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

grolu commented Jun 5, 2025

Uh oh!

benedikt-haug commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

marc1404 commented Jun 3, 2025 •

edited

Loading

benedikt-haug commented Jun 5, 2025 •

edited

Loading

benedikt-haug commented Jun 10, 2025 •

edited

Loading