fix(compass-web): make banners dismissible COMPASS-8976

[djechlin-mongodb]

Description

Checklist

• New tests and/or benchmarks are included
• Documentation is changed or added
• I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)

Motivation and Context

• Bugfix
• New feature
• Dependency update
• Misc

Open Questions

Dependents

Types of changes

• Backport Needed
• Patch (non-breaking change which fixes an issue)
• Minor (non-breaking change which adds functionality)
• Major (fix or feature that would cause existing functionality to change)

[gribnoysup]

I don't know if you tried this locally yet, but this is currently not really working until you somehow trigger a component re-render (like navigating back and forth) because this is not wired to the component state, so when the onClick happens, nothing is triggering the component re-render and the banner stays on the screen. What you'd want is a corresponding UI state here that would be in sync with localStorage. Wrapped in a custom hook just to easier demostrate the encapsulated example:

function useDismissedState(key: string) {
  const [dismissed, setDismissed] = useState<'true' | null>(() => localStorage.getItem(key))
  const onDismissed = useCallback(() => {
    localStorage.setItem(key, 'true')
    setDismissed('true')
  }, [])
  return [dismissed === 'true', onDismissed]
}

[djechlin-mongodb]

Thans for catching this. I would have noticed this design mistake... eventually haha.

I'm also asking #leafygreen-ui if I can upstream this to their Banner. Your point actually stands though, I was about to send them bad sample code repeating this mistake. I think it's a good feature, I think I have time to get it in leafygreen and get it in our code, and it's somewhat lower effort if I don't have to replicate tests and stuff in two places. I could centralize to our own component which is fine, just a lot of overhead for a glorified wrapper.

[gribnoysup]

I have a feeling they'd be reluctant to accept something like this, but it's worth asking! Also I kinda forgot about this, but we do have usePersistedState hook in compass-components (used exactly once 😆) that basically does what I wrote above already, so you can probably use it too here

[djechlin-mongodb]

ok, done with usePersistedState