coder/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx

import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import type { FC } from "react";
import type { Region } from "api/typesGenerated";
import { ErrorAlert } from "components/Alert/ErrorAlert";
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
import { Stack } from "components/Stack/Stack";
import { TableEmpty } from "components/TableEmpty/TableEmpty";
import { TableLoader } from "components/TableLoader/TableLoader";
import type { ProxyLatencyReport } from "contexts/useProxyLatency";
import { ProxyRow } from "./WorkspaceProxyRow";

export interface WorkspaceProxyViewProps {
  proxies?: readonly Region[];
  proxyLatencies?: Record<string, ProxyLatencyReport>;
  getWorkspaceProxiesError?: unknown;
  isLoading: boolean;
  hasLoaded: boolean;
  preferredProxy?: Region;
  selectProxyError?: unknown;
}

export const WorkspaceProxyView: FC<WorkspaceProxyViewProps> = ({
  proxies,
  proxyLatencies,
  getWorkspaceProxiesError,
  isLoading,
  hasLoaded,
  selectProxyError,
}) => {
  return (
    <Stack>
      {Boolean(getWorkspaceProxiesError) && (
        <ErrorAlert error={getWorkspaceProxiesError} />
      )}
      {Boolean(selectProxyError) && <ErrorAlert error={selectProxyError} />}
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell width="40%">Proxy</TableCell>
              <TableCell width="30%">URL</TableCell>
              <TableCell width="10%">Status</TableCell>
              <TableCell width="20%" css={{ textAlign: "right" }}>
                Latency
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <ChooseOne>
              <Cond condition={isLoading}>
                <TableLoader />
              </Cond>
              <Cond condition={hasLoaded && proxies?.length === 0}>
                <TableEmpty message="No workspace proxies found" />
              </Cond>
              <Cond>
                {proxies?.map((proxy) => (
                  <ProxyRow
                    latency={proxyLatencies?.[proxy.id]}
                    key={proxy.id}
                    proxy={proxy}
                  />
                ))}
              </Cond>
            </ChooseOne>
          </TableBody>
        </Table>
      </TableContainer>
    </Stack>
  );
};