diff --git a/e2e-tests/tests/pluginSetting.spec.ts b/e2e-tests/tests/pluginSetting.spec.ts index 88609b210a..de63755adf 100644 --- 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 index 3135cb314c..c55060b610 100644 --- 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} {plugin.version} @@ -204,7 +219,7 @@ export function PluginSettingsPure(props: PluginSettingsPureProps) { const url = plugin?.homepage || plugin?.repository?.url; return plugin?.origin ? ( url ? ( - {plugin?.origin} + {plugin.origin} ) : ( plugin?.origin ) diff --git a/frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx b/frontend/src/components/App/PluginSettings/PluginSettingsDetails.tsx index 3b78df9fc8..776f916498 100644 --- 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 ( <> - + {plugin.description}

- Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown +

- Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown +

- Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown +

- Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown +

- Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown + - Unknown + + Unknown +

{ title?: React.ReactNode; + subtitle?: React.ReactNode; headerProps?: Omit; outterBoxProps?: Omit; //** The location to go back to. If provided as an empty string, the browser's history will be used. If not provided (default)), then no back button is used. */ @@ -14,6 +15,7 @@ export interface SectionBoxProps extends Omit { export function SectionBox(props: SectionBoxProps) { const { title, + subtitle, children, headerProps = { noPadding: false, headerStyle: 'subsection' }, outterBoxProps = {}, @@ -26,7 +28,9 @@ export function SectionBox(props: SectionBoxProps) { const actualBackLink = typeof backLink === 'boolean' ? (!!backLink ? '' : undefined) : backLink; if (typeof title === 'string') { - titleElem = ; + titleElem = ( + + ); } else { titleElem = title; } diff --git a/frontend/src/components/common/SectionHeader.tsx b/frontend/src/components/common/SectionHeader.tsx index 4f450c9bdd..1cd0a03506 100644 --- a/frontend/src/components/common/SectionHeader.tsx +++ b/frontend/src/components/common/SectionHeader.tsx @@ -8,6 +8,7 @@ export type HeaderStyle = 'main' | 'subsection' | 'normal' | 'label'; export interface SectionHeaderProps { title: string; + subtitle?: string | React.ReactNode; actions?: React.ReactNode[] | null; noPadding?: boolean; headerStyle?: HeaderStyle; @@ -38,18 +39,25 @@ export default function SectionHeader(props: SectionHeaderProps) { > {(!!props.title || titleSideActions.length > 0) && ( - + {!!props.title && ( - ({ - ...theme.palette.headerStyle[headerStyle || 'normal'], - whiteSpace: 'pre-wrap', - })} - > - {props.title} - + <> + ({ + ...theme.palette.headerStyle[headerStyle || 'normal'], + whiteSpace: 'pre-wrap', + })} + > + {props.title} + + {!!props.subtitle && ( + + {props.subtitle} + + )} + )} {!!titleSideActions && ( diff --git a/frontend/src/components/common/Table/__snapshots__/Table.LabelSearch.stories.storyshot b/frontend/src/components/common/Table/__snapshots__/Table.LabelSearch.stories.storyshot index 6796020c1b..c46fb4a72b 100644 --- a/frontend/src/components/common/Table/__snapshots__/Table.LabelSearch.stories.storyshot +++ b/frontend/src/components/common/Table/__snapshots__/Table.LabelSearch.stories.storyshot @@ -7,7 +7,7 @@ class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root" >