Notification Message

The main repeating component in any listing context is the NotificationMessage component with can seem to adapt to a couple of display contexts. This may be a function of responsiveness or a display prop that is passed when notifications are rendered. This seems to be a purely presentational component that renders the data of a notification and may collect or house actions like opening a side bar or redirecting to a view in the admin ui or to docs. Whether or not we use the read / unread functionality, building in a prop for this purpose seems reasonable.

API (WIP)

<NotificationMessage
  key={string}
  title={string}
  description={string}
  docsLink={ReactNode}
  priority={Enum}
  read={boolean}
/>

NotificationsWidget

The NotificationsWidget component will house a list of notifications (which will most likely be made of sub components) and some visual indications of the state of the unread notifications. In this way the widget's primary function will be the controller for unread/read state for notifications.

API (draft)

This component is going to be a connected a container component that will be self-contained in the application. Before that happens I guess this issue should define a presentational component that can be "connected" to a data store.

<NotificationsWidget 
  notifications={Array<Notification>}
  notificationsRead={Array<NotificationsIds>}
  markNotificationRead={Function}
  markAllNotificationsRead={Function}
  notificationCenterLink={ReactNode}
/>

NotificationsAnchor

repo: cockroachdb/admin-ui-components

API (rough draft)

<NotificationsAnchor
   unread={ Number }
   onActivate={ Function }
   onDeactivate={ Function}
   activateEvent={ "hover" | "click" | "focus" }
/>

The NotificationsAnchor component will be used as an anchor to the popover notifications widget while providing an indication of the number of unread messages as well as a visual indication of the widget being "open" or "closed".

Give the simplicity of this component and it's partnership with other component state, I think this component should be purely presentational and contain no state of its own. The API above is a rough guess at what the component might need to know. The activateEvent represents not having a final decision as to what events this component might respond to. For instance, will the widget open and close on hover and by clicking, the user will be taken to the Notification Center? Or will the widget be opened and closed by clicking, and the user will get to the Notification Center by interacting with individual Notifications? Time will tell.

On thing is clear, and that is that this component will display a number of unread notifications. For this prop, I have imagined it as a Number where if the number is greater than zero then a numeric pimple will be rendered. If the number is less than one, or null, or undefined, or NaN then a numeric indicator will not be rendered. The may also be an upper limit to the how large this numeric indicator could be, in which case the limit would probably be shown (something like "99+" if there were 127 notifications if the upper limit was 99)

• Statements page has to be rendered inside on CC
• internal statements page routes have to work

When statements page is loaded in CC, it causes an error on load that redux store isn't initialized before component accesses it.

It is regression issue introduced in fc5ee71 when d3 package was replaced by d3-scale package.
d3-scale package contains following breaking change described here d3/d3-scale#117
Now, for closed domain range like [0. 0] the scaling result for 0 will be 50 instead of 0 (as was before).
This makes bar charts render half filled bars for zero values.

Can be reproduced on statements or transactions tables, retry column with no retries

Upgrade node-fetch to version 2.6.1 or later.
GHSA-w7rc-rwvf-8q5r

Upgrade yargs-parser to version 13.1.2 or later.
GHSA-p9pc-299p-vxgp

Issue to track the creation and composition of components for Notifications front-end

• NotificationsAnchor (#12)
• Popover (cockroachdb/ui/#103)
• NotificationsWidget (#13)
• Notification (#14) (PR)