frontend: PluginSettings: Use author for plugin origin

This change makes the formatting of the plugin names consistent, using the plugin author for the origin value. When the author is not set, the default origin is "Unknown". Fixes: #2544 Signed-off-by: Evangelos Skopelitis <eskopelitis@microsoft.com>
headlamp-k8s · Nov 14, 2024 · 95d150f · 95d150f
1 parent d24fc9f
commit 95d150f
Show file tree

Hide file tree

Showing 6 changed files with 289 additions and 49 deletions.
diff --git a/frontend/src/components/App/PluginSettings/PluginSettings.tsx b/frontend/src/components/App/PluginSettings/PluginSettings.tsx
@@ -100,8 +100,23 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
   /** enableSave state enables the save button when changes are made to the plugin list */
   const [enableSave, setEnableSave] = useState(false);
 
-  /** pluginChanges state is the array of plugin data and any current changes made by the user to a plugin's "Enable" field via toggler */
-  const [pluginChanges, setPluginChanges] = useState(() => pluginArr.map((p: any) => p));
+  /**
+   * pluginChanges state is the array of plugin data and any current changes made by the user to a plugin's "Enable" field via toggler.
+   * The name and origin fields are split for consistency.
+   * */
+  const [pluginChanges, setPluginChanges] = useState(() =>
+    pluginArr.map((plugin: PluginInfo) => {
+      const [rawOrigin, name] = plugin.name.includes('@')
+        ? plugin.name.split(/\/(.+)/)
+        : [null, plugin.name];
+
+      return {
+        ...plugin,
+        name: name ?? plugin.name,
+        origin: plugin.origin ?? rawOrigin?.substring(1) ?? t('translation|Unknown'),
+      };
+    })
+  );
 
   /**
    * useEffect to control the rendering of the save button.
@@ -202,9 +217,9 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
               header: t('translation|Origin'),
               Cell: ({ row: { original: plugin } }: { row: MRT_Row<PluginInfo> }) => {
                 const url = plugin?.homepage || plugin?.repository?.url;
-                return plugin?.origin ? (
+                return plugin.origin ? (
                   url ? (
-                    <Link href={url}>{plugin?.origin}</Link>
+                    <Link href={url}>{plugin.origin}</Link>
                   ) : (
                     plugin?.origin
                   )

diff --git a/...nents/App/PluginSettings/__snapshots__/PluginSettings.DefaultSaveEnable.stories.storyshot b/...nents/App/PluginSettings/__snapshots__/PluginSettings.DefaultSaveEnable.stories.storyshot
@@ -488,7 +488,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-0"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -529,7 +534,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-1"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -570,7 +580,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-2"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -611,7 +626,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-3"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -652,7 +672,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-4"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"

diff --git a/...ents/App/PluginSettings/__snapshots__/PluginSettings.EmptyHomepageItems.stories.storyshot b/...ents/App/PluginSettings/__snapshots__/PluginSettings.EmptyHomepageItems.stories.storyshot
@@ -488,7 +488,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-0"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -529,7 +534,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-1"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -570,7 +580,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-2"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -611,7 +626,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-3"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -652,7 +672,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-4"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"

diff --git a/...src/components/App/PluginSettings/__snapshots__/PluginSettings.FewItems.stories.storyshot b/...src/components/App/PluginSettings/__snapshots__/PluginSettings.FewItems.stories.storyshot
@@ -488,7 +488,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-0"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -529,7 +534,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-1"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -570,7 +580,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-2"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -611,7 +626,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-3"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"
@@ -652,7 +672,12 @@
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-ac5fut-MuiTableCell-root"
                     data-index="2"
                   >
-                    Unknown
+                    <a
+                      class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-srrjpp-MuiTypography-root-MuiLink-root"
+                      href="https://example.com/plugin-link-4"
+                    >
+                      Unknown
+                    </a>
                   </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignLeft MuiTableCell-sizeMedium css-14fks5x-MuiTableCell-root"