frontend: Add subtitle for plugin origin in details

Signed-off-by: Evangelos Skopelitis <[email protected]>
headlamp-k8s · Nov 21, 2024 · 97131b9 · 97131b9
1 parent 39ac3ee
commit 97131b9
Show file tree

Hide file tree

Showing 109 changed files with 496 additions and 246 deletions.
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"