feat(catalog-ui): add rename favorite button and dialog

jcabannes · jcabannes · commit 12e7fc7be5af · 2026-07-10T18:31:06.000+02:00
diff --git a/apps/catalog-ui/docs/components/smart-filter/LinidSmartFilter.md b/apps/catalog-ui/docs/components/smart-filter/LinidSmartFilter.md
diff --git a/apps/catalog-ui/docs/design.md b/apps/catalog-ui/docs/design.md
@@ -427,9 +427,14 @@ Smart filtering component with toggle-able menu for managing active filters and
           "label-section": {
             "q-item-section": {}
           },
-          "delete-section": {
+          "item-actions-section": {
             "q-item-section": {},
-            "q-btn": {}
+            "rename-button": {
+              "q-btn": {}
+            },
+            "delete-button": {
+              "q-btn": {}
+            }
           },
           "no-data-icon-section": {
             "q-item-section": {},
@@ -846,9 +851,14 @@ Page that contain table with search and filtering capabilities.
           "label-section": {
             "q-item-section": {}
           },
-          "delete-section": {
+          "item-actions-section": {
             "q-item-section": {},
-            "q-btn": {}
+            "rename-button": {
+              "q-btn": {}
+            },
+            "delete-button": {
+              "q-btn": {}
+            }
           },
           "no-data-icon-section": {
             "q-item-section": {},
@@ -1163,9 +1173,14 @@ A full example showing all CatalogUI components configured together:
             "label-section": {
               "q-item-section": {}
             },
-            "delete-section": {
+            "item-actions-section": {
               "q-item-section": {},
-              "q-btn": {}
+              "rename-button": {
+                "q-btn": {}
+              },
+              "delete-button": {
+                "q-btn": {}
+              }
             },
             "no-data-icon-section": {
               "q-item-section": {},
diff --git a/apps/catalog-ui/docs/i18n.md b/apps/catalog-ui/docs/i18n.md
@@ -372,18 +372,19 @@ The `FormDialog` component uses the following keys for internationalization:
 
 **File:** apps/catalog-ui/src/pages/GenericTablePage.vue
 
-| Key                                | Description                                                            | Usage                | Parameters |
-| ---------------------------------- | ---------------------------------------------------------------------- | -------------------- | ---------- |
-| `[INSTANCE_ID].title`              | Title displayed at the top of the page (if present)                    | Page header          | -          |
-| `[INSTANCE_ID].error`              | Error message when data loading fails.                                 | Page toaster         | -          |
-| `[INSTANCE_ID].seeButton`          | Label for the “see details” action button                              | Table row action     | -          |
-| `[INSTANCE_ID].ButtonsCard`        | Base translation scope for the actions card (e.g. create button label) | Page actions section | -          |
-| `[INSTANCE_ID].GenericEntityTable` | Base translation scope for the GenericEntityTable                      | Page table section   | -          |
-| `[INSTANCE_ID].DeleteDialog`       | Base translation scope for the delete-favorite ConfirmationDialog      | Page dialog section  | -          |
-| `[INSTANCE_ID].OverrideDialog`     | Base translation scope for the override-favorite FormDialog            | Page dialog section  | -          |
-| `[INSTANCE_ID].CreateDialog`       | Base translation scope for the create-favorite FormDialog              | Page dialog section  | -          |
-| `[INSTANCE_ID].LinidSmartFilter`   | Base translation scope for the LinidSmartFilter                        | Page search section  | -          |
-| `[INSTANCE_ID].[FIELD_LABEL]`      | Label displayed for a table column header                              | Table column header  | -          |
+| Key                                  | Description                                                            | Usage                | Parameters |
+| ------------------------------------ | ---------------------------------------------------------------------- | -------------------- | ---------- |
+| `[INSTANCE_ID].title`                | Title displayed at the top of the page (if present)                    | Page header          | -          |
+| `[INSTANCE_ID].error`                | Error message when data loading fails.                                 | Page toaster         | -          |
+| `[INSTANCE_ID].seeButton`            | Label for the “see details” action button                              | Table row action     | -          |
+| `[INSTANCE_ID].ButtonsCard`          | Base translation scope for the actions card (e.g. create button label) | Page actions section | -          |
+| `[INSTANCE_ID].GenericEntityTable`   | Base translation scope for the GenericEntityTable                      | Page table section   | -          |
+| `[INSTANCE_ID].DeleteDialog`         | Base translation scope for the delete-favorite ConfirmationDialog      | Page dialog section  | -          |
+| `[INSTANCE_ID].RenameFavoriteDialog` | Base translation scope for the rename-favorite FormDialog              | Page dialog section  | -          |
+| `[INSTANCE_ID].OverrideDialog`       | Base translation scope for the override-favorite FormDialog            | Page dialog section  | -          |
+| `[INSTANCE_ID].CreateDialog`         | Base translation scope for the create-favorite FormDialog              | Page dialog section  | -          |
+| `[INSTANCE_ID].LinidSmartFilter`     | Base translation scope for the LinidSmartFilter                        | Page search section  | -          |
+| `[INSTANCE_ID].[FIELD_LABEL]`        | Label displayed for a table column header                              | Table column header  | -          |
 
 **Example:**
 
@@ -412,6 +413,21 @@ The `FormDialog` component uses the following keys for internationalization:
         "confirmLoading": "Saving..."
       }
     },
+    "RenameFavoriteDialog": {
+      "title": "Rename a favorite?",
+      "content": "Enter a new name for favorite \"{label}\".",
+      "duplicateName": "A favorite with the name \"{name}\" already exists.",
+      "ButtonsCard": {
+        "cancel": "Cancel",
+        "confirm": "Rename",
+        "confirmLoading": "Renaming..."
+      },
+      "fields": {
+        "favoriteName": {
+          "label": "Name"
+        }
+      }
+    },
     "OverrideFavoriteDialog": {
       "title": "Override a favorite?",
       "content": "Select the favorite to replace with the current filters.",
@@ -437,6 +453,7 @@ The `FormDialog` component uses the following keys for internationalization:
       }
     },
     "RemoveFavoriteNotifyMessage": "The favorite '{name}' has been removed.",
+    "RenameFavoriteNotifyMessage": "The favorite '{name}' has been renamed.",
     "CreateFavoriteNotifyMessage": "The favorite '{name}' has been created.",
     "OverrideFavoriteNotifyMessage": "The favorite '{name}' has been overwritten.",
     "LinidSmartFilter": {
@@ -491,6 +508,7 @@ The `FormDialog` component uses the following keys for internationalization:
 | `[INSTANCE_ID].LinidSmartFilter.LinidFavoritePanel.noData`                     | No data panel section                                        | No data label          | -          |
 | `[INSTANCE_ID].LinidSmartFilter.LinidFavoritePanel.createFavorite`             | Label for create button                                      | QBtn label             | -          |
 | `[INSTANCE_ID].LinidSmartFilter.LinidFavoritePanel.overrideFavorite`           | Label for override button                                    | QBtn label             | -          |
+| `[INSTANCE_ID].LinidSmartFilter.LinidFavoritePanel.renameButton`               | Label for rename button (optional, defaults to empty string) | QBtn label             | -          |
 | `[INSTANCE_ID].LinidSmartFilter.LinidFavoritePanel.deleteButton`               | Label for delete button (optional, defaults to empty string) | QBtn label             | -          |
 | `[INSTANCE_ID].LinidSmartFilter.TreeSearchFilterPanel.searchButton`            | Search button label                                          | QBtn label             | -          |
 | `[INSTANCE_ID].LinidSmartFilter.TreeSearchFilterPanel.errorLoadingData`        | Error message when failing to load tree data                 | Notification message   | -          |
@@ -534,6 +552,7 @@ The `FormDialog` component uses the following keys for internationalization:
         "noData": "No available favorites",
         "createFavorite": "Create Favorite",
         "overrideFavorite": "Override Favorite",
+        "renameButton": "Rename",
         "deleteButton": "Delete"
       },
       "TextSearchFilterPanel": {
@@ -676,6 +695,7 @@ export default {
         noData: 'No available favorites',
         createFavorite: 'Create Favorite',
         overrideFavorite: 'Override Favorite',
+        renameButton: 'Rename',
         deleteButton: 'Delete',
       },
       TextSearchFilterPanel: {
@@ -810,6 +830,21 @@ export default {
         confirmLoading: 'Saving...',
       },
     },
+    RenameFavoriteDialog: {
+      title: 'Rename a favorite?',
+      content: 'Enter a new name for favorite "{label}".',
+      duplicateName: 'A favorite with the name "{name}" already exists.',
+      ButtonsCard: {
+        cancel: 'Cancel',
+        confirm: 'Rename',
+        confirmLoading: 'Renaming...',
+      },
+      fields: {
+        favoriteName: {
+          label: 'Name',
+        },
+      },
+    },
     OverrideFavoriteDialog: {
       title: 'Override a favorite?',
       content: 'Select the favorite to replace with the current filters.',
@@ -835,6 +870,7 @@ export default {
       },
     },
     RemoveFavoriteNotifyMessage: "The favorite '{name}' has been removed.",
+    RenameFavoriteNotifyMessage: "The favorite '{name}' has been renamed.",
     CreateFavoriteNotifyMessage: "The favorite '{name}' has been created.",
     OverrideFavoriteNotifyMessage: "The favorite '{name}' has been overwritten.",
     LinidSmartFilter: {
@@ -856,6 +892,7 @@ export default {
         noData: 'No available favorites',
         createFavorite: 'Create Favorite',
         overrideFavorite: 'Override Favorite',
+        renameButton: 'Rename',
         deleteButton: 'Delete',
       },
       TextSearchFilterPanel: {
diff --git a/apps/catalog-ui/docs/pages/GenericTablePage.md b/apps/catalog-ui/docs/pages/GenericTablePage.md
@@ -195,13 +195,18 @@ Each active filter is serialized to a query param using `filter.toString()`, key
   - `ButtonsCard.create`
   - `DeleteFavoriteDialog.title` — title of the delete-favorite confirmation dialog
   - `DeleteFavoriteDialog.content` — body of the delete-favorite confirmation dialog (`{label}` placeholder available)
+  - `RenameFavoriteDialog.title` — title of the rename-favorite form dialog
+  - `RenameFavoriteDialog.content` — body of the rename-favorite form dialog (`{label}` placeholder available)
+  - `RenameFavoriteDialog.duplicateName` — error message when the chosen name is already used by another favorite (`{name}` placeholder available)
   - `OverrideFavoriteDialog.title` — title of the override-favorite form dialog
   - `OverrideFavoriteDialog.content` — body of the override-favorite form dialog
   - `CreateFavoriteDialog.title` — title of the create-favorite form dialog
   - `CreateFavoriteDialog.content` — body of the create-favorite form dialog
-  - `RemoveFavoriteNotifyMessage` — notification message displayed when a favorite filter set is successfully deleted
-  - `CreateFavoriteNotifyMessage` — notification message displayed when a new favorite filter set is successfully created
-  - `OverrideFavoriteNotifyMessage` — notification message displayed when an existing favorite filter set is successfully updated with new filters
+  - `CreateFavoriteDialog.duplicateName` — error message when the chosen name is already used by another favorite (`{name}` placeholder available)
+  - `RemoveFavoriteNotifyMessage` — notification message displayed when a favorite filter set is successfully deleted (`{name}` placeholder available)
+  - `RenameFavoriteNotifyMessage` — notification message displayed when a favorite filter set is successfully renamed (`{name}` placeholder available)
+  - `CreateFavoriteNotifyMessage` — notification message displayed when a new favorite filter set is successfully created (`{name}` placeholder available)
+  - `OverrideFavoriteNotifyMessage` — notification message displayed when an existing favorite filter set is successfully updated with new filters (`{name}` placeholder available)
 
 ---
 
diff --git a/apps/catalog-ui/src/components/smart-filter/LinidFavoritePanel.vue b/apps/catalog-ui/src/components/smart-filter/LinidFavoritePanel.vue
@@ -82,16 +82,27 @@
             {{ favorite.label }}
           </q-item-section>
           <q-item-section
-            v-bind="uiProps.deleteSection"
-            class="row items-end"
+            v-bind="uiProps.itemActionsSection"
+            class="items-end linid-favorite-panel--item-actions-section"
           >
-            <q-btn
-              v-bind="uiProps.deleteButton"
-              :label="translateOrDefault('', 'deleteButton')"
-              class="delete-button"
-              :data-cy="`button_delete_${index}`"
-              @click.stop="emit('delete', favorite)"
-            />
+            <div
+              class="row justify-end linid-favorite-panel--item-actions-container"
+            >
+              <q-btn
+                v-bind="uiProps.renameButton"
+                :label="translateOrDefault('', 'renameButton')"
+                class="rename-button"
+                :data-cy="`button_rename_${index}`"
+                @click.stop="emit('rename', favorite)"
+              />
+              <q-btn
+                v-bind="uiProps.deleteButton"
+                :label="translateOrDefault('', 'deleteButton')"
+                class="delete-button"
+                :data-cy="`button_delete_${index}`"
+                @click.stop="emit('delete', favorite)"
+              />
+            </div>
           </q-item-section>
         </q-item>
 
@@ -171,12 +182,16 @@ const uiProps = computed<LinidFavoritePanelUIProps>(() => ({
     `${contentUiNamespace}.no-data-label-section`,
     'q-item-section'
   ),
-  deleteSection: ui<LinidQItemSectionProps>(
-    `${contentUiNamespace}.delete-section`,
+  itemActionsSection: ui<LinidQItemSectionProps>(
+    `${contentUiNamespace}.item-actions-section`,
     'q-item-section'
   ),
+  renameButton: ui<LinidQBtnProps>(
+    `${contentUiNamespace}.item-actions-section.rename-button`,
+    'q-btn'
+  ),
   deleteButton: ui<LinidQBtnProps>(
-    `${contentUiNamespace}.delete-section`,
+    `${contentUiNamespace}.item-actions-section.delete-button`,
     'q-btn'
   ),
   createButton: ui<LinidQBtnProps>(
diff --git a/apps/catalog-ui/src/components/smart-filter/LinidSmartFilter.vue b/apps/catalog-ui/src/components/smart-filter/LinidSmartFilter.vue
@@ -119,6 +119,7 @@
           :i18n-scope="localI18nScope"
           data-cy="linid-smart-favorite-panel"
           @apply="(data) => emit('apply:favorite', data)"
+          @rename="(data) => emit('rename:favorite', data)"
           @delete="(data) => emit('delete:favorite', data)"
           @create="emit('create:favorite')"
           @override="emit('override:favorite')"
diff --git a/apps/catalog-ui/src/pages/GenericTablePage.vue b/apps/catalog-ui/src/pages/GenericTablePage.vue
@@ -52,6 +52,7 @@
         :is-menu-persistent="isSmartFilterMenuPersistent"
         @update:filters="onFiltersChange"
         @apply:favorite="onFavoriteApply"
+        @rename:favorite="openRenameFavoriteDialog"
         @delete:favorite="openDeleteFavoriteDialog"
         @override:favorite="openOverrideFavoriteDialog"
         @create:favorite="openCreateFavoriteDialog"
@@ -311,6 +312,64 @@ function openDeleteFavoriteDialog(favorite: LinidFilterSet): void {
   });
 }
 
+/**
+ * Opens a form dialog to rename a favorite filter set.
+ * @param favorite - The favorite filter set to rename.
+ */
+function openRenameFavoriteDialog(favorite: LinidFilterSet): void {
+  uiEventSubject.next({
+    key: 'form',
+    data: {
+      type: 'open',
+      title: t('RenameFavoriteDialog.title'),
+      content: t('RenameFavoriteDialog.content', { label: favorite.label }),
+      uiNamespace: `${uiNamespace.value}.rename-favorite-dialog`,
+      i18nScope: `${i18nScope.value}.RenameFavoriteDialog`,
+      formFields: [
+        {
+          name: 'favoriteName',
+          type: 'String',
+          input: 'Text',
+          required: true,
+          inputSettings: {},
+        },
+      ],
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onSubmit: (formData: { favoriteName: string }) => {
+        const trimmedFavoriteName = formData.favoriteName.trim();
+        if (favorites.value.some((fav) => fav.label === trimmedFavoriteName)) {
+          Notify({
+            type: 'negative',
+            message: t('RenameFavoriteDialog.duplicateName', {
+              name: trimmedFavoriteName,
+            }),
+          });
+          return;
+        }
+
+        saveUserPreference(
+          `${favoritesBaseConfigurationKey.value}${favorite.id}`,
+          JSON.stringify({
+            id: favorite.id,
+            label: trimmedFavoriteName,
+            value: new LinidFilterSet(
+              favorite.id,
+              trimmedFavoriteName,
+              favorite.filters
+            ).toString(),
+          })
+        );
+        Notify({
+          type: 'positive',
+          message: t('RenameFavoriteNotifyMessage', {
+            name: trimmedFavoriteName,
+          }),
+        });
+      },
+    },
+  });
+}
+
 /**
  * Opens a confirmation dialog to override an existing favorite filter set with the current filters.
  */
diff --git a/apps/catalog-ui/src/types/linidFavoritePanel.ts b/apps/catalog-ui/src/types/linidFavoritePanel.ts
@@ -97,11 +97,15 @@ export interface LinidFavoritePanelUIProps {
   /**
    * The UI properties for the delete item section.
    */
-  deleteSection: LinidQItemSectionProps;
+  itemActionsSection: LinidQItemSectionProps;
   /**
    * The UI properties for the delete button.
    */
   deleteButton: LinidQBtnProps;
+  /**
+   * The UI properties for the rename button.
+   */
+  renameButton: LinidQBtnProps;
   /**
    * The UI properties for the create button.
    */
@@ -118,6 +122,7 @@ export interface LinidFavoritePanelUIProps {
 export type LinidFavoritePanelOutputs = {
   (e: 'apply', favorite: LinidFilterSet): void;
   (e: 'delete', favorite: LinidFilterSet): void;
+  (e: 'rename', favorite: LinidFilterSet): void;
   (e: 'create'): void;
   (e: 'override'): void;
 };
diff --git a/apps/catalog-ui/src/types/smartFilter.ts b/apps/catalog-ui/src/types/smartFilter.ts
@@ -66,6 +66,7 @@ export interface LinidSmartFilterProps extends CommonComponentProps {
 export type LinidSmartFilterOutputs = {
   (e: 'update:filters', filters: LinidFilter[]): void;
   (e: 'apply:favorite', favorite: LinidFilterSet): void;
+  (e: 'rename:favorite', favorite: LinidFilterSet): void;
   (e: 'delete:favorite', favorite: LinidFilterSet): void;
   (e: 'create:favorite'): void;
   (e: 'override:favorite'): void;
diff --git a/apps/catalog-ui/tests/unit/pages/GenericTablePage.spec.js b/apps/catalog-ui/tests/unit/pages/GenericTablePage.spec.js
