feat: Add public file storage waitlist alert

Signed-off-by: Andrew Burnes <[email protected]>

Author: apburnes

frontend/pages/sites/$siteId/siteRoutes.js

@@ -57,18 +57,13 @@ export default [
     icon: 'IconGear',
     showInSidebar: true,
   },
-
-  ...(process.env.FEATURE_FILE_STORAGE_SERVICE === 'true'
-    ? [
-        {
-          Component: FileStorage,
-          title: 'Public file storage',
-          path: 'storage',
-          icon: 'IconCloudUpload',
-          showInSidebar: true,
-        },
-      ]
-    : []),
+  {
+    Component: FileStorage,
+    title: 'Public file storage',
+    path: 'storage',
+    icon: 'IconCloudUpload',
+    showInSidebar: true,
+  },
   ...(process.env.FEATURE_FILE_STORAGE_SERVICE === 'true'
     ? [
         {

frontend/pages/sites/$siteId/siteRoutes.test.jsx

@@ -41,7 +41,7 @@ describe('siteRoutes', () => {
     it('should not include storage routes when FEATURE_FILE_STORAGE_SERVICE is false', () => {
       process.env.FEATURE_FILE_STORAGE_SERVICE = 'false';
       const routes = jest.requireActual('./siteRoutes').default;
-      expect(routes.some((route) => route.path === 'storage')).toBe(false);
+      expect(routes.some((route) => route.path === 'storage')).toBe(true);
       expect(routes.some((route) => route.path === 'storage/logs')).toBe(false);
     });
   });

frontend/pages/sites/$siteId/storage/Announcement.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import AlertBanner from '@shared/alertBanner';
+
+export default function Announcement() {
+  const message = (
+    <span>
+      We&apos;re excited to announce an upcoming new public file storage feature! 🎉 With
+      this new feature, you&apos;ll be able to upload and share files publicly from your
+      existing site and simply manage your public files in Pages.
+      <br />
+      <br />
+      Interested in trying out the new public file storage? Reach out to us at{' '}
+      <a
+        title="Email support to launch a custom domain."
+        href="mailto:[email protected]"
+      >
+        [email protected]
+      </a>{' '}
+      to get on the waitlist.
+    </span>
+  );
+
+  return <AlertBanner status="info" header="Coming Soon!" message={message} />;
+}

frontend/pages/sites/$siteId/storage/index.jsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import useFileStorage from '@hooks/useFileStorage';
 
 import AlertBanner from '@shared/alertBanner';
+import Announcement from './Announcement';
 import LocationBar from './LocationBar';
 import FileDetails from './FileDetails';
 import NewFileOrFolder from './NewFileOrFolder';
@@ -17,20 +18,9 @@ function FileStoragePage() {
   const { id } = useParams();
   const site = useSelector((state) => currentSite(state.sites, id));
   const fileStorageServiceId = site.fileStorageServiceId;
+
   if (!fileStorageServiceId) {
-    const errorMessage = (
-      <span>
-        This site does not have Public File Storage enabled. Please contact{' '}
-        <a
-          title="Email support to launch a custom domain."
-          href="mailto:[email protected]"
-        >
-          [email protected]
-        </a>{' '}
-        to request access.
-      </span>
-    );
-    return <AlertBanner status="info" header="" message={errorMessage} />;
+    return <Announcement />;
   }
 
   const [searchParams, setSearchParams] = useSearchParams();

frontend/pages/sites/$siteId/storage/logs/index.js

@@ -5,7 +5,7 @@ import useFileStorageLogs from '@hooks/useFileStorageLogs';
 import PropTypes from 'prop-types';
 import QueryPage from '@shared/layouts/QueryPage';
 import Pagination from '@shared/Pagination';
-import AlertBanner from '@shared/alertBanner';
+import Announcement from '../Announcement';
 
 import { dateAndTimeSimple, timeFrom } from '@util/datetime';
 import { currentSite } from '@selectors/site';
@@ -18,19 +18,7 @@ function FileStorageLogs() {
   const initalPage = parseInt(searchParams.get('page')) || 1;
 
   if (!fileStorageServiceId) {
-    const errorMessage = (
-      <span>
-        This site does not have Public File Storage enabled. Please contact{' '}
-        <a
-          title="Email support to launch a custom domain."
-          href="mailto:[email protected]"
-        >
-          [email protected]
-        </a>{' '}
-        to request access.
-      </span>
-    );
-    return <AlertBanner status="info" header="" message={errorMessage} />;
+    return <Announcement />;
   }
 
   const { data, isPending, error, currentPage, totalPages, totalItems } =

frontend/pages/sites/$siteId/storage/logs/index.test.jsx

@@ -91,7 +91,7 @@ describe('storage/logs/index', () => {
     setup();
 
     expect(
-      screen.getByText(/This site does not have Public File Storage enabled/i),
+      screen.getByText(/excited to announce an upcoming new public file storage/i),
     ).toBeInTheDocument();
     expect(useFileStorageLogs).not.toHaveBeenCalled();
   });

scripts/create-dev-data.js

@@ -364,7 +364,7 @@ async function createData() {
       defaultConfig: {
         hello: 'world',
       },
-    }),
+    }).then((site) => addSiteToOrg(site, agency1)),
 
     siteFactory({
       engine: 'node.js',