apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Explore: Remove plus icon from Add button (#83587)

Browse Source
pull/83971/head
Giordano Ricci 1 year ago committed by GitHub
parent d269b4bf0d
commit 6db7eafd7e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 48 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      public/app/features/explore/ExploreToolbar.tsx
  2. 43
      public/app/features/explore/extensions/ToolbarExtensionPoint.test.tsx
  3. 13
      public/app/features/explore/extensions/ToolbarExtensionPoint.tsx

7
public/app/features/explore/ExploreToolbar.tsx
Unescape View File

@ -273,12 +273,7 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
</ToolbarButton>
</ButtonGroup>
),
<ToolbarExtensionPoint
splitted={splitted}
key="toolbar-extension-point"
exploreId={exploreId}
timeZone={timeZone}
/>,
<ToolbarExtensionPoint key="toolbar-extension-point" exploreId={exploreId} timeZone={timeZone} />,
!isLive && (
<ExploreTimeControls
key="timeControls"

43
public/app/features/explore/extensions/ToolbarExtensionPoint.test.tsx
Unescape View File

@ -78,23 +78,13 @@ describe('ToolbarExtensionPoint', () => {
});
it('should render "Add" extension point menu button', () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
expect(screen.getByRole('button', { name: 'Add' })).toBeVisible();
});
it('should render menu with extensions when "Add" is clicked in split mode', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId={'left'} timeZone="browser" splitted={true} />);
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
expect(screen.getByRole('group', { name: 'Dashboards' })).toBeVisible();
expect(screen.getByRole('menuitem', { name: 'Add to dashboard' })).toBeVisible();
expect(screen.getByRole('menuitem', { name: 'ML: Forecast' })).toBeVisible();
});
it('should render menu with extensions when "Add" is clicked', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
@ -104,7 +94,7 @@ describe('ToolbarExtensionPoint', () => {
});
it('should call onClick from extension when menu item is clicked', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
await userEvent.click(screen.getByRole('menuitem', { name: 'Add to dashboard' }));
@ -116,7 +106,7 @@ describe('ToolbarExtensionPoint', () => {
});
it('should render confirm navigation modal when extension with path is clicked', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
await userEvent.click(screen.getByRole('menuitem', { name: 'ML: Forecast' }));
@ -130,7 +120,7 @@ describe('ToolbarExtensionPoint', () => {
const targets = [{ refId: 'A' }];
const data = createEmptyQueryResponse();
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />, {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />, {
targets,
data,
});
@ -155,7 +145,7 @@ describe('ToolbarExtensionPoint', () => {
const targets = [{ refId: 'A' }];
const data = createEmptyQueryResponse();
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="" splitted={false} />, {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="" />, {
targets,
data,
});
@ -167,7 +157,7 @@ describe('ToolbarExtensionPoint', () => {
});
it('should correct extension point id when fetching extensions', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
const [options] = getPluginLinkExtensionsMock.mock.calls[0];
const { extensionPointId } = options;
@ -201,24 +191,13 @@ describe('ToolbarExtensionPoint', () => {
});
it('should render "Add" extension point menu button', () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
expect(screen.getByRole('button', { name: 'Add' })).toBeVisible();
});
it('should render "Add" extension point menu button in split mode', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId={'left'} timeZone="browser" splitted={true} />);
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
// Make sure we don't have anything related to categories rendered
expect(screen.queryAllByRole('group').length).toBe(0);
expect(screen.getByRole('menuitem', { name: 'Dashboard' })).toBeVisible();
expect(screen.getByRole('menuitem', { name: 'ML: Forecast' })).toBeVisible();
});
it('should render menu with extensions when "Add" is clicked', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
await userEvent.click(screen.getByRole('button', { name: 'Add' }));
@ -236,7 +215,7 @@ describe('ToolbarExtensionPoint', () => {
});
it('should render "add to dashboard" action button if one pane is visible', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
await waitFor(() => {
const button = screen.getByRole('button', { name: /add to dashboard/i });
@ -254,7 +233,7 @@ describe('ToolbarExtensionPoint', () => {
});
it('should not render "add to dashboard" action button', async () => {
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" splitted={false} />);
renderWithExploreStore(<ToolbarExtensionPoint exploreId="left" timeZone="browser" />);
expect(screen.queryByRole('button', { name: /add to dashboard/i })).not.toBeInTheDocument();
});

13
public/app/features/explore/extensions/ToolbarExtensionPoint.tsx
Unescape View File

@ -19,11 +19,10 @@ const AddToDashboard = lazy(() =>
type Props = {
exploreId: string;
timeZone: TimeZone;
splitted: boolean;
};
export function ToolbarExtensionPoint(props: Props): ReactElement | null {
const { exploreId, splitted } = props;
const { exploreId } = props;
const [selectedExtension, setSelectedExtension] = useState<PluginExtensionLink | undefined>();
const [isOpen, setIsOpen] = useState<boolean>(false);
const context = useExtensionPointContext(props);
@ -54,14 +53,8 @@ export function ToolbarExtensionPoint(props: Props): ReactElement | null {
return (
<>
<Dropdown onVisibleChange={setIsOpen} placement="bottom-start" overlay={menu}>
<ToolbarButton
aria-label="Add"
icon="plus"
disabled={!Boolean(noQueriesInPane)}
variant="canvas"
isOpen={isOpen}
>
{splitted ? ' ' : 'Add'}
<ToolbarButton aria-label="Add" disabled={!Boolean(noQueriesInPane)} variant="canvas" isOpen={isOpen}>
Add
</ToolbarButton>
</Dropdown>
{!!selectedExtension && !!selectedExtension.path && (

Write Preview
Loading…
Cancel
Save