Add feature highlight blue dot to GKE "Clusters" sidebar item

What does this MR do?

EE MR, https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4311

• Restores feature highlight blue dot code from https://gitlab.com/gitlab-org/gitlab-ce/issues/36760 which was reverted in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14373

Are there points in the code the reviewer needs to double check?

BE MR: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/16735

Remove the dismissal entry from the database

Here are some instructions on how to remove the persistent dismissal from the database, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/16735#example-usage: bundle exec rails c -> Callout.find_by(user: User.find_by(username: 'root'), feature_name: 'gke_cluster_integration').update(dismissed_state: false) UserCallout.find_by(user: User.find_by(username: 'root'), feature_name: UserCallout.feature_names['gke_cluster_integration']).destroy. Because of a BE bug, you need to be an explicit admin of the project (see https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/16735/diffs#note_56649940).

---

Previous blue dot feature highlight MRs

• https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/13515
• https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/2875

Todo

• Perhaps also port over https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14165
• Wait for ajax endpoint for persistent dismissal

Why was this MR needed?

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• Tests added for this feature/bug
• Review
  • Has been reviewed by UX
  • Has been reviewed by Frontend
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together
• Internationalization required/considered

What are the relevant issue numbers?

Closes #41672 (closed)

@MadLittleMods Does this MR close #41672 (closed) ? I think we may need additional issues / MR.

Based on the comments in the issue, it sounds like we need:

1. Blue dot functionality (what this MR does right?)
2. New functionality for persistent dismissal
3. The copy + image for the specific tooltip #41672 (closed) calls for (this should close the issue)

Does this MR address all three or just number one?

changed milestone to %10.5

@williamchia Still "WIP", I just restored the blue dot feature_highlight code from https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14373 (per commit and description above)

Need to wait for backend to address the persistent dismissal and for UX to write some actual copy and image for the cluster feature highlight.

changed the description

added 927 commits

• 39b5a82f...8e3f40f7 - 926 commits from branch master
• 6e60a4cf - Restore feature_highlight code

Compare with previous version

changed the description

@dimitrieh Visual UX review pass please

@MadLittleMods did you reuse the code @ClemMakesApps has used before to implement this feature? As it had quite some UX finesse to it. I hoped that code could easily be reused and it was a simple text and image change so to say :)

Let me know, because otherwise I think we have some various things to change ;)

assigned to @MadLittleMods

@dimitrieh Yes, the code is re-used. See description for where the code came from.

@MadLittleMods nice!

looks good!

1

Can you make the shadow more like that of a dropdown:

2

The pop-over doesn't seem to disappear after X seconds or when clicking somewhere else

3

Got it anchor has a big focus ring.. different from other anchors

4

The got it anchor doesn't dismiss the pop-over

5

The dot should also show up in the dropdown of CI/CD

6

the illustration wasn't showing for me ;)

---

PS: how can I resummon the popover after I dismissed it? it seems it was dismissed after page refresh

added 1 commit

• 3ec47d78 - Restore feature_highlight code

Compare with previous version

marked the checklist item Wait for ajax endpoint for persistent dismissal as completed

unmarked as a Work In Progress

added 59 commits

• 3ec47d78...dc325c67 - 50 commits from branch master
• 89ea6a99 - Add Callout model
• 0dab0837 - Add Callout specs
• c4667f87 - Implement Callouts controller
• bca10385 - Add CalloutsController specs
• 860c7c4b - Update database schema
• d77181d5 - Merge branch 'master' into persistent-callouts
• ec6c5833 - Implement CalloutsHelper
• 8be4f3ec - Move Callouts route to - path
• 65eecb86 - Restore feature_highlight code

Compare with previous version

@dimitrieh

1. I updated the dropdown to use the same shadow, https://i.imgur.com/uJXMeo0.png
2. Fixed (had some code to keep it open while developing)
3. Other anchors have a :focus ring. Am I missing something? https://i.imgur.com/xrL06om.png - It's technically a <button class="btn-link"> because it doesn't link anywhere.
4. Fixed (had some code to keep it open while developing)
5. We probably don't want the dot in the fly-out dropdown (dropdown in a dropdown sort of thing) and I think this is defined here "This does not apply to the fly out menus.", https://gitlab.com/gitlab-org/gitlab-ce/issues/38098
6. I better fixed up the lazy loaded image. You might need to run yarn to update the gitlab-svgs dependency and restart your GDK to get those assets flowing.

Previously, dismissing used a cookie. Here are some instructions on how to remove the persistent dismissal from the database, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/16735#example-usage: bundle exec rails c -> Callout.find_by(user: User.find_by(username: 'root'), feature_name: 'clusters').update(dismissed_state: false). Because of a BE bug, you need to be an explicit admin of the project (see https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/16735/diffs#note_56649940).

changed target branch from master to persistent-callouts