Auto Optimizer: improve progress spacing and Settings navigation

Author: aleksandr-voitenko

app/components-react/shared/auto-optimizer/AutoOptimizer.m.less

@@ -132,6 +132,10 @@
   margin: -4px 0 18px;
 }
 
+.progress-bar + .secondary-button {
+  margin-top: 12px;
+}
+
 .results-screen {
   gap: 18px;
   text-align: left;

app/components-react/shared/auto-optimizer/AutoOptimizer.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { $t } from 'services/i18n';
 import { AutoOptimizerError } from './AutoOptimizerError';
 import { AutoOptimizerHeader } from './AutoOptimizerHeader';
 import { AutoOptimizerIntro } from './AutoOptimizerIntro';
@@ -10,16 +11,28 @@ import styles from './AutoOptimizer.m.less';
 export function AutoOptimizer(p: IAutoOptimizerProps) {
   const host = p.host || 'go-live';
   const applying = p.stage === 'applying';
+  const backToSettings = host === 'settings' && (
+    <button
+      type="button"
+      className={styles.textButton}
+      disabled={applying || p.stage === 'cancelling'}
+      onClick={p.onClose}
+    >
+      {$t('Back to settings')}
+    </button>
+  );
 
   return (
     <main className={styles.flow} data-testid="auto-optimizer-flow">
       <AutoOptimizerHeader
         onClose={p.onClose}
         closeDisabled={applying}
-        showClose={host !== 'go-live'}
+        showClose={host === 'onboarding'}
       />
       {p.stage === 'intro' && (
-        <AutoOptimizerIntro host={host} onStart={p.onStart} onSkip={p.onSkip} />
+        <AutoOptimizerIntro host={host} onStart={p.onStart} onSkip={p.onSkip}>
+          {backToSettings}
+        </AutoOptimizerIntro>
       )}
       {['preparing', 'running', 'cancelling'].includes(p.stage) && (
         <AutoOptimizerProgress
@@ -29,7 +42,9 @@ export function AutoOptimizer(p: IAutoOptimizerProps) {
           canSkip={host === 'go-live'}
           onCancel={p.onCancel}
           onSkip={p.onSkip}
-        />
+        >
+          {backToSettings}
+        </AutoOptimizerProgress>
       )}
       {['review', 'applying'].includes(p.stage) && (
         <AutoOptimizerResults
@@ -40,7 +55,9 @@ export function AutoOptimizer(p: IAutoOptimizerProps) {
           onApply={p.onApply}
           onSkip={p.onSkip}
           onAdvice={p.onAdvice}
-        />
+        >
+          {backToSettings}
+        </AutoOptimizerResults>
       )}
       {p.stage === 'error' && (
         <AutoOptimizerError
@@ -49,7 +66,9 @@ export function AutoOptimizer(p: IAutoOptimizerProps) {
           canContinue={host === 'go-live'}
           onRetry={p.onRetry}
           onContinue={p.onContinueWithoutOptimization}
-        />
+        >
+          {backToSettings}
+        </AutoOptimizerError>
       )}
     </main>
   );

app/components-react/shared/auto-optimizer/AutoOptimizerError.tsx

@@ -4,6 +4,7 @@ import { $t } from 'services/i18n';
 import styles from './AutoOptimizer.m.less';
 
 export function AutoOptimizerError(p: {
+  children?: React.ReactNode;
   message?: string;
   canRetry: boolean;
   canContinue: boolean;
@@ -26,6 +27,7 @@ export function AutoOptimizerError(p: {
             {$t('Continue without optimization')}
           </Button>
         )}
+        {p.children}
       </div>
     </section>
   );

app/components-react/shared/auto-optimizer/AutoOptimizerIntro.tsx

@@ -5,6 +5,7 @@ import { $i } from 'services/utils';
 import styles from './AutoOptimizer.m.less';
 
 export function AutoOptimizerIntro(p: {
+  children?: React.ReactNode;
   host: 'go-live' | 'settings' | 'onboarding';
   onStart(): void;
   onSkip(): void;
@@ -31,6 +32,7 @@ export function AutoOptimizerIntro(p: {
           {$t('Skip')}
         </button>
       )}
+      {p.children}
     </section>
   );
 }

app/components-react/shared/auto-optimizer/AutoOptimizerProgress.tsx

@@ -5,6 +5,7 @@ import { $i } from 'services/utils';
 import styles from './AutoOptimizer.m.less';
 
 export function AutoOptimizerProgress(p: {
+  children?: React.ReactNode;
   phaseLabel?: string;
   progress?: number;
   cancelling: boolean;
@@ -48,6 +49,7 @@ export function AutoOptimizerProgress(p: {
           {$t('Skip')}
         </button>
       )}
+      {p.children}
     </section>
   );
 }

app/components-react/shared/auto-optimizer/AutoOptimizerResults.tsx

@@ -173,6 +173,7 @@ function AdviceCard(p: { advice: IAutoOptimizerPresentationAdvice; onAction?():
 }
 
 export function AutoOptimizerResults(p: {
+  children?: React.ReactNode;
   outputs: IAutoOptimizerPresentationOutput[];
   advice?: IAutoOptimizerPresentationAdvice | null;
   applying: boolean;
@@ -250,6 +251,7 @@ export function AutoOptimizerResults(p: {
             {$t('Skip')}
           </button>
         )}
+        {p.children}
       </div>
     </section>
   );

app/i18n/en-US/streaming.json

@@ -292,6 +292,7 @@
   "Estimated for": "Estimated for",
   "Save Settings & Go Live": "Save Settings & Go Live",
   "Save Settings": "Save Settings",
+  "Back to settings": "Back to settings",
   "Saving Settings...": "Saving Settings...",
   "We couldn't finish optimizing your settings": "We couldn't finish optimizing your settings",
   "Your current stream settings have not been changed.": "Your current stream settings have not been changed.",