diff --git a/public/app/features/plugins/admin/components/Loader.tsx b/public/app/features/plugins/admin/components/Loader.tsx index 2ce20da786d..677def2e4aa 100644 --- a/public/app/features/plugins/admin/components/Loader.tsx +++ b/public/app/features/plugins/admin/components/Loader.tsx @@ -2,18 +2,14 @@ import React from 'react'; import { LoadingPlaceholder } from '@grafana/ui'; -import { Page } from './Page'; - export interface Props { text?: string; } export const Loader = ({ text = 'Loading...' }: Props) => { return ( - -
- -
-
+
+ +
); }; diff --git a/public/app/features/plugins/admin/components/Page.tsx b/public/app/features/plugins/admin/components/Page.tsx deleted file mode 100644 index 199cb9939c3..00000000000 --- a/public/app/features/plugins/admin/components/Page.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { css } from '@emotion/css'; -import React from 'react'; - -import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '@grafana/ui'; - -export const Page: React.FC = ({ children }) => { - const styles = useStyles2(getStyles); - return ( -
-
{children}
-
- ); -}; - -const getStyles = (theme: GrafanaTheme2) => - css` - margin-bottom: ${theme.spacing(3)}; - `; diff --git a/public/app/features/plugins/admin/components/PluginDetailsHeader.tsx b/public/app/features/plugins/admin/components/PluginDetailsHeader.tsx index 4e8b77e58c8..3c91fff7cf8 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsHeader.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsHeader.tsx @@ -26,75 +26,79 @@ export function PluginDetailsHeader({ plugin, currentUrl, parentUrl }: Props): R const version = plugin.installedVersion || latestCompatibleVersion?.version; return ( -
- +
+
+
+ -
- {/* Title & navigation */} - +
+ {/* Title & navigation */} + -
- {/* Org name */} - {plugin.orgName} +
+ {/* Org name */} + {plugin.orgName} - {/* Links */} - {plugin.details?.links.map((link: any) => ( - - {link.name} - - ))} + {/* Links */} + {plugin.details?.links.map((link: any) => ( + + {link.name} + + ))} - {/* Downloads */} - {plugin.downloads > 0 && ( - - - {` ${new Intl.NumberFormat().format(plugin.downloads)}`}{' '} - - )} + {/* Downloads */} + {plugin.downloads > 0 && ( + + + {` ${new Intl.NumberFormat().format(plugin.downloads)}`}{' '} + + )} - {/* Version */} - {Boolean(version) && {version}} + {/* Version */} + {Boolean(version) && {version}} - {/* Signature information */} - + {/* Signature information */} + - {plugin.isDisabled && } + {plugin.isDisabled && } +
+ + + +

{plugin.description}

+ + + + + +
- - - -

{plugin.description}

- - - - -
); diff --git a/public/app/features/plugins/admin/pages/Browse.tsx b/public/app/features/plugins/admin/pages/Browse.tsx index 91d5ae6d2e9..53072615042 100644 --- a/public/app/features/plugins/admin/pages/Browse.tsx +++ b/public/app/features/plugins/admin/pages/Browse.tsx @@ -12,7 +12,6 @@ import { getNavModel } from 'app/core/selectors/navModel'; import { StoreState } from 'app/types/store'; import { HorizontalGroup } from '../components/HorizontalGroup'; -import { Page as PluginPage } from '../components/Page'; import { PluginList } from '../components/PluginList'; import { SearchField } from '../components/SearchField'; import { Sorters } from '../helpers'; @@ -69,94 +68,92 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem return ( - - - - - {/* Filter by type */} -
- -
- - {/* Filter by installed / all */} - {remotePluginsAvailable ? ( -
- -
- ) : ( - -
- -
-
- )} - - {/* Sorting */} -
- +
+ + {/* Display mode */} +
+ + className={styles.displayAs} + value={displayMode} + onChange={setDisplayMode} + options={[ + { + value: PluginListDisplayMode.Grid, + icon: 'table', + description: 'Display plugins in a grid layout', + }, + { value: PluginListDisplayMode.List, icon: 'list-ul', description: 'Display plugins in list' }, + ]} + /> +
+
+
+
+ {isLoading ? ( + + ) : ( + + )} +
); diff --git a/public/app/features/plugins/admin/pages/NotEnabed.tsx b/public/app/features/plugins/admin/pages/NotEnabed.tsx index 9d56dab9319..8a54f4045f4 100644 --- a/public/app/features/plugins/admin/pages/NotEnabed.tsx +++ b/public/app/features/plugins/admin/pages/NotEnabed.tsx @@ -4,8 +4,6 @@ import React from 'react'; import { NavModel, NavModelItem } from '@grafana/data'; import { Page } from 'app/core/components/Page/Page'; -import { Page as PluginPage } from '../components/Page'; - const node: NavModelItem = { id: 'not-found', text: 'The plugin catalog is not enabled', @@ -19,18 +17,16 @@ export default function NotEnabled(): JSX.Element | null { return ( - - To enable installing plugins via catalog, please refer to the{' '} - - Plugin Catalog - {' '} - instructions - + To enable installing plugins via catalog, please refer to the{' '} + + Plugin Catalog + {' '} + instructions ); diff --git a/public/app/features/plugins/admin/pages/PluginDetails.tsx b/public/app/features/plugins/admin/pages/PluginDetails.tsx index 394bdfbe8b1..0369046067c 100644 --- a/public/app/features/plugins/admin/pages/PluginDetails.tsx +++ b/public/app/features/plugins/admin/pages/PluginDetails.tsx @@ -11,7 +11,6 @@ import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { AppNotificationSeverity } from 'app/types'; import { Loader } from '../components/Loader'; -import { Page as PluginPage } from '../components/Page'; import { PluginDetailsBody } from '../components/PluginDetailsBody'; import { PluginDetailsDisabledError } from '../components/PluginDetailsDisabledError'; import { PluginDetailsHeader } from '../components/PluginDetailsHeader'; @@ -75,9 +74,8 @@ export default function PluginDetails({ match, queryParams }: Props): JSX.Elemen return ( - - - + + {/* Tab navigation */} {tabs.map((tab: PluginDetailsTab) => { @@ -99,7 +97,7 @@ export default function PluginDetails({ match, queryParams }: Props): JSX.Elemen - + ); }