feat: add demo dialog when no config ID

* chore(config): move test and dev configs to hosted

* chore(project): fix time mock for live channels tests

* chore(project): fix time mock for live channels tests, fix config query param

* chore(project): fix live and seo tests

* chore(project): fix live channel test to support GMT

* chore: remove console statements

* chore(project): move fixture files out of src

* chore(project): only include epg channel data when env variable set

* feat(config): add dialog when no config ID found

* feat(config): finish dialog for missing config

* fix(config): run demo in production env

* chore: make confirm dialog functions required again

* chore: fix footer styling, fix run scripts

* chore: fix dialog props

* chore: fix missing script

.env.demo

@@ -0,0 +1,3 @@
+APP_CONFIG_DEFAULT_SOURCE=
+APP_UNSAFE_ALLOW_DYNAMIC_CONFIG=1
+APP_DEMO_DEFAULT_CONFIG_ID=225tvq1i

.github/workflows/firebase-live.yml

@@ -10,7 +10,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Build
-        run: yarn && APP_UNSAFE_ALLOW_DYNAMIC_CONFIG=1 INCLUDE_EPG_DATA=1 yarn build
+        run: yarn && yarn build --mode demo
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/firebase-preview.yml

@@ -10,7 +10,7 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: Build
-        run: yarn && APP_UNSAFE_ALLOW_DYNAMIC_CONFIG=1 INCLUDE_EPG_DATA=1 yarn build
+        run: yarn && yarn build --mode demo
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"

package.json

@@ -10,13 +10,13 @@
   },
   "scripts": {
     "prepare": "husky install",
-    "start": "INCLUDE_EPG_DATA=1 vite",
-    "start:jwdev": "yarn start --mode jwdev",
+    "start": "vite",
     "build": "vite build",
     "test": "TZ=UTC vitest run",
     "test-watch": "TZ=UTC vitest",
     "test-coverage": "TZ=UTC vitest run --coverage",
     "test-commit": "TZ=UTC vitest run --changed HEAD~1 --coverage",
+    "test-update": "TZ=UTC vitest run --update",
     "i18next": "i18next src/{components,containers,pages,services,stores}/**/{**/,/}*.{ts,tsx} && node ./scripts/i18next/generate.js",
     "format": "run-s -c format:*",
     "format:eslint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\" --fix",

src/App.tsx

@@ -55,9 +55,10 @@ class App extends Component {
   };
 
   configErrorHandler = (error: Error) => {
+    clearStoredConfig();
+
     this.setState({ error });
     this.setState({ isLoading: false });
-    clearStoredConfig();
     logDev('Error while loading the config:', error);
   };
 

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import classNames from 'classnames';
 import { NavLink } from 'react-router-dom';
 
@@ -16,7 +16,7 @@ type Props = {
   fullWidth?: boolean;
   startIcon?: JSX.Element;
   variant?: Variant;
-  onClick?: () => void;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
   tabIndex?: number;
   size?: 'small' | 'medium' | 'large';
   to?: string;

src/components/DemoConfigDialog/DemoConfigDialog.module.scss

@@ -0,0 +1,48 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.controls {
+  margin-top: variables.$base-spacing;
+
+  > button {
+    margin-right: 8px;
+  }
+}
+
+.configModal {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--body-background-color);
+
+  p {
+    max-width: 400px;
+    margin-bottom: 0;
+    color: theme.$text-field-resting-color;
+    font-size: 14px;
+    line-height: 18px;
+  }
+
+  a {
+    color: theme.$text-field-resting-color;
+    font-weight: var(--body-font-weight-bold);
+    text-decoration: underline;
+  }
+}
+
+.note {
+  padding: variables.$base-spacing;
+  text-align: center;
+
+  a {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  * {
+    margin-top: calc(#{variables.$base-spacing} / 2);
+    color: theme.$text-field-resting-color;
+    font-weight: var(--body-font-weight-bold);
+  }
+}

src/components/DemoConfigDialog/DemoConfigDialog.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { renderWithRouter } from '#test/testUtils';
+import DemoConfigDialog from '#src/components/DemoConfigDialog/DemoConfigDialog';
+
+describe('<DemoConfigDialog>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = renderWithRouter(<DemoConfigDialog configLocation={''} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders and matches snapshot with ID', () => {
+    const { container } = renderWithRouter(<DemoConfigDialog configLocation={'gnnuzabk'} />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/DemoConfigDialog/DemoConfigDialog.tsx

@@ -0,0 +1,81 @@
+import React, { MouseEventHandler, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './DemoConfigDialog.module.scss';
+
+import ErrorPage from '#src/components/ErrorPage/ErrorPage';
+import TextField from '#src/components/TextField/TextField';
+import Button from '#src/components/Button/Button';
+import { addConfigQueryParam, clearStoredConfig, getConfigLocation } from '#src/utils/configOverride';
+import Link from '#src/components/Link/Link';
+import ConfirmationDialog from '#src/components/ConfirmationDialog/ConfirmationDialog';
+
+const fallbackConfig = import.meta.env.APP_DEMO_DEFAULT_CONFIG_ID;
+
+interface Props {
+  configLocation?: string;
+}
+
+const DemoConfigDialog = ({ configLocation = getConfigLocation() }: Props) => {
+  const { t } = useTranslation('demo');
+  const [showDemoWarning, setShowWarning] = useState(false);
+
+  const clearConfig = () => {
+    clearStoredConfig();
+    window.location.reload();
+  };
+
+  if (configLocation) {
+    return (
+      <div className={styles.note}>
+        <div>{t('currently_previewing_config', { configLocation })}</div>
+        <Link onClick={clearConfig}>{t('click_to_unselect_config')}</Link>
+      </div>
+    );
+  }
+
+  const cancelConfigClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+    event.preventDefault();
+
+    if (fallbackConfig) {
+      setShowWarning(true);
+    }
+  };
+
+  const confirmDemoClick = () => {
+    addConfigQueryParam(fallbackConfig);
+    window.location.reload();
+  };
+
+  const cancelDemoClick = () => setShowWarning(false);
+
+  return (
+    <div className={styles.configModal}>
+      <ErrorPage title={t('app_config_not_found')}>
+        <form method="GET" action="/">
+          <TextField required placeholder={t('please_enter_config_id')} name="app-config" />
+          <div className={styles.controls}>
+            <Button label={t('submit_config_id')} type={'submit'} />
+            {fallbackConfig && <Button label={t('cancel_config_id')} onClick={cancelConfigClick} />}
+          </div>
+        </form>
+        <p>
+          {t('use_the_jwp_dashboard')}
+          <span> </span>
+          <Link href={'https://docs.jwplayer.com/platform/docs/ott-create-an-app-config'} target={'_blank'}>
+            {t('learn_more')}
+          </Link>
+        </p>
+      </ErrorPage>
+      <ConfirmationDialog
+        open={showDemoWarning}
+        title={t('view_generic_demo')}
+        body={t('viewing_config_demo')}
+        onConfirm={confirmDemoClick}
+        onClose={cancelDemoClick}
+      />
+    </div>
+  );
+};
+
+export default DemoConfigDialog;

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

@@ -0,0 +1,98 @@
+// Vitest Snapshot v1
+
+exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="_configModal_561a54"
+  >
+    <div
+      class="_errorPage_8c5621"
+    >
+      <div
+        class="_box_8c5621"
+      >
+        <header>
+          <h1
+            class="_title_8c5621"
+          >
+            app_config_not_found
+          </h1>
+        </header>
+        <main
+          class="_main_8c5621"
+        >
+          <form
+            action="/"
+            method="GET"
+          >
+            <div
+              class="_textField_e16c1b"
+            >
+              <label
+                class="_label_e16c1b"
+                for="text-field_1235_app-config"
+              />
+              <div
+                class="_container_e16c1b"
+              >
+                <input
+                  class="_input_e16c1b"
+                  id="text-field_1235_app-config"
+                  name="app-config"
+                  placeholder="please_enter_config_id"
+                  required=""
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="_controls_561a54"
+            >
+              <button
+                class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+                type="submit"
+              >
+                <span>
+                  submit_config_id
+                </span>
+              </button>
+            </div>
+          </form>
+          <p>
+            use_the_jwp_dashboard
+            <span>
+               
+            </span>
+            <a
+              class="_link_a14c64"
+              href="https://docs.jwplayer.com/platform/docs/ott-create-an-app-config"
+              rel="noreferrer"
+              target="_blank"
+            >
+              learn_more
+            </a>
+          </p>
+        </main>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<DemoConfigDialog> > renders and matches snapshot with ID 1`] = `
+<div>
+  <div
+    class="_note_561a54"
+  >
+    <div>
+      currently_previewing_config
+    </div>
+    <a
+      class="_link_a14c64"
+    >
+      click_to_unselect_config
+    </a>
+  </div>
+</div>
+`;

src/components/ErrorPage/ErrorPage.module.scss

@@ -10,7 +10,7 @@
 }
 
 .box {
-  max-width: 500px;
+  max-width: 600px;
   padding: 12px;
 }
 

src/components/Link/Link.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEventHandler } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import classNames from 'classnames';
 
@@ -10,21 +10,33 @@ type Props = {
   to?: string;
   target?: string;
   children?: React.ReactNode;
+  onClick?: MouseEventHandler<HTMLElement>;
 };
 
-const Link: React.FC<Props> = ({ to, href, children, className, ...rest }: Props) => {
+const Link: React.FC<Props> = ({ to, href, children, className, onClick, target, ...rest }: Props) => {
   const linkClassName = classNames(styles.link, className);
 
   if (to) {
     return (
-      <RouterLink to={to} className={linkClassName}>
+      <RouterLink to={to} className={linkClassName} onClick={onClick}>
         {children}
       </RouterLink>
     );
   }
 
   return (
-    <a href={href} className={linkClassName} {...rest}>
+    <a
+      href={href}
+      className={linkClassName}
+      onClick={onClick}
+      target={target}
+      rel={
+        // Security thingy for old browsers.
+        // See https://mathiasbynens.github.io/rel-noopener/#recommendations
+        target === '_blank' ? 'noreferrer' : undefined
+      }
+      {...rest}
+    >
       {children}
     </a>
   );