refactor: use banner instead of modal for backup rp notice (#998)

src/app/packages.ts

@@ -20,6 +20,7 @@ import * as metrics from "@app/metric-tunnel";
 import * as mfa from "@app/mfa";
 import * as modal from "@app/modal";
 import * as nav from "@app/nav";
+import * as notice from "@app/notice";
 import * as orgs from "@app/organizations";
 import * as redirectPath from "@app/redirect-path";
 import * as resetStore from "@app/reset-store";
@@ -56,6 +57,7 @@ const corePackages: any[] = [
   source,
   loaders,
   modal,
+  notice,
 ];
 
 export const rootEntities = corePackages.reduce((acc, pkg) => {

src/bootup/index.ts

@@ -20,22 +20,15 @@ import {
   fetchStacks,
 } from "@app/deploy";
 import { fetchDeployments } from "@app/deployment";
-import { call, parallel, put, select, takeEvery } from "@app/fx";
+import { call, parallel, select, takeEvery } from "@app/fx";
 import { createAction } from "@app/fx";
-import { openModal } from "@app/modal";
 import { selectOrganizationSelected } from "@app/organizations";
 import { fetchCurrentUserRoles, fetchRoles } from "@app/roles";
 import { schema } from "@app/schema";
 import { fetchSources } from "@app/source";
 import { fetchSystemStatus } from "@app/system-status";
 import { selectAccessToken } from "@app/token";
-import { ModalType } from "@app/types";
-import {
-  fetchUser,
-  fetchUsers,
-  selectCurrentUser,
-  selectCurrentUserId,
-} from "@app/users";
+import { fetchUser, fetchUsers, selectCurrentUserId } from "@app/users";
 
 export const FETCH_REQUIRED_DATA = "fetch-required-data";
 
@@ -72,7 +65,6 @@ function* onFetchRequiredData() {
   yield* fetchUser.run({ userId });
   const org = yield* select(selectOrganizationSelected);
   yield* fetchBillingDetail.run({ id: org.billingDetailId });
-  yield* onCheckForNotices();
 
   yield* schema.update(schema.loaders.success({ id: FETCH_REQUIRED_DATA }));
 }
@@ -104,18 +96,6 @@ function* onFetchResourceData() {
   yield* group;
 }
 
-function* onCheckForNotices() {
-  const user = yield* select(selectCurrentUser);
-  const createdAt = new Date(user.createdAt);
-  const notices = yield* select(schema.notices.select);
-  if (
-    notices["backup-rp-notice"] === "" &&
-    createdAt < new Date(2024, 10 - 1, 17)
-  ) {
-    yield* put(openModal({ type: ModalType.BackupRPNotice, props: {} }));
-  }
-}
-
 function* onRefreshData() {
   yield* onFetchRequiredData();
   yield* onFetchResourceData();

src/modal/index.ts

@@ -1,19 +1,6 @@
 import { thunks } from "@app/api";
 import { schema } from "@app/schema";
-import type { ModalState, ModalType } from "@app/types";
-
-export const readNotice = thunks.create<ModalType>(
-  "read-notice",
-  function* (ctx, next) {
-    yield* schema.update(
-      schema.notices.update({
-        key: ctx.payload,
-        value: new Date().toISOString(),
-      }),
-    );
-    yield* next();
-  },
-);
+import type { ModalState } from "@app/types";
 
 export const openModal = thunks.create<ModalState>(
   "open-modal",

src/notice/index.ts

@@ -0,0 +1,16 @@
+import { thunks } from "@app/api";
+import { schema } from "@app/schema";
+import type { NoticeType } from "@app/types";
+
+export const readNotice = thunks.create<NoticeType>(
+  "read-notice",
+  function* (ctx, next) {
+    yield* schema.update(
+      schema.notices.update({
+        key: ctx.payload,
+        value: new Date().toISOString(),
+      }),
+    );
+    yield* next();
+  },
+);

src/schema/schema.ts

@@ -6,6 +6,7 @@ import {
   type ModalState,
   ModalType,
   type Nav,
+  NoticeType,
   type ResourceStats,
   type Role,
   type U2fDevice,
@@ -88,9 +89,9 @@ export const [schema, initialState] = createSchema({
   manualScaleRecommendations: slice.table({
     empty: factory.defaultManualScaleRecommendation(),
   }),
-  notices: slice.obj<Record<ModalType, string>>({
-    [ModalType.BackupRPNotice]: "",
-    [ModalType.NONE]: "",
+  notices: slice.obj<Record<NoticeType, string>>({
+    [NoticeType.BackupRPNotice]: "",
+    [NoticeType.NONE]: "",
   }),
 });
 export type WebState = typeof initialState;

src/types/index.ts

@@ -6,3 +6,4 @@ export * from "./deploy";
 export * from "./modal";
 export * from "./api";
 export * from "./auth";
+export * from "./ux";

src/types/modal.ts

@@ -1,6 +1,5 @@
 export enum ModalType {
   NONE = "",
-  BackupRPNotice = "backup-rp-notice",
 }
 
 export interface ModalState {

src/types/ux.ts

@@ -0,0 +1,4 @@
+export enum NoticeType {
+  NONE = "",
+  BackupRPNotice = "backup-rp-notice",
+}

src/ui/layouts/app-sidebar-layout.tsx

@@ -1,7 +1,14 @@
 import { selectNav } from "@app/nav";
 import { useSelector } from "@app/react";
+import { schema } from "@app/schema";
+import { selectCurrentUser } from "@app/users";
 import { Outlet } from "react-router";
-import { ApplicationSidebar, Footer, Group } from "../shared";
+import {
+  ApplicationSidebar,
+  Footer,
+  Group,
+  NoticeBackupRpBanner,
+} from "../shared";
 
 interface Props {
   children?: React.ReactNode;
@@ -18,6 +25,12 @@ export function AppSidebarLayout({
 }: Props) {
   const { collapsed } = useSelector(selectNav);
   const collapsedOffset = collapsed ? 15.2 : 64;
+  const user = useSelector(selectCurrentUser);
+  const createdAt = new Date(user.createdAt);
+  const notices = useSelector(schema.notices.select);
+  const showNotice =
+    notices["backup-rp-notice"] === "" &&
+    createdAt < new Date(2024, 10 - 1, 17);
 
   return (
     <div className={`flex h-full ${className}`}>
@@ -33,6 +46,7 @@ export function AppSidebarLayout({
       >
         <main className={`h-full flex flex-col ${padding ? "py-4 px-7" : ""}`}>
           <Group>
+            {showNotice ? <NoticeBackupRpBanner /> : null}
             {header ? header : null}
             {children ? children : <Outlet />}
           </Group>

src/ui/shared/index.ts

@@ -76,3 +76,4 @@ export * from "./us-states";
 export * from "./countries";
 export * from "./scale-recs";
 export * from "./last-scale";
+export * from "./notice";

src/ui/shared/modal-portal.tsx

@@ -1,61 +1,11 @@
 import { createLog } from "@app/debug";
-import { closeModal, readNotice } from "@app/modal";
-import { useDispatch, useSelector } from "@app/react";
+import { useSelector } from "@app/react";
 import { schema } from "@app/schema";
 import { ModalType } from "@app/types";
-import { Button } from "./button";
-import { ExternalLink } from "./external-link";
-import { Group } from "./group";
-import { Modal, ModalBody, ModalFooter, ModalHeading } from "./modal";
 
 const log = createLog("modal-portal");
 
-const BackupRPNotice = () => {
-  const dispatch = useDispatch();
-  const gotit = () => {
-    dispatch(readNotice(ModalType.BackupRPNotice));
-    dispatch(closeModal());
-  };
-
-  return (
-    <ModalWrapper>
-      <Modal isOpen>
-        <ModalHeading title="New Default Backup Retention Policy" />
-        <ModalBody>
-          <Group>
-            <p>
-              As of <span className="font-bold">07/25/2024</span>, we've changed
-              the default backup retention policy for newly created environments
-              to:
-            </p>
-            <ul className="list-disc list-inside">
-              <li>30 daily</li>
-              <li>12 monthly</li>
-              <li>6 yearly</li>
-              <li>cross-region copy: disabled</li>
-              <li>keep final backup: enabled</li>
-            </ul>
-            <p>
-              For more information,{" "}
-              <ExternalLink href="https://www.aptible.com/changelog/new-default-backup-retention-policy">
-                read the changelog.
-              </ExternalLink>
-            </p>
-          </Group>
-        </ModalBody>
-        <ModalFooter
-          actions={[
-            <Button key="gotit" variant="primary" onClick={gotit}>
-              Got it!
-            </Button>,
-          ]}
-        />
-      </Modal>
-    </ModalWrapper>
-  );
-};
-
-const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
+export const ModalWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center bg-opacity-50 bg-black z-10">
       <div>{children}</div>
@@ -69,9 +19,8 @@ export const ModalPortal = () => {
   log(modal);
 
   switch (modal.type) {
-    case ModalType.BackupRPNotice: {
-      return <BackupRPNotice />;
-    }
+    case ModalType.NONE:
+      return null;
     default:
       return null;
   }

src/ui/shared/notice.tsx

@@ -0,0 +1,52 @@
+import { readNotice } from "@app/notice";
+import { NoticeType } from "@app/types";
+import { useDispatch } from "starfx/react";
+import { Box } from "./box";
+import { Button } from "./button";
+import { ExternalLink } from "./external-link";
+import { Group } from "./group";
+import { IconInfo } from "./icons";
+import { tokens } from "./tokens";
+
+export function NoticeBackupRpBanner() {
+  const dispatch = useDispatch();
+  const gotit = () => {
+    dispatch(readNotice(NoticeType.BackupRPNotice));
+  };
+
+  return (
+    <Box bg="gray-50">
+      <Group>
+        <h4 className={`${tokens.type.h4} flex gap-2 items-center`}>
+          <IconInfo variant="sm" />
+          New Backup Retention Policy
+        </h4>
+        <p>
+          As of <span className="font-bold">07/25/2024</span>, we've changed the
+          default backup retention policy for newly created environments to:
+        </p>
+        <ul className="list-disc list-inside">
+          <li>
+            <strong>30</strong> daily backups, <strong>12</strong> monthly
+            backups, <strong>6</strong> yearly backups
+          </li>
+          <li>
+            Cross-region copies: <strong>Disabled</strong>, Keep final backups:{" "}
+            <strong>Enabled</strong>
+          </li>
+        </ul>
+        <p>
+          For more information,{" "}
+          <ExternalLink href="https://www.aptible.com/changelog/new-default-backup-retention-policy">
+            read the changelog.
+          </ExternalLink>
+        </p>
+        <div>
+          <Button key="gotit" variant="primary" onClick={gotit}>
+            Got it!
+          </Button>
+        </div>
+      </Group>
+    </Box>
+  );
+}