Merge pull request mendersoftware#4053 from mzedel/men-6736

MEN-6736 - chore: made device name expand across all available space
michaelntech · Oct 2, 2023 · 05601b3 · 05601b3
2 parents d0572c3 + 0b2de32
commit 05601b3
Show file tree

Hide file tree

Showing 15 changed files with 502 additions and 420 deletions.
diff --git a/src/js/components/auditlogs/__snapshots__/auditlogs.test.js.snap b/src/js/components/auditlogs/__snapshots__/auditlogs.test.js.snap
@@ -509,7 +509,8 @@ exports[`Auditlogs Component renders correctly 1`] = `
             device
           </div>
           <div
-            class="flexbox space-between"
+            class="css-z9m6tn-container"
+            style="display: grid;"
           >
             <div>
               a1

diff --git a/src/js/components/auditlogs/__snapshots__/auditlogslist.test.js.snap b/src/js/components/auditlogs/__snapshots__/auditlogslist.test.js.snap
@@ -169,7 +169,8 @@ exports[`Auditlogs Component renders correctly 1`] = `
           device
         </div>
         <div
-          class="flexbox space-between"
+          class="css-z9m6tn-container"
+          style="display: grid;"
         >
           <div>
             a1

diff --git a/src/js/components/auditlogs/eventdetails/__snapshots__/deviceconfiguration.test.js.snap b/src/js/components/auditlogs/eventdetails/__snapshots__/deviceconfiguration.test.js.snap
@@ -17,6 +17,12 @@ exports[`DeviceConfiguration Component renders correctly 1`] = `
 }
 
 .emotion-3 {
+  grid-template-columns: 1fr max-content;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
+}
+
+.emotion-4 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -33,7 +39,7 @@ exports[`DeviceConfiguration Component renders correctly 1`] = `
   font-size: 1.1607rem;
 }
 
-.emotion-3 iconButton {
+.emotion-4 iconButton {
   margin-right: 8px;
 }
 
@@ -68,15 +74,16 @@ exports[`DeviceConfiguration Component renders correctly 1`] = `
           href="/devices?id=a1"
         >
           <div
-            class="flexbox space-between"
+            class="emotion-3"
+            style="display: grid;"
           >
             <div>
               a1
             </div>
           </div>
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-3"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-4"
             data-testid="LaunchIcon"
             focusable="false"
             viewBox="0 0 24 24"

diff --git a/src/js/components/auditlogs/eventdetails/__snapshots__/devicedetails.test.js.snap b/src/js/components/auditlogs/eventdetails/__snapshots__/devicedetails.test.js.snap
@@ -17,6 +17,12 @@ exports[`DeviceDetails Component renders correctly 1`] = `
 }
 
 .emotion-3 {
+  grid-template-columns: 1fr max-content;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
+}
+
+.emotion-4 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -33,7 +39,7 @@ exports[`DeviceDetails Component renders correctly 1`] = `
   font-size: 1.1607rem;
 }
 
-.emotion-3 iconButton {
+.emotion-4 iconButton {
   margin-right: 8px;
 }
 
@@ -64,15 +70,16 @@ exports[`DeviceDetails Component renders correctly 1`] = `
         href="/devices?id=a1"
       >
         <div
-          class="flexbox space-between"
+          class="emotion-3"
+          style="display: grid;"
         >
           <div>
             a1
           </div>
         </div>
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-3"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-4"
           data-testid="LaunchIcon"
           focusable="false"
           viewBox="0 0 24 24"

diff --git a/src/js/components/auditlogs/eventdetails/__snapshots__/filetransfer.test.js.snap b/src/js/components/auditlogs/eventdetails/__snapshots__/filetransfer.test.js.snap
@@ -17,6 +17,12 @@ exports[`FileTransfer Component renders correctly 1`] = `
 }
 
 .emotion-3 {
+  grid-template-columns: 1fr max-content;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
+}
+
+.emotion-4 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -33,7 +39,7 @@ exports[`FileTransfer Component renders correctly 1`] = `
   font-size: 1.1607rem;
 }
 
-.emotion-3 iconButton {
+.emotion-4 iconButton {
   margin-right: 8px;
 }
 
@@ -68,15 +74,16 @@ exports[`FileTransfer Component renders correctly 1`] = `
           href="/devices?id=a1"
         >
           <div
-            class="flexbox space-between"
+            class="emotion-3"
+            style="display: grid;"
           >
             <div>
               a1
             </div>
           </div>
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-3"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-4"
             data-testid="LaunchIcon"
             focusable="false"
             viewBox="0 0 24 24"

diff --git a/src/js/components/auditlogs/eventdetails/__snapshots__/portforward.test.js.snap b/src/js/components/auditlogs/eventdetails/__snapshots__/portforward.test.js.snap
@@ -17,6 +17,12 @@ exports[`PortForward Component renders correctly 1`] = `
 }
 
 .emotion-3 {
+  grid-template-columns: 1fr max-content;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
+}
+
+.emotion-4 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -33,7 +39,7 @@ exports[`PortForward Component renders correctly 1`] = `
   font-size: 1.1607rem;
 }
 
-.emotion-3 iconButton {
+.emotion-4 iconButton {
   margin-right: 8px;
 }
 
@@ -68,15 +74,16 @@ exports[`PortForward Component renders correctly 1`] = `
           href="/devices?id=a1"
         >
           <div
-            class="flexbox space-between"
+            class="emotion-3"
+            style="display: grid;"
           >
             <div>
               a1
             </div>
           </div>
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-3"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-4"
             data-testid="LaunchIcon"
             focusable="false"
             viewBox="0 0 24 24"

diff --git a/src/js/components/auditlogs/eventdetails/__snapshots__/terminalsession.test.js.snap b/src/js/components/auditlogs/eventdetails/__snapshots__/terminalsession.test.js.snap
@@ -173,6 +173,12 @@ exports[`TerminalSession Component renders correctly 1`] = `
 }
 
 .emotion-15 {
+  grid-template-columns: 1fr max-content;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
+}
+
+.emotion-16 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -189,7 +195,7 @@ exports[`TerminalSession Component renders correctly 1`] = `
   font-size: 1.1607rem;
 }
 
-.emotion-15 iconButton {
+.emotion-16 iconButton {
   margin-right: 8px;
 }
 
@@ -401,15 +407,16 @@ exports[`TerminalSession Component renders correctly 1`] = `
             href="/devices?id=a1"
           >
             <div
-              class="flexbox space-between"
+              class="emotion-15"
+              style="display: grid;"
             >
               <div>
                 a1
               </div>
             </div>
             <svg
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-15"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall margin-left-small link-color emotion-16"
               data-testid="LaunchIcon"
               focusable="false"
               viewBox="0 0 24 24"

diff --git a/src/js/components/common/__snapshots__/deviceidentity.test.js.snap b/src/js/components/common/__snapshots__/deviceidentity.test.js.snap
@@ -1,8 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DeviceIdentityDisplay Component renders correctly 1`] = `
+.emotion-0 {
+  grid-template-columns: 1fr max-content;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
+}
+
 <div
-  class="flexbox space-between"
+  class="emotion-0"
+  style="display: grid;"
 >
   <div>
     dc:a6:32:12:ad:bf

diff --git a/src/js/components/common/deviceidentity.js b/src/js/components/common/deviceidentity.js
@@ -24,6 +24,10 @@ import { getDeviceIdentityText } from '../devices/base-devices';
 import DeviceNameInput from './devicenameinput';
 
 const useStyles = makeStyles()(theme => ({
+  container: {
+    gridTemplateColumns: '1fr max-content',
+    columnGap: theme.spacing()
+  },
   gatewayIcon: {
     color: theme.palette.grey[400],
     width: 'max-content',
@@ -62,9 +66,10 @@ export const DeviceIdentityDisplay = props => {
     [attributes.mender_is_gateway, attributes.mender_gateway_system_id]
   );
   return (
-    <div className="flexbox space-between">
+    // due to the specificity of the deviceListRow child class, applying the display styling through the container class doesn't work, thus the inline style in addition here
+    <div className={classes.container} style={{ display: 'grid' }}>
       <Component {...props} value={idValue} />
-      {hasAdornment && EndAdornment && <EndAdornment className={`${classes.gatewayIcon}`} />}
+      {hasAdornment && EndAdornment && <EndAdornment className={classes.gatewayIcon} />}
     </div>
   );
 };

diff --git a/src/js/components/common/devicenameinput.js b/src/js/components/common/devicenameinput.js
@@ -11,7 +11,7 @@
 //    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 //    See the License for the specific language governing permissions and
 //    limitations under the License.
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 // material ui
@@ -35,6 +35,7 @@ export const DeviceNameInput = ({ device, isHovered }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [value, setValue] = useState('');
   const { classes } = useStyles();
+  const inputRef = useRef();
 
   const dispatch = useDispatch();
 
@@ -47,6 +48,13 @@ export const DeviceNameInput = ({ device, isHovered }) => {
     }
   }, [device, isEditing, name, value]);
 
+  useEffect(() => {
+    if (!isEditing || !inputRef.current) {
+      return;
+    }
+    inputRef.current.focus();
+  }, [isEditing]);
+
   const onSubmit = () => dispatch(setDeviceTags(id, { ...tags, name: value })).then(() => setIsEditing(false));
 
   const onCancel = () => {
@@ -66,6 +74,7 @@ export const DeviceNameInput = ({ device, isHovered }) => {
       id={`${device.id}-id-input`}
       className={classes.input}
       disabled={!isEditing}
+      inputRef={inputRef}
       value={value}
       placeholder={`${id.substring(0, 6)}...`}
       onClick={onInputClick}

diff --git a/src/js/components/deployments/__snapshots__/report.test.js.snap b/src/js/components/deployments/__snapshots__/report.test.js.snap
@@ -509,7 +509,8 @@ Devices that are in the middle of the deployment at the time of abort will finis
                   style="font-weight: initial; opacity: 1;"
                 >
                   <div
-                    class="flexbox space-between"
+                    class="css-z9m6tn-container"
+                    style="display: grid;"
                   >
                     <div>
                       a1

diff --git a/src/js/components/devices/__snapshots__/device-groups.test.js.snap b/src/js/components/devices/__snapshots__/device-groups.test.js.snap
@@ -582,7 +582,8 @@ exports[`DeviceGroups Component renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="flexbox space-between"
+                class="css-z9m6tn-container"
+                style="display: grid;"
               >
                 <div>
                   a1
@@ -650,7 +651,8 @@ exports[`DeviceGroups Component renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="flexbox space-between"
+                class="css-z9m6tn-container"
+                style="display: grid;"
               >
                 <div>
                   b1

diff --git a/src/js/components/devices/__snapshots__/devicelistitem.test.js.snap b/src/js/components/devices/__snapshots__/devicelistitem.test.js.snap
@@ -121,6 +121,12 @@ exports[`DeviceListItem Component renders correctly 1`] = `
   border-radius: inherit;
 }
 
+.emotion-4 {
+  grid-template-columns: 1fr max-content;
+  -webkit-column-gap: 8px;
+  column-gap: 8px;
+}
+
 <div
   class="deviceListRow deviceListItem clickable  "
 >
@@ -150,7 +156,8 @@ exports[`DeviceListItem Component renders correctly 1`] = `
     </span>
   </div>
   <div
-    class="flexbox space-between"
+    class="emotion-4"
+    style="display: grid;"
   >
     <div>
       1