Release Notes: UI updates for Mac + Windows, add “loadingError” state for Windows (#1672)

* chore: Add LoadingError state

* chore: Add notification message for retry fetching release notes

* chore: Add releasenotes to the windows build

* feat: Add new retry button variant

* chore: update copy

* chore: Add platform to initSetup msg, platform-specific styles

* chore: Add logging

* chore: add to translations file and use in components

* rm: inline.js

* chore: Attempt adding windows platform

* feat: Platform-specific styles applied

* fix: update all buttons to follow platform styles

* fix: Text

* refactor: Update subheader text for tag expressing gratitude in translation file

* chore: Add link to bottom of page

* chore: Update what's new link

* chore: Switch link underline to hover only

* wip: button styles

* chore: Add active state for button

* fix: netlify cache attempt

* chore: revert pkg.json change after netlify cache bust

* rm: copy change in readme

* chore: last fixes before review

* feat: Add translations files

* tests: adding loadingError state tests

* fix: tests for loadingError

* chore: Address comments

* chore: update comment in button styles

Author: vkraucunas

special-pages/index.mjs

@@ -45,6 +45,7 @@ export const support = {
     'release-notes': {
         integration: ['copy', 'build-js'],
         apple: ['copy', 'build-js'],
+        windows: ['copy', 'build-js'],
     },
     /** @type {Partial<Record<ImportMeta['injectName'], string[]>>} */
     'special-error': {

special-pages/pages/release-notes/app/Components.js

@@ -17,10 +17,12 @@ import {
     UpdateStatus,
 } from './components/ReleaseNotes';
 import { sampleData } from './sampleData.js';
+import { usePlatformName } from './settings.provider';
 
 export function Components() {
     const { t } = useTypedTranslation();
     const { isDarkMode } = useEnv();
+    const platform = usePlatformName();
     const todayInMilliseconds = Date.now();
     const yesterdayInMilliseconds = new Date(todayInMilliseconds - 24 * 60 * 60 * 1000).getTime();
 
@@ -60,6 +62,7 @@ export function Components() {
 
             <h2>Update Status</h2>
             <UpdateStatus status="loading" version="1.0.1" timestamp={yesterdayInMilliseconds} />
+            <UpdateStatus status="loadingError" version="1.0.1" timestamp={yesterdayInMilliseconds} />
             <UpdateStatus status="loaded" version="1.0.1" timestamp={todayInMilliseconds} />
             <UpdateStatus status="updateReady" version="1.2.0" timestamp={todayInMilliseconds} />
             <UpdateStatus status="criticalUpdateReady" version="1.2.0" timestamp={todayInMilliseconds} />
@@ -70,13 +73,24 @@ export function Components() {
 
             <h2>Update Buttons</h2>
             <div>
-                <Button>{t('restartToUpdate')}</Button>
+                <Button variant="accentBrand" size={platform === 'macos' ? 'lg' : 'md'}>
+                    {t('retryGettingReleaseNotes')}
+                </Button>
             </div>
             <div>
-                <Button>{t('updateBrowser')}</Button>
+                <Button variant="accentBrand" size={platform === 'macos' ? 'lg' : 'md'}>
+                    {t('restartToUpdate')}
+                </Button>
             </div>
             <div>
-                <Button>{t('retryUpdate')}</Button>
+                <Button variant="accentBrand" size={platform === 'macos' ? 'lg' : 'md'}>
+                    {t('updateBrowser')}
+                </Button>
+            </div>
+            <div>
+                <Button variant="accentBrand" size={platform === 'macos' ? 'lg' : 'md'}>
+                    {t('retryUpdate')}
+                </Button>
             </div>
             <hr />
 
@@ -113,6 +127,9 @@ export function Components() {
             <LoadingThen>
                 <ReleaseNotes releaseData={sampleData.loaded} />
             </LoadingThen>
+            <LoadingThen>
+                <ReleaseNotes releaseData={sampleData.loadingError} />
+            </LoadingThen>
             <LoadingThen>
                 <ReleaseNotes releaseData={sampleData.updateDownloading} />
             </LoadingThen>

special-pages/pages/release-notes/app/components/OpenIn16.js

@@ -0,0 +1,21 @@
+import { h } from 'preact';
+
+/**
+ * @param {object} props
+ * @param {string} props.className
+ **/
+
+export default function OpenIn16({ className }) {
+    return (
+        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" className={className}>
+            <path
+                fill="currentColor"
+                d="M7.361 1.013a.626.626 0 0 1 0 1.224l-.126.013H5A2.75 2.75 0 0 0 2.25 5v6A2.75 2.75 0 0 0 5 13.75h6A2.75 2.75 0 0 0 13.75 11V8.765a.625.625 0 0 1 1.25 0V11a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V5a4 4 0 0 1 4-4h2.235l.126.013Z"
+            />
+            <path
+                fill="currentColor"
+                d="M12.875 1C14.049 1 15 1.951 15 3.125v2.25a.625.625 0 1 1-1.25 0v-2.24L9.067 7.817a.626.626 0 0 1-.884-.884l4.682-4.683h-2.24a.625.625 0 1 1 0-1.25h2.25Z"
+            />
+        </svg>
+    );
+}

special-pages/pages/release-notes/app/components/ReleaseNotes.js

@@ -1,19 +1,22 @@
 import { Fragment, h } from 'preact';
-import { useMessaging } from '../index';
 import classNames from 'classnames';
+import { useMessaging } from '../index';
 import { useTypedTranslation } from '../types';
+import { Button } from '../../../../shared/components/Button/Button';
+import { Card } from '../../../../shared/components/Card/Card';
 // eslint-disable-next-line no-redeclare
 import { Text } from '../../../../shared/components/Text/Text';
-import { Card } from '../../../../shared/components/Card/Card';
-import { Button } from '../../../../shared/components/Button/Button';
+import { usePlatformName } from '../settings.provider';
 import { ContentPlaceholder } from './ContentPlaceholder';
+import OpenInIcon from './OpenIn16';
 
 import styles from './ReleaseNotes.module.css';
 
 /**
  * @typedef {import('../../types/release-notes.js').UpdateMessage} UpdateMessage
  * @typedef {import('../../types/release-notes.js').UpdateErrorState} UpdateErrorState
  * @typedef {import('../../types/release-notes.js').UpdateReadyState} UpdateReadyState
+ * @typedef {import('../../types/release-notes.js').ReleaseNotesLoadingErrorState} ReleaseNotesLoadingErrorState
  * @typedef {import('../../types/release-notes.js').ReleaseNotesLoadedState} ReleaseNotesLoadedState
  * @typedef {import('../types.js').Notes} Notes
  */
@@ -40,6 +43,7 @@ function StatusText({ status, version, progress = 0 }) {
     const statusTexts = {
         loaded: t('browserUpToDate'),
         loading: t('checkingForUpdate'),
+        loadingError: t('loadingError'),
         updateReady: t('newVersionAvailable'),
         updateError: t('updateError'),
         criticalUpdateReady: t('criticallyOutOfDate'),
@@ -64,6 +68,7 @@ function StatusIcon({ status, className }) {
     const iconClasses = {
         loaded: styles.checkIcon,
         loading: styles.spinnerIcon,
+        loadingError: styles.warningIcon,
         updateReady: styles.alertIcon,
         criticalUpdateReady: styles.warningIcon,
         updateError: styles.warningIcon,
@@ -214,7 +219,7 @@ export function CardContents({ releaseData }) {
     const { status } = releaseData;
     const isLoading = status === 'loading' || status === 'updateDownloading' || status === 'updatePreparing';
 
-    if (isLoading) {
+    if (isLoading || status === 'loadingError') {
         return <ContentPlaceholder />;
     }
 
@@ -251,24 +256,41 @@ export function CardContents({ releaseData }) {
 
 /**
  * @param {object} props
- * @param {UpdateReadyState|UpdateErrorState} props.releaseData
+ * @param {UpdateReadyState|UpdateErrorState|ReleaseNotesLoadingErrorState} props.releaseData
  */
 export function UpdateButton({ releaseData }) {
     const { t } = useTypedTranslation();
     const { messages } = useMessaging();
+    const platform = usePlatformName();
 
     const { status } = releaseData;
     let button;
 
+    if (status === 'loadingError') {
+        button = (
+            <Button onClick={() => messages?.retryFetchReleaseNotes()} variant="accentBrand" size={platform === 'macos' ? 'lg' : 'md'}>
+                {t('retryGettingReleaseNotes')}
+            </Button>
+        );
+    }
+
     if (status === 'updateError') {
-        button = <Button onClick={() => messages?.retryUpdate()}>{t('retryUpdate')}</Button>;
+        button = (
+            <Button onClick={() => messages?.retryUpdate()} variant="accentBrand" size={platform === 'macos' ? 'lg' : 'md'}>
+                {t('retryUpdate')}
+            </Button>
+        );
     }
 
     if (status === 'updateReady' || status === 'criticalUpdateReady') {
         const { automaticUpdate } = releaseData;
         const buttonText = automaticUpdate ? t('restartToUpdate') : t('updateBrowser');
 
-        button = <Button onClick={() => messages?.browserRestart()}>{buttonText}</Button>;
+        button = (
+            <Button onClick={() => messages?.browserRestart()} variant="accentBrand" size={platform === 'macos' ? 'lg' : 'md'}>
+                {buttonText}
+            </Button>
+        );
     }
 
     if (!button) return null;
@@ -297,18 +319,26 @@ export function ReleaseNotes({ releaseData }) {
         }
     }
 
-    const shouldShowButton = status === 'updateReady' || status === 'criticalUpdateReady' || status === 'updateError';
+    const shouldShowButton =
+        status === 'updateReady' || status === 'criticalUpdateReady' || status === 'updateError' || status === 'loadingError';
 
     return (
         <article className={styles.article}>
             <header className={styles.heading}>
+                <p>{t('thankyou')}</p>
                 <PageTitle title={t('browserReleaseNotes')} />
                 <UpdateStatus status={status} timestamp={timestampInMilliseconds} version={currentVersion} progress={progress} />
                 {shouldShowButton && <UpdateButton releaseData={releaseData} />}
             </header>
-            <Card className={styles.card}>
-                <CardContents releaseData={releaseData} />
-            </Card>
+            {status !== 'loadingError' && (
+                <Card className={styles.card}>
+                    <CardContents releaseData={releaseData} />
+                </Card>
+            )}
+            <a href="https://duckduckgo.com/updates" target="_blank" className={styles.updatesLink}>
+                {t('whatsNewAtDuckDuckGoLink')}
+                <OpenInIcon className={styles.linkIcon} />
+            </a>
         </article>
     );
 }

special-pages/pages/release-notes/app/components/ReleaseNotes.module.css

@@ -194,3 +194,22 @@
     font-weight: 600;
     line-height: calc(11 * var(--px-in-rem));
 }
+
+.updatesLink {
+    display: inline-flex;
+    align-items: center;
+    border-bottom: 1px solid transparent;
+    width: fit-content;
+    text-decoration: none;
+
+    &:hover {
+        border-bottom-color: currentColor;
+    }
+
+    .linkIcon {
+        height: 1rem;
+        width: 1rem;
+        margin-left: var(--sp-1);
+        vertical-align: middle;
+    }
+}

special-pages/pages/release-notes/app/index.js

@@ -8,13 +8,25 @@ import { callWithRetry } from '../../../shared/call-with-retry.js';
 import enStrings from '../public/locales/en/release-notes.json';
 
 import '../../../shared/styles/global.css'; // global styles
+import { Settings } from './settings';
+import { SettingsProvider } from './settings.provider';
 
 export const MessagingContext = createContext({
     messages: /** @type {import('../src/index.js').ReleaseNotesPage | null} */ (null),
 });
 
 export const useMessaging = () => useContext(MessagingContext);
 
+/**
+ * @import { Environment } from "../../../shared/environment";
+ * @param {Environment} environment
+ * @param {Settings} settings
+ */
+function installGlobalSideEffects(environment, settings) {
+    document.body.dataset.platformName = settings.platform.name;
+    document.body.dataset.display = environment.display;
+}
+
 export async function init(messages, baseEnvironment) {
     const result = await callWithRetry(() => messages.initialSetup());
 
@@ -31,6 +43,15 @@ export async function init(messages, baseEnvironment) {
         .withTextLength(baseEnvironment.urlParams.get('textLength'))
         .withDisplay(baseEnvironment.urlParams.get('display'));
 
+    // create app-specific settings
+    const settings = new Settings({})
+        .withPlatformName(baseEnvironment.injectName)
+        .withPlatformName(init.platform?.name)
+        .withPlatformName(baseEnvironment.urlParams.get('platform'));
+
+    // install global side effects for platform-specific styles
+    installGlobalSideEffects(environment, settings);
+
     const strings =
         environment.locale === 'en'
             ? enStrings
@@ -46,24 +67,33 @@ export async function init(messages, baseEnvironment) {
 
     if (environment.display === 'app') {
         render(
-            <EnvironmentProvider debugState={environment.debugState} injectName={environment.injectName} willThrow={environment.willThrow}>
-                <TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
-                    <MessagingContext.Provider value={{ messages }}>
-                        <App />
-                    </MessagingContext.Provider>
-                </TranslationProvider>
+            <EnvironmentProvider
+                debugState={environment.debugState}
+                injectName={environment.injectName}
+                willThrow={environment.willThrow}
+                env={environment.env}
+            >
+                <SettingsProvider settings={settings}>
+                    <TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
+                        <MessagingContext.Provider value={{ messages }}>
+                            <App />
+                        </MessagingContext.Provider>
+                    </TranslationProvider>
+                </SettingsProvider>
             </EnvironmentProvider>,
             root,
         );
     }
     if (environment.display === 'components') {
         render(
             <EnvironmentProvider debugState={environment.debugState} injectName={environment.injectName} willThrow={environment.willThrow}>
-                <TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
-                    <MessagingContext.Provider value={{ messages }}>
-                        <Components />
-                    </MessagingContext.Provider>
-                </TranslationProvider>
+                <SettingsProvider settings={settings}>
+                    <TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
+                        <MessagingContext.Provider value={{ messages }}>
+                            <Components />
+                        </MessagingContext.Provider>
+                    </TranslationProvider>
+                </SettingsProvider>
             </EnvironmentProvider>,
             root,
         );

special-pages/pages/release-notes/app/sampleData.js

@@ -13,6 +13,11 @@ export const sampleData = {
         currentVersion: '1.0.1',
         lastUpdate: timestampInSeconds - 24 * 60 * 60,
     },
+    loadingError: {
+        status: 'loadingError',
+        currentVersion: '1.0.1',
+        lastUpdate: timestampInSeconds - 24 * 60 * 60,
+    },
     loaded: {
         currentVersion: '1.0.1',
         latestVersion: '1.0.1',

special-pages/pages/release-notes/app/settings.js

@@ -0,0 +1,22 @@
+export class Settings {
+    /**
+     * @param {object} params
+     * @param {{name: 'macos' | 'windows'}} [params.platform]
+     */
+    constructor({ platform = { name: 'macos' } }) {
+        this.platform = platform;
+    }
+
+    withPlatformName(name) {
+        /** @type {ImportMeta['platform'][]} */
+        const valid = ['windows', 'macos'];
+
+        if (valid.includes(/** @type {any} */ (name))) {
+            return new Settings({
+                ...this,
+                platform: { name },
+            });
+        }
+        return this;
+    }
+}

special-pages/pages/release-notes/app/settings.provider.js

@@ -0,0 +1,17 @@
+import { h, createContext } from 'preact';
+import { useContext } from 'preact/hooks';
+
+const SettingsContext = createContext(/** @type {{settings: import("./settings.js").Settings}} */ ({}));
+
+/**
+ * @param {object} params
+ * @param {import("./settings.js").Settings} params.settings
+ * @param {import("preact").ComponentChild} params.children
+ */
+export function SettingsProvider({ settings, children }) {
+    return <SettingsContext.Provider value={{ settings }}>{children}</SettingsContext.Provider>;
+}
+
+export function usePlatformName() {
+    return useContext(SettingsContext).settings.platform.name;
+}