Merge branch 'master' into jhuleatt-rc-emulator

.github/workflows/nodejs.yml

@@ -29,7 +29,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v3
@@ -50,7 +50,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v3

README.md

@@ -82,7 +82,15 @@ See the section about [running tests](https://facebook.github.io/create-react-ap
 To run the test runner with emulators, use:
 
 ```bash
-firebase emulators:exec --project sample --only firestore 'npm test'
+firebase emulators:exec --project demo-test 'npm test'
+
+firebase emulators:exec --project demo-test --only firestore 'npm test AddCollectionDialog.test.tsx'
+```
+
+To disable the Jest interactive mode use the flag `watchAll=false` like so:
+
+```bash
+firebase emulators:exec --project demo-test --only firestore 'npm test -- --watchAll=false'
 ```
 
 If you get port conflict errors, make sure to stop other instances of the Firebase Emulator Suite (e.g. the one you've started for the development server above) and try again.

extensions/firestore-stripe-payments.env

@@ -0,0 +1,9 @@
+ALLOWED_EVENT_TYPES=com.stripe.v1.product.created
+CREATE_CHECKOUT_SESSION_MIN_INSTANCES=0
+CUSTOMERS_COLLECTION=customers
+DELETE_STRIPE_CUSTOMERS=Do not delete
+EVENTARC_CHANNEL=projects/${param:PROJECT_ID}/locations/us-west1/channels/firebase
+LOCATION=us-west2
+PRODUCTS_COLLECTION=products
+STRIPE_CONFIG_COLLECTION=configuration
+SYNC_USERS_ON_CREATE=Do not sync

extensions/firestore-stripe-payments.secret.local

@@ -0,0 +1,2 @@
+STRIPE_API_KEY=asdf
+STRIPE_WEBHOOK_SECRET=fdsa

extensions/storage-resize-images.env

@@ -0,0 +1,9 @@
+DELETE_ORIGINAL_FILE=false
+DO_BACKFILL=true
+FUNCTION_MEMORY=512
+IMAGE_TYPE=jpeg
+IMG_BUCKET=resize_images_storage_bucket_90210
+IMG_SIZES=200x200
+IS_ANIMATED=true
+LOCATION=us-west2
+MAKE_PUBLIC=true

firebase.json

@@ -35,5 +35,9 @@
   },
   "remoteconfig": {
     "template": "remoteconfig.template.json"
+  },
+  "extensions": {
+    "storage-resize-images": "firebase/[email protected]",
+    "firestore-stripe-payments": "stripe/[email protected]"
   }
 }

index.html

@@ -22,7 +22,7 @@
       function _gtag() {
         window.dataLayer = window.dataLayer || [];
         window.dataLayer.push(arguments);
-      };
+      }
       _gtag('js', new Date());
     </script>
     <meta name="msapplication-TileColor" content="#681da8" />

package.json

@@ -1,9 +1,9 @@
 {
   "name": "firebase-tools-ui",
-  "version": "1.11.1-rc-bash",
+  "version": "1.11.7-remote-config",
   "private": true,
   "engines": {
-    "node": "^14.18.0 || >=16.4.0"
+    "node": ">=16.4.0"
   },
   "dependencies": {
     "@rmwc/base": "^7.0.3",
@@ -53,7 +53,7 @@
     "lodash.groupby": "^4.6.0",
     "lodash.isequal": "^4.5.0",
     "node-fetch": "^3.0.0",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
     "react-dom": "^18.1.0",
     "react-dropzone": "^14.2.1",
     "react-focus-on": "3.6",
@@ -62,7 +62,6 @@
     "react-redux": "^8.0.1",
     "react-router-dom": "^5.3.0",
     "react-router-dom-v5-compat": "^6.3.0",
-    "react-scripts": "5.0.1",
     "reactfire": "^4.2.1",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",
@@ -136,6 +135,7 @@
     "mutationobserver-shim": "^0.3.3",
     "prettier": "^2.2.1",
     "prettier-plugin-import-sort": "0.0.7",
+    "react-scripts": "^5.0.1",
     "redux-mock-store": "^1.5.4",
     "run-script-os": "^1.1.6",
     "sass": "^1.52.1",

src/colors.tsx

@@ -15,8 +15,9 @@
  */
 export const background = '#F6F7F9';
 export const primary = '#681DA8'; // Google Purple 900.
-export const secondary = 'rgba(0, 0, 0, .54)';
-export const textBlackTertiary = 'rgba(0, 0, 0, .38)';
+// Note: This secondary is only suitable for white (or near-white) backgrounds
+// On a 0.93 background, grey100 = (245,245,245) we require 55% or above
+export const secondary = 'rgba(0, 0, 0, 0.55)';
 
 export const grey100 = '#F5F5F5';
 

src/components/App/AppBar.scss

@@ -53,5 +53,11 @@
     &:not(.mdc-tab--active) .mdc-tab__text-label {
       color: var(--mdc-theme-on-surface);
     }
+    .mdc-tab__ripple:hover::before {
+      opacity: 0.5;
+    }
+    .mdc-tab__ripple.mdc-ripple-upgraded--background-focused::before {
+      opacity: 0.5;
+    }
   }
 }

src/components/App/AppBar.tsx

@@ -48,12 +48,18 @@ export const AppBar: React.FC<React.PropsWithChildren<Props>> = ({
     </Tab>
   ));
 
-  const activeTabIndex = navRoutes.findIndex((r) =>
-    matchPath(location.pathname, {
-      path: r.path,
-      exact: r.exact,
-    })
-  );
+  const [activeTabIndex, setActiveTab] = React.useState(0);
+
+  React.useEffect(() => {
+    setActiveTab(
+      navRoutes.findIndex((r) =>
+        matchPath(location.pathname, {
+          path: r.path,
+          exact: r.exact,
+        })
+      )
+    );
+  }, [location.pathname, navRoutes]);
 
   return (
     <ThemeProvider
@@ -73,7 +79,11 @@ export const AppBar: React.FC<React.PropsWithChildren<Props>> = ({
             </Typography>
           </div>
         </div>
-        <TabBar theme="onSurface" activeTabIndex={activeTabIndex}>
+        <TabBar
+          theme="onSurface"
+          activeTabIndex={activeTabIndex}
+          onActivate={(evt) => setActiveTab(evt.detail.index)}
+        >
           {tabs}
         </TabBar>
       </TopAppBar>

src/components/App/index.scss

@@ -39,3 +39,7 @@ $page-gutter-size: 48px;
     min-height: $app-remaining-viewport-height-for-content;
   }
 }
+
+.rmwc-icon {
+  color: var(--mdc-theme-secondary);
+}

src/components/Auth/OneAccountPerEmailCard/OneAccountPerEmailCard.tsx

@@ -72,7 +72,11 @@ export const OneAccountPerEmailCard: React.FC<
         )}
 
         <div>
-          <Button outlined={true} onClick={() => setOpen(true)}>
+          <Button
+            aria-label="Enable or disable multiple accounts from one email address."
+            outlined={true}
+            onClick={() => setOpen(true)}
+          >
             Change
           </Button>
         </div>

src/components/Auth/UserFormDialog/controls/CustomAttributes.tsx

@@ -81,6 +81,7 @@ export const CustomAttributes: React.FC<
           target="_blank"
           rel="noopener noreferrer"
           href="https://firebase.google.com/docs/auth/admin/custom-claims"
+          title="Learn more about custom key value attributes."
         >
           Learn more
         </a>

src/components/Auth/UserFormDialog/controls/MultiFactorAuth.tsx

@@ -95,7 +95,7 @@ export const MultiFactor: React.FC<
     <div className={styles.signInWrapper}>
       <ListDivider tag="div" />
       <div className={styles.sectionHeader}>
-        <Typography use="body1" theme="textPrimaryOnBackground">
+        <Typography use="headline3" theme="textPrimaryOnBackground">
           Multi-factor Authentication
         </Typography>
       </div>

src/components/Auth/UserFormDialog/controls/Password.tsx

@@ -59,8 +59,7 @@ export const Password: React.FC<
   return (
     <>
       <Typography
-        use="body1"
-        tag="div"
+        use="headline4"
         className={styles.sectionSubHeader}
         theme="textPrimaryOnBackground"
       >

src/components/Auth/UserFormDialog/controls/PhoneControl.tsx

@@ -64,8 +64,7 @@ export const PhoneControl: React.FC<
   return (
     <>
       <Typography
-        use="body1"
-        tag="div"
+        use="headline4"
         className={styles.sectionSubHeader}
         theme="textPrimaryOnBackground"
       >

src/components/Auth/UserFormDialog/controls/SignInMethod.tsx

@@ -68,7 +68,7 @@ export const SignInMethod: React.FC<
     <div className={styles.signInWrapper}>
       <ListDivider tag="div" />
       <div className={styles.sectionHeader}>
-        <Typography use="body1" theme="textPrimaryOnBackground">
+        <Typography use="headline3" theme="textPrimaryOnBackground">
           Authentication method
         </Typography>
         {isTouched && isOnlyError ? (

src/components/Auth/UsersCard/table/UsersCleared.module.scss

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.visuallyHidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

src/components/Auth/UsersCard/table/UsersCleared.test.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { UsersCleared } from './UsersCleared';
+
+describe('UsersCleared', () => {
+  it('renders header row when all users have been cleared from the table', () => {
+    const { getByRole } = render(<UsersCleared alertText="" />);
+    expect(getByRole('alert')).not.toBeNull();
+  });
+});

src/components/Auth/UsersCard/table/UsersCleared.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { connect } from 'react-redux';
+
+import { createStructuredSelector } from '../../../../store';
+import { getAlertText } from '../../../../store/auth/selectors';
+import styles from './UsersCleared.module.scss';
+
+export type UsersClearedProps = PropsFromStore;
+
+/**
+ *
+ * Renders a visibly hidden, but screenreader parseable, alert to
+ * inform the user that all users have been deleted after the
+ * `Clear All Data` button is pressed. The text rendered /
+ * spoken in the component is housed in the auth redux store's
+ * `alertText` field. Changing the value stored in this field triggers
+ * a re-render of this component, which will force a screenreader to
+ * read the new text. Thus, the value stored in `alertText` should only
+ * be 1. updated when you want the screen reader to alert the user of something,
+ * or 2. cleared to allow the screenreader to repeat a message (the text in
+ * `alertText` is only read by the screenreader when the value is updated).
+ *
+ * Examples of such updates / clears are available in src/store/auth/reducer.tsx
+ *
+ */
+export const UsersCleared: React.FC<
+  React.PropsWithChildren<UsersClearedProps>
+> = ({ alertText }) => {
+  return (
+    <div className={styles.visuallyHidden} role="alert">
+      {alertText}
+    </div>
+  );
+};
+
+export const mapStateToProps = createStructuredSelector({
+  alertText: getAlertText,
+});
+
+export type PropsFromStore = ReturnType<typeof mapStateToProps>;
+
+export default connect(mapStateToProps)(UsersCleared);

src/components/Auth/UsersCard/table/UsersTable.test.tsx

@@ -113,7 +113,7 @@ describe('UserTable', () => {
         filteredUsers: [fakeUser1, fakeUser2],
       });
 
-      const menu = result.getAllByLabelText('Open menu')[0];
+      const menu = result.getAllByRole('menu')[0];
 
       await act(async () => {
         fireEvent.click(menu);