Address code review feedback: use deterministic ordering and proper styling

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

app/src/actions/migrations/Connection.ts

@@ -75,11 +75,8 @@ let migrations: Migration[] = [
       if (connection.order !== undefined) {
         return connection
       }
-      // Use a timestamp-based order for existing connections
-      return {
-        ...connection,
-        order: Date.now() + Math.random(),
-      }
+      // Order will be assigned during migration based on current position
+      return connection
     },
   },
 ]
@@ -94,8 +91,14 @@ function isMigrationNecessary(connections: ConnectionDictionary): boolean {
 
 function applyMigrations(connections: ConnectionDictionary): ConnectionDictionary {
   let newConnectionDictionary: ConnectionDictionary = {}
-  Object.keys(connections).forEach(key => {
+  const connectionKeys = Object.keys(connections)
+  
+  connectionKeys.forEach((key, index) => {
     let newConnection = connectionMigrator.applyMigrations(connections[key]) as any
+    // If the migration didn't assign an order, assign one based on current position
+    if (newConnection.order === undefined) {
+      newConnection.order = index
+    }
     newConnectionDictionary[newConnection.id] = newConnection
   })
 

app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx

@@ -41,22 +41,22 @@ const ConnectionItem = (props: Props) => {
     <ListItem
       button={true}
       selected={props.selected}
-      style={{ display: 'flex', alignItems: 'center', padding: '8px 8px 8px 16px' }}
+      className={props.classes.itemContainer}
       onClick={() => props.actions.connectionManager.selectConnection(props.connection.id)}
       onDoubleClick={() => {
         props.actions.connectionManager.selectConnection(props.connection.id)
         connect()
       }}
     >
-      <Box style={{ flex: 1, overflow: 'hidden' }}>
+      <Box className={props.classes.textContainer}>
         <Typography className={props.classes.name}>{props.connection.name || 'mqtt broker'}</Typography>
         <Typography className={props.classes.details}>{connection && connection.url}</Typography>
       </Box>
-      <Box style={{ display: 'flex', flexDirection: 'column', marginLeft: '4px' }}>
-        <IconButton size="small" onClick={handleMoveUp} style={{ padding: '2px' }}>
+      <Box className={props.classes.buttonContainer}>
+        <IconButton size="small" onClick={handleMoveUp} className={props.classes.arrowButton}>
           <ArrowUpward fontSize="small" />
         </IconButton>
-        <IconButton size="small" onClick={handleMoveDown} style={{ padding: '2px' }}>
+        <IconButton size="small" onClick={handleMoveDown} className={props.classes.arrowButton}>
           <ArrowDownward fontSize="small" />
         </IconButton>
       </Box>
@@ -87,6 +87,23 @@ export const connectionItemStyle = (theme: Theme) => ({
     color: theme.palette.text.secondary,
     fontSize: '0.7em',
   },
+  itemContainer: {
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+    padding: '8px 8px 8px 16px',
+  },
+  textContainer: {
+    flex: 1,
+    overflow: 'hidden' as 'hidden',
+  },
+  buttonContainer: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+    marginLeft: '4px',
+  },
+  arrowButton: {
+    padding: '2px',
+  },
 })
 
 export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem) as any)