SDA-4035 Blue border while focus is on copy button (#1691)

spec/__snapshots__/aboutApp.spec.ts.snap

@@ -24,52 +24,6 @@ exports[`about app should render correctly 1`] = `
         Desktop Application
       </span>
     </div>
-    <section>
-      <ul
-        className="AboutApp-symphony-section"
-      >
-        <li
-          key="0"
-        >
-          <strong>
-            POD:
-          </strong>
-          <span>
-            N/A
-          </span>
-        </li>
-        <li
-          key="1"
-        >
-          <strong>
-            SBE:
-          </strong>
-          <span>
-            N/A (N/A)
-          </span>
-        </li>
-        <li
-          key="2"
-        >
-          <strong>
-            SDA:
-          </strong>
-          <span>
-            N/A (N/A)
-          </span>
-        </li>
-        <li
-          key="3"
-        >
-          <strong>
-            SFE-Lite:
-          </strong>
-          <span>
-            N/A undefined
-          </span>
-        </li>
-      </ul>
-    </section>
     <div
       className="AboutApp-copy-container"
     >

src/renderer/components/about-app.tsx

@@ -45,9 +45,11 @@ export default class AboutApp extends React.Component<{}, IState> {
     onCopy: () => this.copy(),
     onClose: () => this.close(),
   };
+  private closeButtonRef: React.RefObject<HTMLButtonElement>;
 
   constructor(props) {
     super(props);
+    this.closeButtonRef = React.createRef();
     this.state = {
       userConfig: {},
       globalConfig: {},
@@ -55,24 +57,24 @@ export default class AboutApp extends React.Component<{}, IState> {
       finalConfig: {},
       appName: 'Symphony',
       versionLocalised: 'Version',
-      clientVersion: 'N/A',
-      buildNumber: 'N/A',
-      hostname: 'N/A',
-      sfeVersion: 'N/A',
-      sfeClientType: 'N/A',
-      sdaVersion: 'N/A',
-      sdaBuildNumber: 'N/A',
-      electronVersion: 'N/A',
-      chromeVersion: 'N/A',
-      v8Version: 'N/A',
-      nodeVersion: 'N/A',
-      openSslVersion: 'N/A',
-      zlibVersion: 'N/A',
-      uvVersion: 'N/A',
-      aresVersion: 'N/A',
-      httpParserVersion: 'N/A',
-      swiftSearchVersion: 'N/A',
-      swiftSearchSupportedVersion: 'N/A',
+      clientVersion: '',
+      buildNumber: '',
+      hostname: '',
+      sfeVersion: '',
+      sfeClientType: '',
+      sdaVersion: '',
+      sdaBuildNumber: '',
+      electronVersion: '',
+      chromeVersion: '',
+      v8Version: '',
+      nodeVersion: '',
+      openSslVersion: '',
+      zlibVersion: '',
+      uvVersion: '',
+      aresVersion: '',
+      httpParserVersion: '',
+      swiftSearchVersion: '',
+      swiftSearchSupportedVersion: '',
     };
     this.updateState = this.updateState.bind(this);
   }
@@ -101,7 +103,7 @@ export default class AboutApp extends React.Component<{}, IState> {
     const symphonySectionItems = [
       {
         key: 'POD:',
-        value: `${hostname || 'N/A'}`,
+        value: `${hostname || ''}`,
       },
       {
         key: 'SBE:',
@@ -132,16 +134,7 @@ export default class AboutApp extends React.Component<{}, IState> {
               {i18n.t('Desktop Application', ABOUT_SYMPHONY_NAMESPACE)()}
             </span>
           </div>
-          <section>
-            <ul className='AboutApp-symphony-section'>
-              {symphonySectionItems.map((item, key) => (
-                <li key={key}>
-                  <strong>{item.key}</strong>
-                  <span>{item.value}</span>
-                </li>
-              ))}
-            </ul>
-          </section>
+          {sdaVersion ? this.renderVersions(symphonySectionItems) : null}
           <div className='AboutApp-copy-container'>
             <button
               className='AboutApp-copy-button'
@@ -167,6 +160,7 @@ export default class AboutApp extends React.Component<{}, IState> {
               onClick={this.eventHandlers.onClose}
               title={i18n.t('Close', ABOUT_SYMPHONY_NAMESPACE)()}
               data-testid={'CLOSE_BUTTON'}
+              ref={this.closeButtonRef}
             >
               {i18n.t('Close', ABOUT_SYMPHONY_NAMESPACE)()}
             </button>
@@ -183,6 +177,9 @@ export default class AboutApp extends React.Component<{}, IState> {
    * Callback to handle event when a component is mounted
    */
   public componentDidMount(): void {
+    setTimeout(() => {
+      this.closeButtonRef.current?.focus();
+    }, 0);
     ipcRenderer.on('about-app-data', this.updateState);
   }
 
@@ -224,4 +221,23 @@ export default class AboutApp extends React.Component<{}, IState> {
   private updateState(_event, data): void {
     this.setState(data as IState);
   }
+
+  /**
+   * Renders component versions
+   * @param symphonySectionItems
+   */
+  private renderVersions(symphonySectionItems): JSX.Element {
+    return (
+      <section>
+        <ul className='AboutApp-symphony-section'>
+          {symphonySectionItems.map((item, key) => (
+            <li key={key}>
+              <strong>{item.key}</strong>
+              <span>{item.value}</span>
+            </li>
+          ))}
+        </ul>
+      </section>
+    );
+  }
 }

src/renderer/styles/about-app.less

@@ -149,6 +149,12 @@ body {
       padding-right: 8px;
       color: @electricity-ui-30;
     }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px @blue inset;
+      border-radius: 4px;
+    }
   }
 
   &-close-container {

src/renderer/styles/theme.less

@@ -22,3 +22,4 @@
 @graphite-60: #52565e;
 
 @vanilla-white: #fff;
+@blue: #008eff;