CEC-4572 tweak digital twin display and form (#362)

* CEC-4572 tweak form

* update snapshots

* Clean up

* Hide DTC tab

src/components/Cars/Status/Details/index.jsx

@@ -1,4 +1,4 @@
-import { Grid, Tooltip, Checkbox, FormControlLabel } from "@material-ui/core";
+import { Checkbox, FormControlLabel, Grid, Tooltip } from "@material-ui/core";
 import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
 import UploadIcon from '@mui/icons-material/Upload';
@@ -114,23 +114,26 @@ const MainForm = ({ vin }) => {
           <p>
             <b>Info Source</b>: {vehicle.info_source}
           </p>
-          {vehicle.log_level != null && (
+          <p>
+            <b>Tags</b>: {vehicle.tags ? vehicle.tags.join(", ") : "none" }
+          </p>
+        </Grid>
+        <Grid item md={12} className={classes.textCenterAlign}>
+        {vehicle.log_level != null && (
             <p>
               <b>Log Level</b>: {vehicle.log_level}
             </p>
           )}
-        </Grid>
         {vehicle.canbus && (
-          <Grid item md={12} className={classes.textCenterAlign}>
-            <b>CANBus</b>
+          <>
             <p>
-              <b>Enabled</b>: {vehicle.canbus.enabled.toString()}
+              <b>CANBus Enabled</b>: {vehicle.canbus.enabled.toString()}
             </p>
             <p>
               <b>Max Memory Buffer Size</b>: {vehicle.canbus.max_mem_buffer_size ?? "Default"}
             </p>
             <p>
-              <b>Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}
+              <b>Data Logger Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}
             </p>
             <p>
               <b>Max Disk Buffer Size</b>: {vehicle.canbus.max_disk_buffer_size ?? "Default"}
@@ -138,19 +141,40 @@ const MainForm = ({ vin }) => {
             <p>
               <b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length : 0}
             </p>
-          </Grid>
+            <p>
+              <b>DTC Enabled</b>: { (vehicle.canbus.dtc_enabled || false).toString() }
+            </p>
+          </>
         )}
+          </Grid>
         {showDebugMask && (
           <Grid item md={12} className={classes.textCenterAlign}>
             <p>
-              <b>DebugMask</b>: {vehicle.debug_mask}
+              <b>Debug Mask</b>: {vehicle.debug_mask}
             </p>
           </Grid>
         )}
         <Grid item md={12} className={classes.textCenterAlign}>
-          <p>
-            <b>Tags</b>: {vehicle.tags}
-          </p>
+          <RoleWrap
+              groups={groups}
+              providers={providers}
+              rolesPerProvider={Permissions.FiskerCreate}
+            >
+            <FormControlLabel
+                  label="Force Config Update"
+                  control={
+                    <Checkbox
+                      checked={forced}
+                      onChange={onForcedChange}
+                    />
+                  }
+                />
+            <Tooltip key={`push-config-${vin}`} title={`Push Config Update to "${vin}"`}>
+              <Link to="#" onClick={() => setShowUploadConfigModal(true)}  >
+                <UploadIcon aria-label={`Push Config Update to "${vin}"`} fontSize="large" />
+              </Link>
+            </Tooltip>
+          </RoleWrap>
         </Grid>
         <Grid item md={12} className={classes.textCenterAlign}>
           <RoleWrap
@@ -160,31 +184,10 @@ const MainForm = ({ vin }) => {
           >
             <Tooltip key={`update-${vin}`} title={`Update "${vin}"`}>
               <Link to={`/vehicle-update?vin=${vin}`} style={{ margin: 5 }}>
-                <EditIcon aria-label={`Update "${vin}"`} />
+                <EditIcon aria-label={`Update "${vin}"`} fontSize="large" />
               </Link>
             </Tooltip>
           </RoleWrap>
-          <RoleWrap
-            groups={groups}
-            providers={providers}
-            rolesPerProvider={Permissions.FiskerCreate}
-          >
-            <FormControlLabel
-                  label="FORCE CONFIG PUSH"
-                  control={
-                    <Checkbox
-                      checked={forced}
-                      onChange={onForcedChange}
-                    />
-                  }
-                />
-            <Tooltip key={`push-config-${vin}`} title={`Push Config "${vin}"`}>
-              <Link to="#" onClick={() => setShowUploadConfigModal(true)}>
-                <UploadIcon aria-label={`Push Config "${vin}"`} />
-              </Link>
-            </Tooltip>
-          </RoleWrap>
-
           <RoleWrap
             groups={groups}
             providers={providers}
@@ -192,7 +195,7 @@ const MainForm = ({ vin }) => {
           >
             <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
               <Link to="#" onClick={() => setShowDeleteModal(true)}>
-                <DeleteIcon aria-label={`Delete "${vin}"`} />
+                <DeleteIcon aria-label={`Delete "${vin}"`} fontSize="large" />
               </Link>
             </Tooltip>
           </RoleWrap>