@planningcenter/topbar 7.3.0-alpha.1 → 7.3.0-alpha.4

package/CHANGELOG.md

@@ -8,40 +8,60 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased notifications]
 
 ### Added
-- Notification bell, indicator, and dropdown that displayes the current user's read and unread notifications. On initial load, a GET request is sent to the notifications API and its response is used to populate the unread indicator. To use dummy data instead, you can pass `useDummyNotifications={true}` when calling any `Topbar` component.
-- Subscribe to push notifications via Jolt after initial load. This is a naive implementation in that whenever a push event is received, a fresh GET request is sent to the notifications API endpoint to retrieve the current state of ALL of the user's notifications.
-- Set a baseline prettier config
+
+- Notification bell, indicator, and dropdown that displays the current user's read and unread notifications.
+- Subscribe to push notifications via Jolt after initial load. Whenever a push event is received, a GET request is sent to the notifications API endpoint to retrieve the details of the new notification.
+- Set up prettier and eslint and allow them to have their way on the code
+- Control the admin notifications inbox with the flipper flag of `TOPBAR_notifications_enabled` in People. Disable for a specific app by setting `window.notificationsDisabled = true`.
+- Control the Login info section with the flipper flag of `TOPBAR_mfa_enabled` in People.
+- Show an indicator for whether MFA is configured for the current profile
+- Add `props.linkToProfile` to `SharedTopbarProps` (so it's available to small and not small)
+
+### Changed
+
+- No-op `AppsProvider`'s `fetch` and `remove` functions that are passed along with `apps` to the `render` function prop. Since we will always have fresh data now, there is no need to have these functions run.
+- The information required to render the topbar is now contained in a single API request from people (`/me/topbar`). This includes the list of apps to render in the app switcher and enabled features inside the topbar. This is a change specifically to the app switcher, so changes had to be made in terms of the expected shape of the response from the server in order to render the app switcher. The `AppsProvider` `mapApps` function has been updated accordingly.
+
+### Removed
+
+- `mapResourcesToCalendar` is removed as an export of `AppsProvider`. The apps array we receive from the API no longer returns Resources. Use `mapApps` instead (or, better still, don't pass anything to `formatter` and let us use the default).
 
 ## [7.2.1] - 2021-12-09
 
 ### Fixed
+
 - Bug z-stacking Safari bug that caused expanded `smalltopbar` items to show up behind elements [#46](https://github.com/ministrycentered/topbar/pull/46)
 - Bug causing user settings to be hidden on mobile when Home wasn't enabled for the user [#47](https://github.com/ministrycentered/topbar/pull/47)
 
 ## [7.2.0] - 2021-12-02
 
 ### Changed
+
 - New look and feel for the app switcher ([#40](https://github.com/ministrycentered/topbar/pull/40), [#42](https://github.com/ministrycentered/topbar/pull/42)).
   The switcher now displays Home at the top with some visual separation and Accounts (as "account") at the bottom—also with visual separation.
 
 ## [7.1.3] - 2021-11-16
 
 ### Fixed
+
 - Corrected the sorting of app names in mobile topbar as well [#36](https://github.com/ministrycentered/topbar/pull/36)
 
 ## [7.1.2] - 2021-11-11
 
 ### Fixed
+
 - Corrected the corrected sorting of app names in app switcher [#33](https://github.com/ministrycentered/topbar/pull/33)
 
 ## [7.1.1] - 2021-11-10
 
 ### Fixed
+
 - Corrected sorting of app names in app switcher [#32](https://github.com/ministrycentered/topbar/pull/32)
 
 ## [7.1.0] - 2021-11-08
 
 ### Added
+
 - Add Home to the app switcher dropdown
 
 ## [7.0.0] - 2021-10-01
@@ -92,9 +112,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Versions entries to this changelog weren't tracked very well and were presented in a less organized style (more like a README or upgrade guide). If you are interested in that, you can read about the changes in [README-pre-4.9.0].
 
-
-
-[Unreleased notifications]: https://github.com/ministrycentered/topbar/compare/@planningcenter/topbar@7.2.1..notifications
+[unreleased notifications]: https://github.com/ministrycentered/topbar/compare/@planningcenter/topbar@7.2.1..notifications
 [7.2.1]: https://github.com/ministrycentered/topbar/compare/v7.2.0..v7.2.1
 [7.2.0]: https://github.com/ministrycentered/topbar/compare/v7.1.3..v7.2.0
 [7.1.3]: https://github.com/ministrycentered/topbar/compare/v7.1.2..v7.1.3
@@ -102,4 +120,4 @@ Versions entries to this changelog weren't tracked very well and were presented
 [7.1.1]: https://github.com/ministrycentered/topbar/compare/v7.1.0..v7.1.1
 [7.1.0]: https://github.com/ministrycentered/topbar/compare/v7.0.0..v7.1.0
 [7.0.0]: https://github.com/ministrycentered/topbar/compare/@planningcenter/topbar@6.0.6..v7.0.0
-[Previous entries]: CHANGELOG-pre-4.9.0.md
+[previous entries]: CHANGELOG-pre-4.9.0.md

package/README.md

@@ -2,22 +2,70 @@
 
 The shared Planning Center product Topbar
 
-## Install
+In general, it is responsible for a number of things that are shared across our apps.
 
-Every planning center product manages its own composition of Topbar components.
-They all have slightly different features.
-When starting a new project (rare), check out these existing Topbar compositions:
+- App switcher (via [`AppsProvider`](./modules/apps_provider.tsx))
+- Profile switcher (via [`ConnectedPeopleProvider`](./modules/connected_people_provider.tsx))
+- Admin notifications inbox dropdown (via [`NotificationsMenu`](./modules/components/notifications_menu.tsx))
+- Platform and/or product announcements (via [`PlatformAnnouncements`](./modules/platform_announcements.jsx) and [`ProductAnnouncements`](./moduels/product_announcements))
 
-- [API](https://github.com/ministrycentered/api/blob/master/app/javascript/components/api_topbar.jsx)
-- [Accounts](https://github.com/ministrycentered/accounts/blob/master/app/javascript/components/accounts_topbar.jsx)
-- [Check-Ins](https://github.com/ministrycentered/check-ins/blob/master/app/javascript/components/checkins_topbar.js)
-- [Giving](https://github.com/ministrycentered/giving/blob/master/app/javascript/application/components/giving_topbar.jsx)
-- [Groups](https://github.com/ministrycentered/groups/blob/master/app/javascript/application/components/groups_topbar.js)
-- [People](https://github.com/ministrycentered/people/blob/master/app/javascript/components/people_topbar.jsx)
-- [Publishing](https://github.com/ministrycentered/publishing/blob/master/app/javascript/src/PublishingTopbar.jsx)
-- [Resources](https://github.com/ministrycentered/resources/blob/master/app/javascript/components/ResourcesTopbar.jsx)
-- [Registrations](https://github.com/ministrycentered/registrations/blob/master/app/javascript/components/registrations_topbar.jsx)
-- [Services](https://github.com/ministrycentered/services/blob/master/app/javascript/components/ServicesTopbar.js)
+## Usage
+
+To a limited extent, each product can customize the display of these items as they see fit.
+For the majority of the products, implementation is very similar.
+You can view [product-specific examples](#example-product-implementations) below.
+
+### Disabling the notifications inbox
+
+The global determination of whether the notifications inbox is enabled or disabled is controlled via a [People flipper flag](https://people.planningcenteronline.com/flipper/features/TOPBAR_notifications_enabled).
+However, if your app needs to disable the notifications inbox for whatever reason, set `window.notificationsDisabled = true` when your app renders and we'll honor that setting.
+Because settings and flags are cached for one load cycle, it will take a fresh reload from the user to have the disable override to take effect.
+
+### Shared Jolt connections
+
+New in v7.3 is the admin notifications inbox feature.
+Visually, this is a bell in the topbar that, when clicked, will display a dropdown containing notifications from every app in their account.
+Because a notification can be sent to a user as they are working on a page, topbar subscribes to a special notifications channel for the current user that provides push updates to the dropdown.
+
+For a handful of reasons (not least of which is because we pay per Jolt connection), if the current page of an app is already using a Jolt connection, topbar would like to piggy-back on that connection for its own subscription.
+**Note that this connection sharing is entirely optional for the parent app, but strongly encouraged.**
+If a Jolt connection is not shared with topbar, it will gladly initiate its own connection specifically for its purposes.
+
+To reuse your app's Jolt connection, topbar requires a Promise that resolves into a [Jolt client](https://github.com/ministrycentered/jolt-client/) connection.
+If nothing is passed—or if a Promise is passed that resolves to `undefined` or `void`—topbar will initiate its own connection.
+
+#### Example
+
+As an example, we'll use what Services has done for the v7.3 alpha.
+As a layout partial, they attach two Jolt-related things to `window`:
+
+1. `joltListener` (an instance of their own wrapper around the `jolt-client` library)
+1. `joltListenerPromise` (a `jolt-client` instance that has gone through (or will go through asynchronously) the connection and authorization process)
+
+```html
+<script>
+  window.joltListener = new window.JoltListener()
+  window.joltListenerPromise = window.joltListener.connect()
+</script>
+```
+
+In their Topbar implementation component, they then create the function that provides topbar the required Promise...
+
+```jsx
+const waitForWindowJolt = async () => {
+  const listener = Promise.resolve(window.joltListenerPromise)
+  return listener.then((listener) => {
+    if (listener && listener.jolt) {
+      return listener.jolt
+    }
+  })
+}
+```
+
+...and passes that function in for the `JoltPromise` prop to topbar.
+Topbar can then use this Promise to determine whether or not it needs to create its own connection or piggyback on one provided.
+
+The implementation details for your app can be decided by you and dependent on your apps current usage of Jolt.
 
 ## Upgrade
 
@@ -57,3 +105,16 @@ So, this CHANGELOG is a little lazy.
 If you like history, here are the initial release notes with technical considerations and trade-offs.
 
 [STORY](./docs/STORY.md)
+
+## Example product implementations
+
+- [API](https://github.com/ministrycentered/api/blob/master/app/javascript/components/api_topbar.jsx)
+- [Accounts](https://github.com/ministrycentered/accounts/blob/master/app/javascript/components/accounts_topbar.jsx)
+- [Calendar](https://github.com/ministrycentered/resources/blob/master/app/javascript/components/CalendarTopbar.jsx)
+- [Check-Ins](https://github.com/ministrycentered/check-ins/blob/master/app/javascript/components/checkins_topbar.js)
+- [Giving](https://github.com/ministrycentered/giving/blob/master/app/javascript/application/components/giving_topbar.jsx)
+- [Groups](https://github.com/ministrycentered/groups/blob/master/app/javascript/application/components/groups_topbar.js)
+- [People](https://github.com/ministrycentered/people/blob/master/app/javascript/components/people_topbar.jsx)
+- [Publishing](https://github.com/ministrycentered/publishing/blob/master/app/javascript/src/PublishingTopbar.js)
+- [Registrations](https://github.com/ministrycentered/registrations/blob/master/app/javascript/components/registrations_topbar.jsx)
+- [Services](https://github.com/ministrycentered/services/blob/master/app/javascript/components/ServicesTopbar.js)

package/dist/topbar.css

@@ -1,2 +1,2 @@
-@-webkit-keyframes spinning{to{transform:rotate(1turn)}}@keyframes spinning{to{transform:rotate(1turn)}}.spinner{align-self:center;-webkit-animation:spinning .5s linear infinite;animation:spinning .5s linear infinite;border:2px solid #f7f7f7;border-radius:50%;border-top-color:#9e9e9e;display:inline;height:16px;transform:rotate(0deg);vertical-align:middle;width:16px}
+.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}@-webkit-keyframes spinning{to{transform:rotate(1turn)}}@keyframes spinning{to{transform:rotate(1turn)}}.spinner{align-self:center;-webkit-animation:spinning .5s linear infinite;animation:spinning .5s linear infinite;border:2px solid #f7f7f7;border-radius:50%;border-top-color:#9e9e9e;display:inline;height:16px;transform:rotate(0deg);vertical-align:middle;width:16px}
 /*# sourceMappingURL=topbar.css.map */

package/dist/topbar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["spinner.css"],"names":[],"mappings":"AAAA,4BACE,GAEE,uBACF,CACF,CACA,oBACE,GAEE,uBACF,CACF,CAEA,SACE,iBAAkB,CAClB,8CAAyC,CAAzC,sCAAyC,CAKzC,wBAAiB,CAHjB,iBAAkB,CAGlB,wBAAiB,CACjB,cAAe,CACf,WAAY,CACZ,sBAAuB,CACvB,qBAAsB,CACtB,UACF","file":"topbar.css","sourcesContent":["@-webkit-keyframes spinning {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@keyframes spinning {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n.spinner {\n  align-self: center;\n  animation: spinning 500ms infinite linear;\n  border-color: hsl(0 0% 97%);\n  border-radius: 50%;\n  border-style: solid;\n  border-top-color: hsl(0 0% 62%);\n  border-width: 2px;\n  display: inline;\n  height: 16px;\n  transform: rotate(0deg);\n  vertical-align: middle;\n  width: 16px;\n}\n"]}
+{"version":3,"sources":["utils.css","spinner.css"],"names":[],"mappings":"AAAA,gBACE,uBAAwB,CACxB,oBACF,CACA,mCACE,YACF,CCNA,4BACE,GAEE,uBACF,CACF,CACA,oBACE,GAEE,uBACF,CACF,CAEA,SACE,iBAAkB,CAClB,8CAAyC,CAAzC,sCAAyC,CAKzC,wBAAiB,CAHjB,iBAAkB,CAGlB,wBAAiB,CACjB,cAAe,CACf,WAAY,CACZ,sBAAuB,CACvB,qBAAsB,CACtB,UACF","file":"topbar.css","sourcesContent":[".hide-scrollbar {\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n.hide-scrollbar::-webkit-scrollbar {\n  display: none; /* Chrome, Safari, and Opera */\n}\n","@-webkit-keyframes spinning {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n@keyframes spinning {\n  100% {\n    -webkit-transform: rotate(360deg);\n    transform: rotate(360deg);\n  }\n}\n\n.spinner {\n  align-self: center;\n  animation: spinning 500ms infinite linear;\n  border-color: hsl(0 0% 97%);\n  border-radius: 50%;\n  border-style: solid;\n  border-top-color: hsl(0 0% 62%);\n  border-width: 2px;\n  display: inline;\n  height: 16px;\n  transform: rotate(0deg);\n  vertical-align: middle;\n  width: 16px;\n}\n"]}