mirror of https://github.com/grafana/grafana
Plugins: Plugin details right panel is added. All the details were moved from thee top to the right panel (#90325)
* PluginDetailsRight panel is added. All the details were moved from the top to the right panel * Add feature toggle pluginsDetailsRightPanel,Fix build, fix review comments * Fix the typo Co-authored-by: Giuseppe Guerra <giuseppe.guerra@grafana.com> * hasAccessToExplore * changes after review, add translations * fix betterer * fix betterer * fix css error * fix betterer * fix translation labels, fix position of the right panel * fix the build * add condition to show updatedAt for plugin details * add test to check 2 new fields at plugin details right panel; * change the gap and remove report abuse button from core plugins * add more tests --------- Co-authored-by: Giuseppe Guerra <giuseppe.guerra@grafana.com>pull/91833/head
Yulia Shanyrova
11 months ago
committed by
GitHub
parent
bac68069e0
commit
8044cb50f1
|
@ -0,0 +1,44 @@ |
||||
import { css, cx } from '@emotion/css'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
|
||||
interface Props { |
||||
sanitizedHTML: string; |
||||
} |
||||
|
||||
export const Changelog = ({ sanitizedHTML }: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
return ( |
||||
<div |
||||
dangerouslySetInnerHTML={{ __html: sanitizedHTML ?? 'No changelog was found' }} |
||||
className={cx(styles.changelog)} |
||||
></div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
changelog: css({ |
||||
'h1:first-of-type': { |
||||
display: 'none', |
||||
}, |
||||
'h2:first-of-type': { |
||||
marginTop: 0, |
||||
}, |
||||
h2: { |
||||
marginTop: theme.spacing(2), |
||||
marginBottom: theme.spacing(1), |
||||
}, |
||||
li: { |
||||
marginLeft: theme.spacing(4), |
||||
}, |
||||
a: { |
||||
color: theme.colors.text.link, |
||||
'&:hover': { |
||||
color: theme.colors.text.link, |
||||
textDecoration: 'underline', |
||||
}, |
||||
}, |
||||
}), |
||||
}); |
||||
@ -0,0 +1,55 @@ |
||||
import { PageInfoItem } from '@grafana/runtime/src/components/PluginPage'; |
||||
import { TextLink, Stack, Text } from '@grafana/ui'; |
||||
import { Trans } from 'app/core/internationalization'; |
||||
import { formatDate } from 'app/core/internationalization/dates'; |
||||
|
||||
import { CatalogPlugin } from '../types'; |
||||
|
||||
type Props = { |
||||
info: PageInfoItem[]; |
||||
plugin: CatalogPlugin; |
||||
}; |
||||
|
||||
export function PluginDetailsRightPanel(props: Props): React.ReactElement | null { |
||||
const { info, plugin } = props; |
||||
|
||||
return ( |
||||
<Stack direction="column" gap={1} grow={0} shrink={0} maxWidth={'250px'}> |
||||
{info.map((infoItem, index) => { |
||||
return ( |
||||
<Stack key={index} wrap> |
||||
<Text color="secondary">{infoItem.label + ':'}</Text> |
||||
<div>{infoItem.value}</div> |
||||
</Stack> |
||||
); |
||||
})} |
||||
|
||||
{plugin.updatedAt && ( |
||||
<div> |
||||
<Text color="secondary"> |
||||
<Trans i18nKey="plugins.details.labels.updatedAt">Last updated: </Trans> |
||||
</Text>{' '} |
||||
<Text>{formatDate(new Date(plugin.updatedAt))}</Text> |
||||
</div> |
||||
)} |
||||
|
||||
{plugin?.details?.links && plugin.details?.links?.length > 0 && ( |
||||
<Stack direction="column" gap={2}> |
||||
{plugin.details.links.map((link, index) => ( |
||||
<div key={index}> |
||||
<TextLink href={link.url} external> |
||||
{link.name} |
||||
</TextLink> |
||||
</div> |
||||
))} |
||||
</Stack> |
||||
)} |
||||
|
||||
{!plugin?.isCore && ( |
||||
<TextLink href="mailto:integrations@grafana.com" external> |
||||
<Trans i18nKey="plugins.details.labels.reportAbuse">Report Abuse</Trans> |
||||
</TextLink> |
||||
)} |
||||
</Stack> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue