UI: New share button and toolbar reorganize #77563

evictorero · 2023-11-02T13:12:27Z

What is this feature?
Changes style of the public dashboard badge, the add and share button and reorganize toolbar buttons.

Before

Now

Which issue(s) does this PR fix?:

Fixes #77298
Fixes #71539

Special notes for your reviewer:
This is the first step of toolbar redesign, more info here

Please check that:

It works as expected from a user's perspective.
If this is a pre-GA feature, it is behind a feature toggle.
The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

natydej · 2023-11-08T12:01:53Z

We decided to enable a feature flag to control and test this version V1, and get some feedback from users to see how it will impact the usage.

Figma

cc @thanos-karachalios

evictorero · 2023-11-14T18:18:15Z

Blocked until we implement tracking in the toolbar actions.

lucychen-grafana

Tested and LGTM

natellium · 2023-12-01T12:43:45Z

@evictorero Something I just thought is that we should make sure no docs need to be updated (or that they get updated if needed), we may be using some screenshots that need to be renewed.

evictorero · 2023-12-01T12:58:11Z

@evictorero Something I just thought is that we should make sure no docs need to be updated (or that they get updated if needed), we may be using some screenshots that need to be renewed.

We will wait a few days to collect analytics data from the old button before merge this one. I don't think we update screenshots in our docs for these small changes do we? In any case, this will change a lot over the next weeks/months maybe we can wait until a more refined version?

natellium · 2023-12-04T16:05:33Z

We will wait a few days to collect analytics data from the old button before merge this one. I don't think we update screenshots in our docs for these small changes do we? In any case, this will change a lot over the next weeks/months maybe we can wait until a more refined version?

I actually don't know :) @imatwawana any thoughts?

imatwawana · 2023-12-04T20:35:08Z

We will wait a few days to collect analytics data from the old button before merge this one. I don't think we update screenshots in our docs for these small changes do we? In any case, this will change a lot over the next weeks/months maybe we can wait until a more refined version?

I actually don't know :) @imatwawana any thoughts?

You can probably hold off on updating screenshots if there are going to be several changes, but the text should be updated as elements get changed. So the docs where we refer to the "sharing icon" should be updated along with this change.

juanicabanas

LGTM!
As we discussed, I'm a little worried about the button padding and height, which is not the same as in the design.
I agree we shouldn't customize the CSS as it was before, though.

ivanortegaalba

Looks great to me! 💯

Please wait for the review from @Ijin08 if he is not aware of the redesign 🙏

ivanortegaalba · 2024-01-05T09:41:20Z

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -332,7 +309,33 @@ export const DashNav = React.memo<Props>((props) => {
      );
    }

-    addCustomContent(dynamicDashNavActions.right, buttons);
+    if (canEdit && !isFullscreen) {
+      if (config.featureToggles.emptyDashboardPage) {


You can remove this condition since the toggle is enabled to 100% by default 😄

I searched for this flag and it is being used in more places, I prefer to leave it here to be removed by a cleanup PR.

ivanortegaalba · 2024-01-05T09:42:10Z

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -360,3 +363,9 @@ const modalStyles = css({
  width: 'max-content',
  maxWidth: '80vw',
 });
+
+const publicBadgeStyle = css({
+  color: 'grey',


Why don't we use grey as color, or event transparent? Blue is confusing 😓

We use grey on this line 🤔. If you are talking about the original <Badge line it is using blue because it is one of the valid colors required by BadgeComponent https://github.com/grafana/grafana/blob/329ec2624a514afa0c042800a00341fdc811e068/packages/grafana-ui/src/components/Badge/Badge.tsx#L14```

I don't like it, but I don't know how to fix it and it should be temporary until we replace it with the new Badge component.

natydej

LGTM!

UI: New share button and toolbar reorganize

8f6a085

evictorero added add to changelog no-backport Skip backport of PR labels Nov 2, 2023

evictorero requested review from juanicabanas and natydej November 2, 2023 13:12

evictorero requested a review from a team as a code owner November 2, 2023 13:12

evictorero requested review from dprokop and kaydelaney and removed request for a team November 2, 2023 13:12

grafana-delivery-bot bot added this to the 10.3.x milestone Nov 2, 2023

grafana-pr-automation bot added the area/frontend label Nov 2, 2023

fix tests

3caca8d

evictorero requested a review from a team as a code owner November 2, 2023 14:19

evictorero requested review from Clarity-89 and ashharrison90 and removed request for a team November 2, 2023 14:19

natydej mentioned this pull request Nov 3, 2023

Improve the "Public" tag functionality #71539

Closed

change variant button to secondary

d8f9b1b

evictorero added 2 commits November 13, 2023 17:08

Merge branch 'main' into evictorero/new-toolbar-design

2be8c49

design changes

84eb4ba

evictorero added 2 commits November 27, 2023 14:46

Merge branch 'main' into evictorero/new-toolbar-design

1666fc6

update toolbar buttons

e94d827

lucychen-grafana reviewed Nov 30, 2023

View reviewed changes

Merge branch 'main' into evictorero/new-toolbar-design

1d31c94

evictorero added 3 commits December 21, 2023 09:39

change buttons order

7e6e29a

Merge branch 'main' into evictorero/new-toolbar-design

aa9f931

add i18n to button name

7165e7d

grafana-pr-automation bot requested review from a team and oshirohugo and removed request for a team January 4, 2024 19:14

juanicabanas approved these changes Jan 4, 2024

View reviewed changes

ivanortegaalba approved these changes Jan 5, 2024

View reviewed changes

natydej approved these changes Jan 8, 2024

View reviewed changes

evictorero merged commit 25ff4ba into main Jan 8, 2024
20 checks passed

evictorero deleted the evictorero/new-toolbar-design branch January 8, 2024 13:42

imatwawana mentioned this pull request Jan 10, 2024

Docs: replace share icon with share button #80173

Merged

ifrost modified the milestones: 10.3.x, 10.4.x Jan 12, 2024

zserge pushed a commit that referenced this pull request Jan 22, 2024

UI: New share button and toolbar reorganize (#77563)

0cbdf0d

ashharrison90 mentioned this pull request Jan 30, 2024

Dashboards: Unable to see dashboard changes in drawer #81009

Closed

s0lesurviv0r pushed a commit to s0lesurviv0r/grafana that referenced this pull request Feb 3, 2024

UI: New share button and toolbar reorganize (grafana#77563)

42b24b6

aangelisc modified the milestones: 10.4.x, 10.4.0 Mar 6, 2024

BrewTestBot mentioned this pull request Mar 6, 2024

grafana 10.4.0 Homebrew/homebrew-core#165251

Closed

BrewTestBot mentioned this pull request Mar 14, 2024

grafana 10.4.0 Homebrew/homebrew-core#166070

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: New share button and toolbar reorganize #77563

UI: New share button and toolbar reorganize #77563

evictorero commented Nov 2, 2023 •

edited

Loading

natydej commented Nov 8, 2023

evictorero commented Nov 14, 2023

lucychen-grafana left a comment

natellium commented Dec 1, 2023

evictorero commented Dec 1, 2023

natellium commented Dec 4, 2023

imatwawana commented Dec 4, 2023 •

edited

Loading

juanicabanas left a comment

ivanortegaalba left a comment

ivanortegaalba Jan 5, 2024

evictorero Jan 5, 2024

ivanortegaalba Jan 5, 2024

evictorero Jan 5, 2024 •

edited

Loading

natydej left a comment

UI: New share button and toolbar reorganize #77563

UI: New share button and toolbar reorganize #77563

Conversation

evictorero commented Nov 2, 2023 • edited Loading

natydej commented Nov 8, 2023

evictorero commented Nov 14, 2023

lucychen-grafana left a comment

Choose a reason for hiding this comment

natellium commented Dec 1, 2023

evictorero commented Dec 1, 2023

natellium commented Dec 4, 2023

imatwawana commented Dec 4, 2023 • edited Loading

juanicabanas left a comment

Choose a reason for hiding this comment

ivanortegaalba left a comment

Choose a reason for hiding this comment

ivanortegaalba Jan 5, 2024

Choose a reason for hiding this comment

evictorero Jan 5, 2024

Choose a reason for hiding this comment

ivanortegaalba Jan 5, 2024

Choose a reason for hiding this comment

evictorero Jan 5, 2024 • edited Loading

Choose a reason for hiding this comment

natydej left a comment

Choose a reason for hiding this comment

evictorero commented Nov 2, 2023 •

edited

Loading

imatwawana commented Dec 4, 2023 •

edited

Loading

evictorero Jan 5, 2024 •

edited

Loading