Create re-usable method to hide flash

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

The following discussion from !18898 (closed) should be addressed:

• @dennis started a discussion: (+1 comment)

  I see this is used in a couple of places:

  • https://gitlab.com/gitlab-org/gitlab/blob/master/ee%2Fapp%2Fassets%2Fjavascripts%2Fanalytics%2Fcycle_analytics%2Fstore%2Factions.js#L10-15
  • https://gitlab.com/gitlab-org/gitlab/blob/master/ee%2Fapp%2Fassets%2Fjavascripts%2Fvue_merge_request_widget%2Fcomponents%2Fapprovals%2Fapprovals.vue#L129-132

  Could we maybe pull this into something that is re-usable?

  For the sake of keeping this MR cleaner, perhaps we can update the other files in a later issue.

  What do you think?

Possible solutions per @blabuschagne

Something like:

const hideFlashBySelector = querySelector => {
  const flashElement = document.querySelector(querySelector);

  if (!flashElement) return;

  hideFlash(flashElement);
};

Else we could make use of .flash-content as the querySelector as this is setup during createFlashEl and we expect it to exist when there's a flash. If we decide to do this we could then simply make the following change to hideFlash;

const hideFlash = (flashEl, fadeTransition = true) => {
  const element = flashEl || document.querySelector('.flash-content');
  if (!element) return;

  //update refs from flashEl to element
  ...

I prefer the second approach as it's the behaviour I originally expected and there is less of a footprint. Additional I'd suggest doing this entire update in a follow-up issue as there are specs which will need to be updated and we should be able to knock it all out in a single MR.