fix: [M3-7605] - Wrong status indicator when provisioning a LKE

packages/manager/.changeset/pr-10320-fixed-1711553963315.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Wrong status indicator when provisioning a LKE ([#10320](https://github.com/linode/manager/pull/10320))

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodePool.tsx

@@ -2,16 +2,16 @@ import {
   AutoscaleSettings,
   PoolNodeResponse,
 } from '@linode/api-v4/lib/kubernetes';
-import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
+import { makeStyles } from 'tss-react/mui';
 
 import { Button } from 'src/components/Button/Button';
 import { Tooltip } from 'src/components/Tooltip';
 import { Typography } from 'src/components/Typography';
 
-import NodeTable from './NodeTable';
+import { NodeTable } from './NodeTable';
 
 interface Props {
   autoscaler: AutoscaleSettings;

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx

@@ -0,0 +1,128 @@
+import { APIError } from '@linode/api-v4/lib/types';
+import Grid from '@mui/material/Unstable_Grid2';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
+import { TableCell } from 'src/components/TableCell';
+import { Typography } from 'src/components/Typography';
+import { transitionText } from 'src/features/Linodes/transitions';
+import { useInProgressEvents } from 'src/queries/events/events';
+
+import NodeActionMenu from './NodeActionMenu';
+import { StyledCopyTooltip, StyledTableRow } from './NodeTable.styles';
+
+export interface NodeRow {
+  instanceId?: number;
+  instanceStatus?: string;
+  ip?: string;
+  label?: string;
+  nodeId: string;
+  nodeStatus: string;
+}
+
+interface NodeRowProps extends NodeRow {
+  linodeError?: APIError[];
+  openRecycleNodeDialog: (nodeID: string, linodeLabel: string) => void;
+  typeLabel: string;
+}
+
+export const NodeRow = React.memo((props: NodeRowProps) => {
+  const {
+    instanceId,
+    instanceStatus,
+    ip,
+    label,
+    linodeError,
+    nodeId,
+    nodeStatus,
+    openRecycleNodeDialog,
+    typeLabel,
+  } = props;
+
+  const { data: events } = useInProgressEvents();
+
+  const recentEvent = events?.find(
+    (event) =>
+      event.entity?.id === instanceId && event.entity?.type === 'linode'
+  );
+
+  const linodeLink = instanceId ? `/linodes/${instanceId}` : undefined;
+
+  const nodeReadyAndInstanceRunning =
+    nodeStatus === 'ready' && instanceStatus === 'running';
+
+  const iconStatus =
+    nodeStatus === 'not_ready'
+      ? 'other'
+      : nodeReadyAndInstanceRunning
+      ? 'active'
+      : 'inactive';
+
+  const displayLabel = label ?? typeLabel;
+
+  const displayStatus =
+    nodeStatus === 'not_ready'
+      ? 'Provisioning'
+      : transitionText(instanceStatus ?? '', instanceId ?? -1, recentEvent);
+
+  const displayIP = ip ?? '';
+
+  return (
+    <StyledTableRow ariaLabel={label} data-qa-node-row={nodeId}>
+      <TableCell>
+        <Grid alignItems="center" container wrap="nowrap">
+          <Grid>
+            <Typography>
+              {linodeLink ? (
+                <Link to={linodeLink}>{displayLabel}</Link>
+              ) : (
+                displayLabel
+              )}
+            </Typography>
+          </Grid>
+        </Grid>
+      </TableCell>
+      <TableCell statusCell={!linodeError}>
+        {linodeError ? (
+          <Typography
+            sx={(theme) => ({
+              color: theme.color.red,
+            })}
+          >
+            Error retrieving status
+          </Typography>
+        ) : (
+          <>
+            <StatusIcon status={iconStatus} />
+            {displayStatus}
+          </>
+        )}
+      </TableCell>
+      <TableCell>
+        {linodeError ? (
+          <Typography
+            sx={(theme) => ({
+              color: theme.color.red,
+            })}
+          >
+            Error retrieving IP
+          </Typography>
+        ) : displayIP.length > 0 ? (
+          <>
+            <CopyTooltip copyableText text={displayIP} />
+            <StyledCopyTooltip text={displayIP} />
+          </>
+        ) : null}
+      </TableCell>
+      <TableCell>
+        <NodeActionMenu
+          instanceLabel={label}
+          nodeId={nodeId}
+          openRecycleNodeDialog={openRecycleNodeDialog}
+        />
+      </TableCell>
+    </StyledTableRow>
+  );
+});

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeTable.styles.ts

@@ -0,0 +1,42 @@
+import { styled } from '@mui/material/styles';
+
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import { Table } from 'src/components/Table';
+import { TableRow } from 'src/components/TableRow';
+
+export const StyledTableRow = styled(TableRow, {
+  label: 'TableRow',
+})(({ theme }) => ({
+  '& svg': {
+    height: `12px`,
+    opacity: 0,
+    width: `12px`,
+  },
+  '&:hover': {
+    backgroundColor: theme.bg.lightBlue1,
+  },
+  [`&:hover .copy-tooltip > svg, & .copy-tooltip:focus > svg`]: {
+    opacity: 1,
+  },
+  marginLeft: 4,
+  top: 1,
+}));
+
+export const StyledTable = styled(Table, {
+  label: 'Table',
+})(({ theme }) => ({
+  borderLeft: `1px solid ${theme.borderColors.borderTable}`,
+  borderRight: `1px solid ${theme.borderColors.borderTable}`,
+}));
+
+export const StyledCopyTooltip = styled(CopyTooltip, {
+  label: 'CopyTooltip',
+})(() => ({
+  '& svg': {
+    height: `12px`,
+    opacity: 0,
+    width: `12px`,
+  },
+  marginLeft: 4,
+  top: 1,
+}));