Merge branch 'develop' into feat/react-update

.github/workflows/firebase-live.yml

@@ -16,6 +16,6 @@ jobs:
         run: yarn &&  MODE=demo yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
-          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
           channelId: live

.github/workflows/firebase-preview.yml

@@ -1,20 +1,35 @@
-name: 'Firebase Preview'
+name: Preview and Lighthouse
 
 on:
   pull_request:
-    branches: [ 'develop', 'feat/*', 'feature/*', 'release' ]
+    branches: ['develop', 'feat/*', 'feature/*', 'release']
 
 jobs:
   build_and_preview:
+    name: Build and preview
     runs-on: ubuntu-latest
+    outputs:
+      output1: ${{ steps.firebase_hosting_preview.outputs.details_url }}
     steps:
       - uses: actions/checkout@v2
-      - name: Build
+      - name: Build Preview Link
         env:
           APP_PLAYER_LICENSE_KEY: ${{ secrets.PLAYER_LICENSE_KEY }}
         run: yarn && MODE=preview yarn build
       - uses: FirebaseExtended/action-hosting-deploy@v0
+        id: firebase_hosting_preview
         with:
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
-          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
           expires: 30d
+
+  lhci:
+    name: Lighthouse
+    runs-on: ubuntu-latest
+    needs: build_and_preview
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Lighthouse CI
+        run: sudo yarn global add @lhci/[email protected]
+      - name: Run Lighthouse CI
+        run: lhci autorun --collect.url=${{ needs.build_and_preview.outputs.output1 }}?app-config=gnnuzabk --config=./lighthouserc.js

.gitignore

@@ -9,6 +9,7 @@ yarn-error.log
 .firebase
 firebase-debug.log
 .stylelintcache
+.lighthouseci
 
 # os or editor
 .idea

lighthouserc.js

@@ -1,16 +1,19 @@
 module.exports = {
   ci: {
     collect: {
-      url: ['http://127.0.0.1:4000'],
-      startServerCommand: 'http-server ./build -p 4000 -g',
-      startServerReadyPattern: 'Available on',
-      numberOfRuns: 1,
+      numberOfRuns: 3,
     },
     upload: {
       target: 'temporary-public-storage',
     },
     assert: {
-      preset: 'lighthouse:no-pwa',
+      assertions: {
+        'categories:performance': ['warn', { minScore: 0.9 }],
+        'categories:seo': ['error', { minScore: 0.9 }],
+        'categories:accessibility': ['warn', { minScore: 0.9 }],
+        'categories:best-practices': ['warn', { minScore: 0.9 }],
+        'categories:pwa': ['warn', { minScore: 0.9 }],
+      },
     },
   },
 };

public/locales/en/common.json

@@ -12,6 +12,7 @@
     "confirm": "Yes"
   },
   "default_site_name": "My OTT Application",
+  "default_description": "JW OTT Webapp is an open-source, dynamically generated video website.",
   "filter_videos_by": "Filter videos by {{name}}",
   "filter_videos_by_genre": "Filter videos by genre",
   "home": "Home",

public/locales/en/demo.json

@@ -1,5 +1,6 @@
 {
   "app_config_not_found": "Invalid or Missing App Config",
+  "app_config_learn_more": "Learn more about App Configs",
   "cancel_config_id": "Cancel",
   "click_to_unselect_config": "(click here to unselect this config)",
   "currently_previewing_config": "You are currently previewing config: '{{configSource}}'",

public/locales/es/common.json

@@ -12,6 +12,7 @@
     "confirm": "Sí"
   },
   "default_site_name": "Mi aplicación OTT",
+  "default_description": "",
   "filter_videos_by": "Filtrar videos por {{name}}",
   "filter_videos_by_genre": "Filtrar videos por género",
   "home": "Inicio",

public/locales/es/demo.json

@@ -1,5 +1,6 @@
 {
   "app_config_not_found": "Configuración de aplicación inválida o no encontrada",
+  "app_config_learn_more": "",
   "cancel_config_id": "Cancelar",
   "click_to_unselect_config": "(haz clic aquí para deseleccionar esta configuración)",
   "currently_previewing_config": "Actualmente estás previsualizando la configuración: '{{configSource}}'",

src/components/Account/__snapshots__/Account.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Account> > renders and matches snapshot 1`] = `
 <div>

src/components/Alert/__snapshots__/Alert.test.tsx.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Alert> > renders and matches snapshot 1`] = `<div />`;

src/components/Button/Button.tsx

@@ -28,6 +28,7 @@ type Props = {
   disabled?: boolean;
   busy?: boolean;
   id?: string;
+  as?: 'button' | 'a';
 } & React.AriaAttributes;
 
 const Button: React.FC<Props> = ({
@@ -43,6 +44,7 @@ const Button: React.FC<Props> = ({
   busy,
   type,
   to,
+  as = 'button',
   onClick,
   className,
   ...rest

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Button> > renders and matches snapshot 1`] = `
 <div>

src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CancelSubscriptionForm> > renders and matches snapshot 1`] = `
 <div>

src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CardGrid> > renders and matches snapshot 1`] = `
 <div>

src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Checkbox> > renders and matches snapshot 1`] = `
 <div>

src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
 <div>

src/components/ChooseOfferForm/__snapshots__/ChooseOfferForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<OffersForm> > renders and matches snapshot 1`] = `
 <div>

src/components/CollapsibleText/__snapshots__/CollapsibleText.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CollapsibleText> > renders and matches snapshot 1`] = `
 <div>

src/components/ConfirmationDialog/__snapshots__/ConfirmationDialog.test.tsx.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ConfirmationDialog> > renders and matches snapshot 1`] = `<div />`;

src/components/ConfirmationForm/__snapshots__/ConfirmationForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ConfirmationForm> > renders and matches snapshot 1`] = `
 <div>

src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
 <div>

src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
 <div>

src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
 <div>

src/components/DemoConfigDialog/DemoConfigDialog.tsx

@@ -2,14 +2,14 @@ import React, { ChangeEventHandler, MouseEventHandler, useEffect, useState } fro
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import type { UseQueryResult } from 'react-query';
+import { Helmet } from 'react-helmet';
 
 import styles from './DemoConfigDialog.module.scss';
 
 import ErrorPage from '#components/ErrorPage/ErrorPage';
 import TextField from '#components/TextField/TextField';
 import Button from '#components/Button/Button';
 import { getConfigNavigateCallback } from '#src/utils/configOverride';
-import Link from '#components/Link/Link';
 import ConfirmationDialog from '#components/ConfirmationDialog/ConfirmationDialog';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import type { Config } from '#types/Config';
@@ -136,16 +136,22 @@ const DemoConfigDialog = ({ selectedConfigSource, configQuery }: Props) => {
 
   return (
     <>
+      {!configQuery.isSuccess && (
+        <Helmet>
+          <meta name="description" content="Enter the App Config ID" />
+        </Helmet>
+      )}
       {configQuery.isSuccess && (
         <div className={styles.note}>
           <div>{t('currently_previewing_config', { configSource: selectedConfigSource })}</div>
-          <Link onClick={clearConfig}>{t('click_to_unselect_config')}</Link>
+          <Button variant="text" label={t('click_to_unselect_config')} onClick={clearConfig} />
         </div>
       )}
       {!configQuery.isSuccess && (
         <div className={styles.configModal}>
           <ErrorPage
             title={t('app_config_not_found')}
+            learnMoreLabel={t('app_config_learn_more')}
             helpLink={'https://docs.jwplayer.com/platform/docs/ott-create-an-app-config'}
             error={typeof state.error === 'string' ? undefined : state.error}
           >

src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
 <div>
@@ -8,11 +8,13 @@ exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
     <div>
       currently_previewing_config
     </div>
-    <a
-      class="_link_a14c64"
+    <button
+      class="_button_f8f296 _default_f8f296 _text_f8f296"
     >
-      click_to_unselect_config
-    </a>
+      <span>
+        click_to_unselect_config
+      </span>
+    </button>
   </div>
 </div>
 `;
@@ -104,7 +106,7 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = `
               rel="noreferrer"
               target="_blank"
             >
-              learn_more
+              app_config_learn_more
             </a>
           </p>
         </main>

src/components/Dialog/__snapshots__/Dialog.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Dialog> > renders and matches snapshot 1`] = `
 <body

src/components/DialogBackButton/__snapshots__/DialogBackButton.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<DialogBackButton> > renders and matches snapshot 1`] = `
 <div>

src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
 <div>

src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ErrorPage> > renders and matches snapshot 1`] = `
 <div>

src/components/Favorites/__snapshots__/Favorites.test.tsx.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Favorites> > renders and matches snapshot 1`] = `<div />`;

src/components/Filter/__snapshots__/Filter.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Filter> > renders Filter 1`] = `
 <div>

src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ForgotPasswordForm> > renders and matches snapshot type forgot 1`] = `
 <div>

src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Form> > renders Form 1`] = `
 <div>

src/components/FormFeedback/__snapshots__/FormFeedback.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<FormFeedback> > renders and matches snapshot 1`] = `
 <div>

src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Header /> > renders header 1`] = `
 <div>

src/components/HelperText/__snapshots__/HelperText.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<HelperText> > renders and matches snapshot 1`] = `
 <div>

src/components/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<IconButton> > renders and matches snapshot 1`] = `
 <div>

src/components/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<LanguageMenu> > renders and matches snapshot 1`] = `
 <div>

src/components/Link/__snapshots__/Link.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Link> > renders and matches snapshot 1`] = `
 <div>

src/components/LoginForm/__snapshots__/LoginForm.test.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<LoginForm> > renders and matches snapshot 1`] = `
 <div>