@planningcenter/topbar 7.2.2-people.0 → 7.3.0-alpha.3

package/CHANGELOG.md

@@ -1,37 +1,65 @@
 # Changelog
 
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased notifications]
+
+### Added
+
+- 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`.
+
+### 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
+### 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
 
+- Add Home to the app switcher dropdown
 
 ## [7.0.0] - 2021-10-01
 
@@ -81,8 +109,7 @@
 
 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
 [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
@@ -90,4 +117,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/modules/components/NotificationsMenuBlankState.d.ts

@@ -1,7 +1,12 @@
-/// <reference types="react" />
-declare const NotificationsMenuBlankState: ({ description, style, title, ...props }: {
-    description: string;
-    style?: object;
-    title?: string;
-}) => JSX.Element;
-export default NotificationsMenuBlankState;
+/// <reference types="react" />
+declare const NotificationsMenuBlankState: ({
+  description,
+  style,
+  title,
+  ...props
+}: {
+  description: string
+  style?: object
+  title?: string
+}) => JSX.Element
+export default NotificationsMenuBlankState

package/dist/modules/components/apps_menu.d.ts

@@ -1,13 +1,9 @@
 /// <reference types="react" />
 import * as PCO_URL from "@planningcenter/url";
+import { App } from "../interfaces";
 declare const AppsMenu: ({ appName, apps, env, toggle, visible, }: {
     appName: string;
-    apps: {
-        attributes: {
-            name: string;
-            url: string;
-        };
-    }[];
+    apps: App[];
     env: PCO_URL.Environment;
     toggle: any;
     visible: boolean;

package/dist/modules/components/conditional_wrap.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare const ConditionalWrap: ({ children, condition, wrap, ...props }: {
+declare const ConditionalWrap: ({ children, condition, wrap, }: {
     children: React.ReactNode;
     condition?: boolean;
     wrap: any;

package/dist/modules/components/notification_item.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { Notification } from "../interfaces";
-declare const NotificationItem: ({ mobile, isLast, onToggleRead, showBottomBorder, notification: { appName, createdAt, isRead, link, title }, }: {
+declare const NotificationItem: ({ mobile, isLast, onMarkAsRead, onToggleRead, showBottomBorder, notification, }: {
     mobile?: boolean;
     isLast?: boolean;
+    onMarkAsRead?: (notification: Notification) => any;
     onToggleRead: any;
     showBottomBorder?: boolean;
     notification: Notification;

package/dist/modules/components/notifications_inbox.d.ts

@@ -1,14 +1,18 @@
-/// <reference types="react" />
-import * as PCO_URL from "@planningcenter/url";
-import { Notification } from "../interfaces";
-declare const NotificationsInbox: ({ env, render, userId, }: {
-    env: PCO_URL.Environment;
-    render: (props: {
-        handleMarkAllAsRead: () => any;
-        handleToggleRead: (notification: Notification) => any;
-        read: Notification[];
-        unread: Notification[];
-    }) => JSX.Element;
-    userId: string;
-}) => JSX.Element;
-export default NotificationsInbox;
+/// <reference types="react" />
+import * as PCO_URL from "@planningcenter/url"
+import { Notification } from "../interfaces"
+declare const NotificationsInbox: ({
+  env,
+  render,
+  userId,
+}: {
+  env: PCO_URL.Environment
+  render: (props: {
+    handleMarkAllAsRead: () => any
+    handleToggleRead: (notification: Notification) => any
+    read: Notification[]
+    unread: Notification[]
+  }) => JSX.Element
+  userId: string
+}) => JSX.Element
+export default NotificationsInbox

package/dist/modules/components/notifications_menu.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import * as PCO_URL from "@planningcenter/url";
 import { Notification } from "../interfaces";
-declare const NotificationsMenu: ({ env, handleMarkAllAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
-    env: PCO_URL.Environment;
+declare const NotificationsMenu: ({ handleMarkAllAsRead, handleMarkAsRead, handleToggleRead, hasError, isLoading, mobile, notifications: { read, unread }, toggle, visible, }: {
     handleMarkAllAsRead: () => any;
+    handleMarkAsRead: (notification: Notification) => any;
     handleToggleRead: (notification: Notification) => any;
     hasError?: boolean;
     isLoading?: boolean;

package/dist/modules/components/notifications_menu_blank_state.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const NotificationsMenuBlankState: ({ dark, description, style, title, ...props }: {
+declare const NotificationsMenuBlankState: ({ dark, description, style, title, }: {
     dark?: boolean;
     description: string;
     style?: object;

package/dist/modules/components/outsider.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 export default class Outsider extends React.Component<{
-    component: any;
     cleanup: boolean;
+    component: any;
     onOutsideClick: any;
     visible: boolean;
 }, {}> {

package/dist/modules/dummy_data.d.ts

@@ -1,3 +1,3 @@
-import { Notification } from "./interfaces";
-export declare const DUMMY_DATA_UNREAD: Notification[];
-export declare const DUMMY_DATA_READ: Notification[];
+import { Notification } from "./interfaces"
+export declare const DUMMY_DATA_UNREAD: Notification[]
+export declare const DUMMY_DATA_READ: Notification[]

package/dist/modules/formatters.d.ts

@@ -1,15 +1,3 @@
-export interface App {
-    attributes: {
-        name: string;
-        url: string;
-    };
-}
-export interface ConnectedPerson {
-    id: number;
-    attributes: {
-        name: string;
-        organization_name: string;
-    };
-}
+import { App, ConnectedPerson } from "./interfaces";
 export declare const appsMenuFormatter: (apps: App[]) => App[];
 export declare const connectedPeopleMenuFormatter: (connectedPeople: ConnectedPerson[]) => ConnectedPerson[];

package/dist/modules/hooks/use_local_storage.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare function useLocalStorage(
+  key: string,
+  initialValue: any
+): {
+  storedValue: any
+  setStoredValue: import("react").Dispatch<any>
+  dropKey: () => void
+}
+export default useLocalStorage

package/dist/modules/hooks/use_notifications.d.ts

@@ -1,10 +1,12 @@
 import * as PCO_URL from "@planningcenter/url";
 import { Notification } from "../interfaces";
-declare const useNotifications: ({ env, userId, }: {
+declare const useNotifications: ({ disabled, env, userId, }: {
+    disabled?: boolean;
     env: PCO_URL.Environment;
     userId: string;
 }) => {
     handleMarkAllAsRead: () => any;
+    handleMarkAsRead: (notification: Notification) => any;
     handleToggleRead: (notification: Notification) => any;
     hasError: boolean;
     isLoading: boolean;

package/dist/modules/hooks/use_topbar_api.d.ts

@@ -0,0 +1,8 @@
+import * as PCO_URL from "@planningcenter/url";
+import { Fetch } from "../api_request";
+import { TopbarAPIResponse } from "../interfaces";
+declare const useTopbarAPI: ({ configuredFetch, env, }: {
+    configuredFetch: Fetch;
+    env: PCO_URL.Environment;
+}) => TopbarAPIResponse;
+export default useTopbarAPI;

package/dist/modules/topbar_context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const _default: import("react").Context<{
+    notificationsDisabled: boolean;
+}>;
+export default _default;

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"]}