refine: update style of environment variables in launcher offcanvas (#3672)

Author: leafty

client/src/features/sessionsV2/SessionView/EnvVariablesCard.tsx

@@ -17,7 +17,7 @@
  */
 
 import cx from "classnames";
-import { Card, CardBody, Col, Row, Table } from "reactstrap";
+import { Col, ListGroup, ListGroupItem, Row } from "reactstrap";
 
 import type { SessionLauncher } from "../api/sessionLaunchersV2.api";
 
@@ -35,49 +35,23 @@ export default function EnvVariablesCard({
   }
 
   return (
-    <Card data-cy="env-variables-card" className={cx("border")}>
-      <CardBody className={cx("d-flex", "flex-column")}>
-        <Row>
-          <Col
-            xs={12}
-            className={cx(
-              "d-flex",
-              "flex-wrap",
-              "flex-sm-nowrap",
-              "align-items-start",
-              "justify-content-between",
-              "pb-2",
-              "gap-2"
-            )}
-          >
-            <Table size="sm">
-              <tbody>
-                {envVariables.map((env) => (
-                  <EnvVariableRow
-                    key={env.name}
-                    env={env.name}
-                    value={env.value}
-                  />
-                ))}
-              </tbody>
-            </Table>
-          </Col>
-        </Row>
-      </CardBody>
-    </Card>
-  );
-}
-
-interface EnvRowParameterProps {
-  env: string;
-  value: string | null | undefined;
-}
-
-function EnvVariableRow({ env, value }: EnvRowParameterProps) {
-  return (
-    <tr>
-      <th scope="row">{env}</th>
-      <td>{value ?? ""}</td>
-    </tr>
+    <ListGroup data-cy="env-variables-card">
+      {envVariables.map(({ name, value }) => (
+        <ListGroupItem key={`env-var-${name}`}>
+          <Row data-cy="env-var-row">
+            <Col
+              xs={6}
+              className={cx("fw-bold", "text-break")}
+              data-cy="env-var-name"
+            >
+              {name}
+            </Col>
+            <Col xs={6} className="text-break" data-cy="env-var-value">
+              {value ?? ""}
+            </Col>
+          </Row>
+        </ListGroupItem>
+      ))}
+    </ListGroup>
   );
 }

client/src/features/sessionsV2/SessionView/SessionView.tsx

@@ -19,6 +19,7 @@ import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { ReactNode, useCallback, useMemo, useState } from "react";
 import {
+  Braces,
   CircleFill,
   Clock,
   Database,
@@ -559,8 +560,18 @@ export function SessionView({
           )}
           {launcher && (
             <div>
-              <div className={cx("d-flex", "justify-content-between", "mb-2")}>
-                <h4 className="my-auto">Environment Variables</h4>
+              <div
+                className={cx(
+                  "d-flex",
+                  "align-items-center",
+                  "justify-content-between",
+                  "mb-2"
+                )}
+              >
+                <h4 className={cx("mb-0", "me-2")}>
+                  <Braces className={cx("me-1", "bi")} />
+                  Environment Variables
+                </h4>
                 <PermissionsGuard
                   disabled={null}
                   enabled={

tests/cypress/e2e/projectV2setup.spec.ts

@@ -201,11 +201,14 @@ describe("Set up project components", () => {
     cy.wait("@sessionLaunchers");
     // check session launcher view and edit session launcher
     cy.getDataCy("session-name").click();
-    cy.getDataCy("env-variables-card").within(() => {
-      cy.get("tr").should("have.length", 2);
-      cy.get("tr").first().should("contain.text", "VAR_1");
-      cy.get("tr").last().should("contain.text", "VAR_2");
-    });
+    cy.getDataCy("env-variables-card")
+      .scrollIntoView()
+      .should("be.visible")
+      .within(() => {
+        cy.getDataCy("env-var-row").should("have.length", 2);
+        cy.getDataCy("env-var-name").first().should("contain.text", "VAR_1");
+        cy.getDataCy("env-var-name").last().should("contain.text", "VAR_2");
+      });
     cy.get("#modify-env-variables-button").click();
     // TEST bad input
     cy.getDataCy("env-variables-input_0-name").clear().type("RENKU VALUE");
@@ -283,11 +286,14 @@ describe("Set up project components", () => {
     cy.wait("@sessionLaunchers");
     // check session launcher view and edit session launcher
     cy.getDataCy("session-name").click();
-    cy.getDataCy("env-variables-card").within(() => {
-      cy.get("tr").should("have.length", 2);
-      cy.get("tr").first().should("contain.text", "VAR_1");
-      cy.get("tr").last().should("contain.text", "VAR_2");
-    });
+    cy.getDataCy("env-variables-card")
+      .scrollIntoView()
+      .should("be.visible")
+      .within(() => {
+        cy.getDataCy("env-var-row").should("have.length", 2);
+        cy.getDataCy("env-var-name").first().should("contain.text", "VAR_1");
+        cy.getDataCy("env-var-name").last().should("contain.text", "VAR_2");
+      });
     cy.get("#modify-env-variables-button").click();
     // TEST bad input
     cy.getDataCy("env-variables-input_0-name").clear().type("RENKU VALUE");