DYN-8498: Add message to restart Dynamo after setting Import (#96)

* Consolidate labels prop and add restart/reset UI message

Replace many individual label props with a single labels object passed from App to Static. Update Static to read labels from props.labels, simplify setLabels in App, and update defaultProps/propTypes accordingly. Add UI and handlers for a restart message and a reset button shown after importing settings (showRestartMessage/hideRestartMessage/resetSettings) and clear the file input after import. Add related CSS for import row, reset button, and restart message, and tweak bottomMenu classes in App.css.

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Add Toast component and debug-mode handling

Introduce a reusable Toast notification (src/Toast.js + src/Toast.css) and unit tests (tests/Toast.test.js). Integrate the Toast into App (src/App.js) and add a debug-mode detection that auto-loads Static when WebView2 is not present and shows a small "Debug Mode" label. Update Static (src/Static.js, src/Static.css) to: use safer typeof checks for chrome.webview, remove the inline restart message UI/CSS in favor of showing toasts via window.showToast/window.hideToast, and mock import callbacks when running outside WebView2 for local development. Update package.json to include the new Toast test in test:unit. These changes enable in-app notifications and improve local dev/debug behavior without WebView2.

* Update App.js

* Update App.js

* Update App.js

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: zeusongit

package.json

@@ -33,7 +33,7 @@
     "lic_direct": "npx @adsk/adsk-npm-license-puller --path . --app-name 'splash-screen' --verbose --about-box ./license_output/about-box_direct.html --about-box-type desktop --year $(date \"+%Y\") --paos ./license_output/paos_direct.csv",
     "lic_transitive": "npx @adsk/adsk-npm-license-puller --path . --app-name 'splash-screen' --verbose --about-box ./license_output/about-box_transitive.html --about-box-type desktop --transitive --year $(date \"+%Y\") --paos ./license_output/paos_transitive.csv",
     "generate_license": "npm run lic_direct && npm run lic_transitive",
-    "test:unit": "NODE_ENV=test jest tests/App.test.js",
+    "test:unit": "NODE_ENV=test jest tests/App.test.js tests/Toast.test.js",
     "test:e2e": "playwright test tests/e2e.test.js",
     "eject": "react-scripts eject"
   },

src/App.css

@@ -9,9 +9,17 @@
 }
 
 .bottomMenu {
+  height: auto;
+}
+
+.bottomMenuHeader {
   height: 50%;
 }
 
+.bottomMenuContent {
+  height: auto;
+}
+
 .welcomeRow {
   margin-top: 20px !important;
 }

src/App.js

@@ -5,6 +5,7 @@ import Col from 'react-bootstrap/Col';
 
 import Dynamic from './Dynamic';
 import Static from './Static';
+import Toast from './Toast';
 import { base64DynamoLogo, base64DynamoBackground } from './encodedImages';
 
 import './App.css';
@@ -14,6 +15,8 @@ class App extends React.Component {
   constructor() {
     super();
     this.setBackgroundImage();
+    const noWebView = typeof chrome === 'undefined' || typeof chrome.webview === 'undefined';
+    this.isDebugMode = noWebView && new URLSearchParams(window.location.search).has('debug');
     this.state = {
       isChecked: false,
       welcomeToDynamoTitle: 'Welcome to Dynamo!',
@@ -41,15 +44,20 @@ class App extends React.Component {
 
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
-    //TODO : As alternative we can receive the event from the Childs like the Static component
+
+    // Debug mode: auto-show Static when running outside Dynamo (no WebView2)
+    if (this.isDebugMode) {
+      console.log('[SplashScreen] Debug mode: no WebView2 detected, auto-loading Static');
+      this.setLoadingDone();
+    }
   }
 
   render() {
     return (
       <Container fluid>
         <Row>
           <Col className='menuOptions px-4' >
-            <Row className='bottomMenu'>
+            <Row className='bottomMenu bottomMenuHeader'>
               <Col>
                 <Row>
                   <div>
@@ -61,24 +69,16 @@ class App extends React.Component {
                     {this.state.welcomeToDynamoTitle}
                   </div>
                 </Row>
+
               </Col>
             </Row>
-            <Row className='bottomMenu'>
+            <Row className='bottomMenu bottomMenuContent'>
               <Col>
                 {
                   this.state.loadingDone ?
                     <Static
                       signInStatus={this.state.signInStatus}
-                      signInTitle={this.state.signInTitle}
-                      signInTooltip={this.state.signInTooltip}
-                      signingInTitle={this.state.signingInTitle}
-                      signOutTitle={this.state.signOutTitle}
-                      signOutTooltip={this.state.signOutTooltip}
-                      welcomeToDynamoTitle={this.state.welcomeToDynamoTitle}
-                      launchTitle={this.state.launchTitle}
-                      showScreenAgainLabel={this.state.showScreenAgainLabel}
-                      importSettingsTitle={this.state.importSettingsTitle}
-                      importSettingsTooltipDescription={this.state.importSettingsTooltipDescription}
+                      labels={this.state.labels}
                       onCheckedChange={this.handleCheckedChange}
                     /> : <Dynamic />
                 }
@@ -90,6 +90,7 @@ class App extends React.Component {
             <img className='screenBackground' alt='' src={base64DynamoBackground}></img>
           </Col>
         </Row>
+        <Toast />
       </Container>
     );
   }
@@ -98,15 +99,7 @@ class App extends React.Component {
   setLabels(labels) {
     this.setState({
       welcomeToDynamoTitle: labels.welcomeToDynamoTitle,
-      launchTitle: labels.launchTitle,
-      showScreenAgainLabel: labels.showScreenAgainLabel,
-      importSettingsTitle: labels.importSettingsTitle,
-      importSettingsTooltipDescription: labels.importSettingsTooltipDescription,
-      signInTitle: labels.signInTitle,
-      signInTooltip: labels.signInTooltip,
-      signingInTitle: labels.signingInTitle,
-      signOutTitle: labels.signOutTitle,
-      signOutTooltip: labels.signOutTooltip
+      labels: labels
     });
   }
 

src/Static.css

@@ -90,4 +90,59 @@ input[type="file"] {
 
 .loadingTimeFooter {
     font-size: 9px;
-}
+}
+
+/* Import settings row */
+.importSettingsRow {
+    display: grid !important;
+    align-items: center;
+}
+
+.importSettingsRow label {
+    width: 100%;
+    display: block;
+}
+
+.importSettingsRowWithReset {
+    grid-template-columns: 1fr 24px;
+    column-gap: 8px;
+}
+
+.importSettingsRowWithReset label {
+    min-width: 0;
+    width: 100%;
+}
+
+/* Reset button next to import settings */
+.resetButtonNextToImport {
+    position: static;
+    width: 24px !important;
+    height: 24px;
+    padding: 0;
+    box-sizing: border-box;
+    line-height: 0;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+    cursor: pointer;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    transition: all 0.2s ease;
+}
+
+.resetButtonNextToImport:hover {
+    border-color: rgba(255, 255, 255, 0.6);
+    box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
+}
+
+.resetButtonNextToImport:active {
+    box-shadow: 0px 0px 2px rgba(56, 171, 223, 0.65);
+}
+
+.resetButtonNextToImport svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+}