Skip to content

Commit

Permalink
frontend: PluginSettings: Use author for plugin origin
Browse files Browse the repository at this point in the history
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>
  • Loading branch information
skoeva committed Nov 19, 2024
1 parent d24fc9f commit 35ba0fc
Show file tree
Hide file tree
Showing 112 changed files with 521 additions and 252 deletions.
2 changes: 1 addition & 1 deletion e2e-tests/tests/pluginSetting.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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/);
Expand Down
25 changes: 20 additions & 5 deletions frontend/src/components/App/PluginSettings/PluginSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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>
Expand All @@ -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
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(/\/(.+)/)[0], plugin.name.split(/\/(.+)/)[1]]
: [null, plugin.name];

useEffect(() => {
if (!_.isEqual(config, data)) {
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading

0 comments on commit 35ba0fc

Please sign in to comment.