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 15, 2024 · 75329d5 · 75329d5
1 parent d24fc9f
commit 75329d5
Show file tree

Hide file tree

Showing 7 changed files with 290 additions and 50 deletions.
diff --git a/e2e-tests/tests/pluginSetting.spec.ts b/e2e-tests/tests/pluginSetting.spec.ts
@@ -20,7 +20,7 @@ test('plugin settings page should have a table', async ({ page }) => {
 
 test('pod counter plugin should have setting option', async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
-  const pluginName = '@kinvolk/headlamp-pod-counter';
+  const pluginName = 'headlamp-pod-counter';
 
   await headlampPage.authenticate();
   await headlampPage.navigateTopage('/settings/plugins', /Plugin/);

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"