From c3d6ca0ed89c13efc3b3f51cbf741746eddeded2 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Wed, 11 Aug 2021 12:19:21 -0400
Subject: [PATCH] fix(front-end): change functionality when the server panel is
 in edit mode

---
 striker-ui/.eslintrc.json         |   2 +-
 striker-ui/components/Servers.tsx | 145 +++++++++++++++---------------
 2 files changed, 72 insertions(+), 75 deletions(-)

diff --git a/striker-ui/.eslintrc.json b/striker-ui/.eslintrc.json
index 05e088ce..cc399a86 100644
--- a/striker-ui/.eslintrc.json
+++ b/striker-ui/.eslintrc.json
@@ -36,7 +36,7 @@
     "sourceType": "module"
   },
   "rules": {
-    "complexity": ["error", 5],
+    "complexity": ["error", 6],
     "import/extensions": [
       "error",
       "ignorePackages",
diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx
index 4ffd8ee1..c1fa6021 100644
--- a/striker-ui/components/Servers.tsx
+++ b/striker-ui/components/Servers.tsx
@@ -248,84 +248,81 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
       {!isLoading ? (
         <Box className={classes.root}>
           <List component="nav">
-            {data &&
-              data.servers.map((server: AnvilServer) => {
-                return (
-                  <>
-                    <ListItem
-                      button
-                      className={classes.button}
-                      key={server.server_uuid}
-                      component="a"
-                      href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`}
-                    >
-                      <Box display="flex" flexDirection="row" width="100%">
-                        {showCheckbox && (
-                          <Box className={classes.checkbox}>
-                            <Checkbox
-                              style={{ color: TEXT }}
-                              color="secondary"
-                              checked={
-                                selected.find(
-                                  (s) => s === server.server_uuid,
-                                ) !== undefined
-                              }
-                              onChange={() => handleChange(server.server_uuid)}
-                            />
-                          </Box>
-                        )}
-                        <Box p={1}>
-                          <Decorator
-                            colour={selectDecorator(server.server_state)}
-                          />
-                        </Box>
-                        <Box p={1} flexGrow={1}>
-                          <BodyText text={server.server_name} />
-                          <BodyText
-                            text={
-                              serverState.get(server.server_state) ||
-                              'Not Available'
+            {data?.servers.map((server: AnvilServer) => {
+              return (
+                <>
+                  <ListItem
+                    button
+                    className={classes.button}
+                    key={server.server_uuid}
+                    component={showCheckbox ? 'div' : 'a'}
+                    href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`}
+                    onClick={() => handleChange(server.server_uuid)}
+                  >
+                    <Box display="flex" flexDirection="row" width="100%">
+                      {showCheckbox && (
+                        <Box className={classes.checkbox}>
+                          <Checkbox
+                            style={{ color: TEXT }}
+                            color="secondary"
+                            checked={
+                              selected.find((s) => s === server.server_uuid) !==
+                              undefined
                             }
                           />
                         </Box>
-                        <Box display="flex" className={classes.hostsBox}>
-                          {server.server_state !== 'shut off' &&
-                            server.server_state !== 'crashed' &&
-                            filteredHosts.map(
-                              (
-                                host: AnvilStatusHost,
-                                index: number,
-                              ): JSX.Element => (
-                                <>
-                                  <Box
-                                    p={1}
-                                    key={host.host_uuid}
-                                    className={classes.hostBox}
-                                  >
-                                    <BodyText
-                                      text={host.host_name}
-                                      selected={
-                                        server.server_host_uuid ===
-                                        host.host_uuid
-                                      }
-                                    />
-                                  </Box>
-                                  {index !== filteredHosts.length - 1 && (
-                                    <Divider
-                                      className={`${classes.divider} ${classes.verticalDivider}`}
-                                      orientation="vertical"
-                                    />
-                                  )}
-                                </>
-                              ),
-                            )}
-                        </Box>
+                      )}
+                      <Box p={1}>
+                        <Decorator
+                          colour={selectDecorator(server.server_state)}
+                        />
+                      </Box>
+                      <Box p={1} flexGrow={1}>
+                        <BodyText text={server.server_name} />
+                        <BodyText
+                          text={
+                            serverState.get(server.server_state) ||
+                            'Not Available'
+                          }
+                        />
+                      </Box>
+                      <Box display="flex" className={classes.hostsBox}>
+                        {server.server_state !== 'shut off' &&
+                          server.server_state !== 'crashed' &&
+                          filteredHosts.map(
+                            (
+                              host: AnvilStatusHost,
+                              index: number,
+                            ): JSX.Element => (
+                              <>
+                                <Box
+                                  p={1}
+                                  key={host.host_uuid}
+                                  className={classes.hostBox}
+                                >
+                                  <BodyText
+                                    text={host.host_name}
+                                    selected={
+                                      server.server_host_uuid === host.host_uuid
+                                    }
+                                  />
+                                </Box>
+                                {index !== filteredHosts.length - 1 && (
+                                  <Divider
+                                    className={`${classes.divider} ${classes.verticalDivider}`}
+                                    orientation="vertical"
+                                  />
+                                )}
+                              </>
+                            ),
+                          )}
                       </Box>
-                    </ListItem>
-                    <Divider className={classes.divider} />
-                  </>
-                );
-              })}
+                    </Box>
+                  </ListItem>
+                  <Divider className={classes.divider} />
+                </>
+              );
+            })}
           </List>
         </Box>
       ) : (