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 <[email protected]>
headlamp-k8s · Nov 21, 2024 · 0bf951b · 0bf951b
1 parent d24fc9f
commit 0bf951b
Show file tree

Hide file tree

Showing 112 changed files with 520 additions and 251 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 [author, name] = plugin.name.includes('@')
+        ? plugin.name.split(/\/(.+)/)
+        : [null, plugin.name];
+
+      return {
+        ...plugin,
+        displayName: name ?? plugin.name,
+        origin: plugin.origin ?? author?.substring(1) ?? t('translation|Unknown'),
+      };
+    })
+  );
 
   /**
    * useEffect to control the rendering of the save button.
@@ -186,7 +201,7 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
                         params={{ name: plugin.name }}
                         align="right"
                       >
-                        {plugin.name}
+                        {plugin.displayName}
                       </HeadlampLink>
                     </Typography>
                     <Typography variant="caption">{plugin.version}</Typography>
@@ -204,7 +219,7 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) {
                 const url = plugin?.homepage || plugin?.repository?.url;
                 return plugin?.origin ? (
                   url ? (
-                    <Link href={url}>{plugin?.origin}</Link>
+                    <Link href={url}>{plugin.origin}</Link>
                   ) : (
                     plugin?.origin
                   )

diff --git a/frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx b/frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx
@@ -107,6 +107,9 @@ export function PluginSettingsDetailsPure(props: PluginSettingsDetailsPureProps)
   const [enableSaveButton, setEnableSaveButton] = useState(false);
   const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
   const history = useHistory();
+  const [author, name] = plugin.name.includes('@')
+    ? plugin.name.substring(1).split(/\/(.+)/)
+    : [null, plugin.name];
 
   useEffect(() => {
     if (!_.isEqual(config, data)) {
@@ -156,7 +159,12 @@ export function PluginSettingsDetailsPure(props: PluginSettingsDetailsPureProps)
 
   return (
     <>
-      <SectionBox aria-live="polite" title={plugin.name} backLink={'/settings/plugins'}>
+      <SectionBox
+        aria-live="polite"
+        title={name}
+        subtitle={author ? `${t('translation|By')}: ${author}` : undefined}
+        backLink={'/settings/plugins'}
+      >
         {plugin.description}
         <ScrollableBox style={{ height: '70vh' }} py={0}>
           <ConfirmDialog

diff --git a/...nents/App/PluginSettings/__snapshots__/PluginSettings.DefaultSaveEnable.stories.storyshot b/...nents/App/PluginSettings/__snapshots__/PluginSettings.DefaultSaveEnable.stories.storyshot
@@ -10,7 +10,7 @@
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <div
-            class="MuiBox-root css-70qvj9"
+            class="MuiBox-root css-15xsm7k"
           >
             <h1
               class="MuiTypography-root MuiTypography-h1 MuiTypography-noWrap css-yeaech-MuiTypography-root"
@@ -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/...nd/src/components/App/PluginSettings/__snapshots__/PluginSettings.Empty.stories.storyshot b/...nd/src/components/App/PluginSettings/__snapshots__/PluginSettings.Empty.stories.storyshot
@@ -10,7 +10,7 @@
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <div
-            class="MuiBox-root css-70qvj9"
+            class="MuiBox-root css-15xsm7k"
           >
             <h1
               class="MuiTypography-root MuiTypography-h1 MuiTypography-noWrap css-yeaech-MuiTypography-root"

diff --git a/...ents/App/PluginSettings/__snapshots__/PluginSettings.EmptyHomepageItems.stories.storyshot b/...ents/App/PluginSettings/__snapshots__/PluginSettings.EmptyHomepageItems.stories.storyshot
@@ -10,7 +10,7 @@
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <div
-            class="MuiBox-root css-70qvj9"
+            class="MuiBox-root css-15xsm7k"
           >
             <h1
               class="MuiTypography-root MuiTypography-h1 MuiTypography-noWrap css-yeaech-MuiTypography-root"
@@ -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
@@ -10,7 +10,7 @@
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <div
-            class="MuiBox-root css-70qvj9"
+            class="MuiBox-root css-15xsm7k"
           >
             <h1
               class="MuiTypography-root MuiTypography-h1 MuiTypography-noWrap css-yeaech-MuiTypography-root"
@@ -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"