diff --git a/.betterer.results b/.betterer.results index 8f55ebac72e..84b03baadf8 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1463,6 +1463,9 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "5"], [0, 0, 0, "Unexpected any. Specify a different type.", "6"] ], + "public/app/core/components/AppChrome/News/NewsContainer.tsx:5381": [ + [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] + ], "public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx:5381": [ [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] ], diff --git a/public/app/core/components/AppChrome/News/NewsContainer.test.tsx b/public/app/core/components/AppChrome/News/NewsContainer.test.tsx index 6036d11d9f8..228b7c487cf 100644 --- a/public/app/core/components/AppChrome/News/NewsContainer.test.tsx +++ b/public/app/core/components/AppChrome/News/NewsContainer.test.tsx @@ -1,6 +1,5 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import fs from 'fs'; import React from 'react'; import { NewsContainer } from './NewsContainer'; @@ -12,17 +11,10 @@ const setup = () => { }; describe('News', () => { - const result = fs.readFileSync(`${__dirname}/fixtures/news.xml`, 'utf8'); - beforeEach(() => { - jest.resetAllMocks(); - window.fetch = jest.fn().mockResolvedValue({ text: () => result }); - }); - it('should render the drawer when the drawer button is clicked', async () => { setup(); await userEvent.click(screen.getByRole('button')); - expect(screen.getByRole('article')).toBeInTheDocument(); - expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.example.net/2022/02/10/something-fake/'); + expect(screen.getByText('Latest from the blog')).toBeInTheDocument(); }); }); diff --git a/public/app/core/components/AppChrome/News/NewsContainer.tsx b/public/app/core/components/AppChrome/News/NewsContainer.tsx index 80c6a2099f0..da7c096702b 100644 --- a/public/app/core/components/AppChrome/News/NewsContainer.tsx +++ b/public/app/core/components/AppChrome/News/NewsContainer.tsx @@ -1,7 +1,11 @@ +import { css } from '@emotion/css'; import React from 'react'; import { useToggle } from 'react-use'; -import { Drawer, ToolbarButton } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { selectors } from '@grafana/e2e-selectors'; +import { Button, Drawer, ToolbarButton, useStyles2 } from '@grafana/ui'; +import { H3 } from '@grafana/ui/src/unstable'; import { t } from 'app/core/internationalization'; import { DEFAULT_FEED_URL } from 'app/plugins/panel/news/constants'; @@ -13,17 +17,36 @@ interface NewsContainerProps { export function NewsContainer({ className }: NewsContainerProps) { const [showNewsDrawer, onToggleShowNewsDrawer] = useToggle(false); - - const onChildClick = () => { - onToggleShowNewsDrawer(true); - }; + const styles = useStyles2(getStyles); return ( <> - + {showNewsDrawer && ( +

{t('news.title', 'Latest from the blog')}

+ + Grot reading news + +
+
+ + } scrollableContent onClose={onToggleShowNewsDrawer} size="md" @@ -34,3 +57,31 @@ export function NewsContainer({ className }: NewsContainerProps) { ); } + +const getStyles = (theme: GrafanaTheme2) => { + return { + title: css({ + display: `flex`, + alignItems: `center`, + justifyContent: `center`, + gap: theme.spacing(2), + borderBottom: `1px solid ${theme.colors.border.weak}`, + }), + grot: css({ + display: `flex`, + alignItems: `center`, + justifyContent: `center`, + padding: theme.spacing(2, 0), + + img: { + width: `75px`, + height: `75px`, + }, + }), + actions: css({ + position: 'absolute', + right: theme.spacing(1), + top: theme.spacing(2), + }), + }; +}; diff --git a/public/app/core/components/AppChrome/News/NewsWrapper.tsx b/public/app/core/components/AppChrome/News/NewsWrapper.tsx index cff91cbffe2..7e37b1e4db9 100644 --- a/public/app/core/components/AppChrome/News/NewsWrapper.tsx +++ b/public/app/core/components/AppChrome/News/NewsWrapper.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import React, { useEffect } from 'react'; -import AutoSizer from 'react-virtualized-auto-sizer'; +import { useMeasure } from 'react-use'; import { GrafanaTheme2 } from '@grafana/data'; import { LoadingPlaceholder, useStyles2 } from '@grafana/ui'; @@ -13,6 +13,8 @@ interface NewsWrapperProps { export function NewsWrapper({ feedUrl }: NewsWrapperProps) { const styles = useStyles2(getStyles); const { state, getNews } = useNewsFeed(feedUrl); + const [widthRef, widthMeasure] = useMeasure(); + useEffect(() => { getNews(); }, [getNews]); @@ -31,15 +33,17 @@ export function NewsWrapper({ feedUrl }: NewsWrapperProps) { } return ( - - {({ width }) => ( -
- {state.value.map((_, index) => ( - - ))} -
- )} - +
+ {widthMeasure.width > 0 && + state.value.map((_, index) => ( + + ))} +
+ + Grot reading news + +
+
); } @@ -52,5 +56,16 @@ const getStyles = (theme: GrafanaTheme2) => { align-items: center; justify-content: center; `, + grot: css({ + display: `flex`, + alignItems: `center`, + justifyContent: `center`, + padding: theme.spacing(5, 0), + + img: { + width: `186px`, + height: `186px`, + }, + }), }; }; diff --git a/public/img/grot-news.svg b/public/img/grot-news.svg new file mode 100644 index 00000000000..f98c62eec92 --- /dev/null +++ b/public/img/grot-news.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +