Upgrade table again

evergreen-ci · Sep 5, 2023 · 17a5aea · 17a5aea
1 parent 5cd46ae
commit 17a5aea
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 65 deletions.
diff --git a/package.json b/package.json
@@ -92,7 +92,7 @@
     "@leafygreen-ui/select": "10.2.0",
     "@leafygreen-ui/side-nav": "13.0.2",
     "@leafygreen-ui/table": "10.0.1",
-    "@leafygreen-ui/table/new": "npm:@leafygreen-ui/[email protected].7",
+    "@leafygreen-ui/table/new": "npm:@leafygreen-ui/[email protected].10",
     "@leafygreen-ui/tabs": "11.0.4",
     "@leafygreen-ui/text-area": "8.0.4",
     "@leafygreen-ui/text-input": "12.1.0",

diff --git a/src/components/Settings/EventLog/EventDiffTable.tsx b/src/components/Settings/EventLog/EventDiffTable.tsx
@@ -1,6 +1,13 @@
 import styled from "@emotion/styled";
 import Badge, { Variant } from "@leafygreen-ui/badge";
-import { Table, TableHeader, Row, Cell } from "@leafygreen-ui/table";
+import {
+  V10Table as Table,
+  V10TableHeader as TableHeader,
+  V10Row as Row,
+  V10Cell as Cell,
+  V11Adapter,
+  V10HeaderRow as HeaderRow,
+} from "@leafygreen-ui/table/new";
 import { fontFamilies } from "@leafygreen-ui/tokens";
 import { getEventDiffLines } from "./EventLogDiffs";
 import { Event, EventDiffLine, EventValue } from "./types";
@@ -11,45 +18,49 @@ type TableProps = {
 };
 
 export const EventDiffTable: React.FC<TableProps> = ({ after, before }) => (
-  <Table
-    data={getEventDiffLines(before, after)}
-    data-cy="event-diff-table"
-    columns={[
-      <TableHeader
-        key="key"
-        label="Property"
-        sortBy={(datum: EventDiffLine) => datum.key}
-      />,
-      <TableHeader
-        key="before"
-        label="Before"
-        sortBy={(datum: EventDiffLine) => JSON.stringify(datum.before)}
-      />,
-      <TableHeader
-        key="after"
-        label="After"
-        sortBy={(datum: EventDiffLine) => JSON.stringify(datum.after)}
-      />,
-    ]}
-  >
-    {({ datum }) => (
-      <Row key={datum.key} data-cy="event-log-table-row">
-        <Cell>
-          <CellText>{datum.key}</CellText>
-        </Cell>
-        <Cell>
-          <CellText>{renderEventValue(datum.before)}</CellText>
-        </Cell>
-        <Cell>
-          {renderEventValue(datum.after) === null ? (
-            <Badge variant={Variant.Red}>Deleted</Badge>
-          ) : (
-            <CellText>{renderEventValue(datum.after)}</CellText>
-          )}
-        </Cell>
-      </Row>
-    )}
-  </Table>
+  <V11Adapter shouldAlternateRowColor>
+    <Table
+      data={getEventDiffLines(before, after)}
+      data-cy="event-diff-table"
+      columns={
+        <HeaderRow>
+          <TableHeader
+            key="key"
+            label="Property"
+            sortBy={(datum: EventDiffLine) => datum.key}
+          />
+          <TableHeader
+            key="before"
+            label="Before"
+            sortBy={(datum: EventDiffLine) => JSON.stringify(datum.before)}
+          />
+          <TableHeader
+            key="after"
+            label="After"
+            sortBy={(datum: EventDiffLine) => JSON.stringify(datum.after)}
+          />
+        </HeaderRow>
+      }
+    >
+      {({ datum }) => (
+        <Row key={datum.key} data-cy="event-log-table-row">
+          <Cell>
+            <CellText>{datum.key}</CellText>
+          </Cell>
+          <Cell>
+            <CellText>{renderEventValue(datum.before)}</CellText>
+          </Cell>
+          <Cell>
+            {renderEventValue(datum.after) === null ? (
+              <Badge variant={Variant.Red}>Deleted</Badge>
+            ) : (
+              <CellText>{renderEventValue(datum.after)}</CellText>
+            )}
+          </Cell>
+        </Row>
+      )}
+    </Table>
+  </V11Adapter>
 );
 
 const CellText = styled.span`

diff --git a/src/pages/container/EventsTable/index.tsx b/src/pages/container/EventsTable/index.tsx
@@ -46,7 +46,7 @@ const EventsTable: React.FC<{}> = () => {
     },
   });
 
-  const { eventLogEntries, count } = useMemo(
+  const { count, eventLogEntries } = useMemo(
     () => podEventsData?.pod.events ?? { eventLogEntries: [], count: 0 },
     [podEventsData?.pod?.events]
   );

diff --git a/yarn.lock b/yarn.lock
@@ -2936,6 +2936,15 @@
     "@leafygreen-ui/hooks" "^7.7.8"
     "@leafygreen-ui/lib" "^10.4.3"
 
+"@leafygreen-ui/a11y@^1.4.8", "@leafygreen-ui/a11y@^1.4.9":
+  version "1.4.9"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/a11y/-/a11y-1.4.9.tgz#e85a395ba85974b02b6224cf2063e833c29001e1"
+  integrity sha512-VHg/mqJ9VUSOvwnceA0dkLR2DUZbaTygZs5kBqn5f+55SmKDyksST3ecILygvVldETLFFYnQSOFWIA7h3kWWVQ==
+  dependencies:
+    "@leafygreen-ui/emotion" "^4.0.7"
+    "@leafygreen-ui/hooks" "^8.0.0"
+    "@leafygreen-ui/lib" "^11.0.0"
+
 "@leafygreen-ui/[email protected]":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/badge/-/badge-8.0.2.tgz#2928d5a3877644b83f7459a008c03361cb2c744b"
@@ -2969,6 +2978,11 @@
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/box/-/box-3.1.7.tgz#830150ed836cd941cfb2787264a3d1c16f1fe648"
   integrity sha512-7uW6pxJaxKES8/ijQOcNSL0HpRAiBfaBdFamUAP+TaU9vvllG4cnzZlAfLdNKTWufJy5uWp7eNoE//7KPFLj+w==
 
+"@leafygreen-ui/box@^3.1.8":
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/box/-/box-3.1.8.tgz#33e6dedbe3ee510ce88ffade0a3a9e68a96103a9"
+  integrity sha512-qfjwhrie+mUrS2H+Qp98iQKBPoZtNpFmlGBYgg59sVOzotFvyvqwxlf/JcaNGo+v7nyOhC2XAHui0ywf9cScKw==
+
 "@leafygreen-ui/[email protected]":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/button/-/button-21.0.0.tgz#cd3cf92535251fe19952ab202952cc219b1e34fb"
@@ -3084,19 +3098,19 @@
     "@leafygreen-ui/typography" "^16.0.0"
     react-transition-group "^4.4.1"
 
-"@leafygreen-ui/checkbox@^12.0.15":
-  version "12.0.15"
-  resolved "https://registry.yarnpkg.com/@leafygreen-ui/checkbox/-/checkbox-12.0.15.tgz#288c8c49a8de7afce5c3d7985e6f33e3f909c734"
-  integrity sha512-k3csx6dgiiQzX3MymsEiCYFNGz+irYryifXgZ76BGsBliZqr55F+AgfBR20jtZyp7P/Iipr6Kg12rPAMGKsHLg==
+"@leafygreen-ui/checkbox@^12.0.18":
+  version "12.0.18"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/checkbox/-/checkbox-12.0.18.tgz#13e5166235113db1731d70c4e01231ece726460f"
+  integrity sha512-y9ikeNodJeKvqJ+Y0HYMAe8zw4wgdhsbEd56CqkEjsalu5dAsghYLw3EUBzy0vcTZOVyB9jrq3lU7JIeUdPMCg==
   dependencies:
-    "@leafygreen-ui/a11y" "^1.4.7"
+    "@leafygreen-ui/a11y" "^1.4.9"
     "@leafygreen-ui/emotion" "^4.0.7"
-    "@leafygreen-ui/hooks" "^7.7.8"
-    "@leafygreen-ui/lib" "^10.4.3"
+    "@leafygreen-ui/hooks" "^8.0.0"
+    "@leafygreen-ui/lib" "^11.0.0"
     "@leafygreen-ui/palette" "^4.0.7"
-    "@leafygreen-ui/tokens" "^2.1.4"
-    "@leafygreen-ui/typography" "^16.5.4"
-    react-transition-group "^4.4.1"
+    "@leafygreen-ui/tokens" "^2.2.0"
+    "@leafygreen-ui/typography" "^17.0.0"
+    react-transition-group "^4.4.5"
 
 "@leafygreen-ui/checkbox@^12.0.4":
   version "12.0.12"
@@ -3226,6 +3240,13 @@
   dependencies:
     lodash "^4.17.21"
 
+"@leafygreen-ui/hooks@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/hooks/-/hooks-8.0.0.tgz#10ff3335ab7690cc040ad930fac3097da66fe810"
+  integrity sha512-SpcjqRlPsRW5DsfqGdjf11N0f3JJw+bl5dOlp43Biz0RuJHJtt0h8b0D5Ig5dCn0jBDNiGNazG2lshX+btd9iA==
+  dependencies:
+    lodash "^4.17.21"
+
 "@leafygreen-ui/[email protected]":
   version "15.0.5"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/icon-button/-/icon-button-15.0.5.tgz#4c9e6a8388c471262c98bcb52b2d95c061625eea"
@@ -3252,6 +3273,19 @@
     "@leafygreen-ui/palette" "^4.0.7"
     "@leafygreen-ui/tokens" "^2.1.4"
 
+"@leafygreen-ui/icon-button@^15.0.17":
+  version "15.0.17"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/icon-button/-/icon-button-15.0.17.tgz#58e1dc09dcca00793efc5d02d652945bc8717fef"
+  integrity sha512-2gKZKLwGDoyhOmiYvSDRssk1OU/jSraIU4prT40lLgqZFCmA2nqDr7Hfb+W62QNvEGchoXNOXzm8KG/yrJBl2Q==
+  dependencies:
+    "@leafygreen-ui/a11y" "^1.4.8"
+    "@leafygreen-ui/box" "^3.1.8"
+    "@leafygreen-ui/emotion" "^4.0.7"
+    "@leafygreen-ui/icon" "^11.22.2"
+    "@leafygreen-ui/lib" "^11.0.0"
+    "@leafygreen-ui/palette" "^4.0.7"
+    "@leafygreen-ui/tokens" "^2.1.4"
+
 "@leafygreen-ui/[email protected]":
   version "11.12.1"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/icon/-/icon-11.12.1.tgz#8ec2a8cd209c07e5e9a3b5a8f42b74afa4364573"
@@ -3270,6 +3304,14 @@
     lodash "^4.17.21"
     meow "^6.1.0"
 
+"@leafygreen-ui/icon@^11.22.2", "@leafygreen-ui/icon@^11.23.0":
+  version "11.23.0"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/icon/-/icon-11.23.0.tgz#d6fdae3386f79ee061a991d32e2ff807611af85c"
+  integrity sha512-TaK9mlQO2K1Y4urL69FzLXMfW/hoSChlsA0WSj4IEFEyaC/bwVQTJFq9qStcRPTwf18G1rwsEQB1TlKDvlPIFA==
+  dependencies:
+    "@leafygreen-ui/emotion" "^4.0.7"
+    lodash "^4.17.21"
+
 "@leafygreen-ui/[email protected]":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/inline-definition/-/inline-definition-6.0.0.tgz#44632ced7f7e053575390923ec9a95cfc0e3842d"
@@ -3330,6 +3372,15 @@
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
+"@leafygreen-ui/lib@^11.0.0":
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/lib/-/lib-11.0.0.tgz#dde085e103adc8650699785407650cef61cedd40"
+  integrity sha512-sHkY/MOwRQDc9qAR1awreW0dP+6ELueJJd4JCJmi6XYbdL0wDotFwsWfCwkL+N6cFbE1e+xBQtFLB6T1+58+iQ==
+  dependencies:
+    "@storybook/csf" "^0.1.0"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
 "@leafygreen-ui/[email protected]":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/loading-indicator/-/loading-indicator-2.0.0.tgz#21f6d81ff43e1dd6339f06a1504f4bf9fcfa6307"
@@ -3481,6 +3532,11 @@
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/polymorphic/-/polymorphic-1.3.5.tgz#231fe35ac1c291d81bc642c5a9dbd9f23737522d"
   integrity sha512-JoWk/d/siMAcABcz330dXXXKEhxntkmfNb4nbj4GEgmx15nVE9zsW1KvqMQwTdq1gfym9Wc/Ldrkop2JBUoERw==
 
+"@leafygreen-ui/polymorphic@^1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/polymorphic/-/polymorphic-1.3.6.tgz#9df179df9176a5c1eaa1120bc22a4cc5356f3ed2"
+  integrity sha512-ZJqrYNAAO/CLgl3vtl01jQl2xz6pvzPRMEDqOgCykEn2/vk6wZUOJJ4FVK0cbLZuzwvKixbrTgOSw4WrF19sKg==
+
 "@leafygreen-ui/[email protected]":
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/popover/-/popover-11.0.1.tgz#864fb3d39cab2e98b600bd1b5bf930f3592af188"
@@ -3670,26 +3726,26 @@
     polished "^4.2.2"
     react-transition-group "^4.4.5"
 
-"@leafygreen-ui/table/new@npm:@leafygreen-ui/[email protected].7":
-  version "12.0.7"
-  resolved "https://registry.yarnpkg.com/@leafygreen-ui/table/-/table-12.0.7.tgz#c1cf87f446098067131d540b63a3422bb3267ccd"
-  integrity sha512-RyWVufwIJypnLu0yHnyl95P/UuAUo5SH9OAMoulrTVaaIMytlx32Lf2WXAhJp24WpUK6qFd6uaWXbanEkA2gFQ==
+"@leafygreen-ui/table/new@npm:@leafygreen-ui/[email protected].10":
+  version "12.0.10"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/table/-/table-12.0.10.tgz#b6d6a1d55795cc428a1199e8a67938e5b32ed162"
+  integrity sha512-hooCstSi79y7t+Wj0DT4gdgegwp56DuqnBGBvXptpf/zXVoLXMCkYCZQbTxio0QMMH+seNijVEvu5m9SL0HVfA==
   dependencies:
-    "@leafygreen-ui/checkbox" "^12.0.15"
+    "@leafygreen-ui/checkbox" "^12.0.18"
     "@leafygreen-ui/emotion" "^4.0.7"
-    "@leafygreen-ui/hooks" "^7.7.8"
-    "@leafygreen-ui/icon" "^11.22.1"
-    "@leafygreen-ui/icon-button" "^15.0.16"
-    "@leafygreen-ui/lib" "^10.4.3"
+    "@leafygreen-ui/hooks" "^8.0.0"
+    "@leafygreen-ui/icon" "^11.23.0"
+    "@leafygreen-ui/icon-button" "^15.0.17"
+    "@leafygreen-ui/lib" "^11.0.0"
     "@leafygreen-ui/palette" "^4.0.7"
-    "@leafygreen-ui/polymorphic" "^1.3.5"
-    "@leafygreen-ui/tokens" "^2.1.4"
-    "@leafygreen-ui/typography" "^16.5.4"
+    "@leafygreen-ui/polymorphic" "^1.3.6"
+    "@leafygreen-ui/tokens" "^2.2.0"
+    "@leafygreen-ui/typography" "^17.0.0"
     "@tanstack/react-table" "^8.7.3"
     lodash "^4.17.21"
     polished "^4.2.2"
     react-keyed-flatten-children "^1.3.0"
-    react-transition-group "^4.4.1"
+    react-transition-group "^4.4.5"
     react-virtual "^2.10.4"
 
 "@leafygreen-ui/[email protected]":
@@ -3813,6 +3869,13 @@
   dependencies:
     "@leafygreen-ui/palette" "^4.0.7"
 
+"@leafygreen-ui/tokens@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/tokens/-/tokens-2.2.0.tgz#8cae3fc84bd54e9d579ab6bd2a43fad3f9050fd9"
+  integrity sha512-hmRT1Sz6J9tv84ty1YPs1zmFewOCt/TghfbR0So5UtA5S2q4sVqjPZEpSvLmlxmtXIyl77fjU+uZYHpW2EID6w==
+  dependencies:
+    "@leafygreen-ui/palette" "^4.0.7"
+
 "@leafygreen-ui/[email protected]":
   version "9.1.6"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/tooltip/-/tooltip-9.1.6.tgz#0a750a3d043a0049b5c74bd317aa026073e7a377"
@@ -3897,6 +3960,18 @@
     "@leafygreen-ui/polymorphic" "^1.3.5"
     "@leafygreen-ui/tokens" "^2.1.4"
 
+"@leafygreen-ui/typography@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/typography/-/typography-17.0.0.tgz#2f4c098a5e0aa853d796434880884ecf605d8432"
+  integrity sha512-ECGA/IgueeRvh5en9iTdc0xmzS8sklktNHp0YBdN+Q/XKzRkY6W2ewAESfmyQibb9G8AS2rXrEJ1pOF+rfC6EA==
+  dependencies:
+    "@leafygreen-ui/emotion" "^4.0.7"
+    "@leafygreen-ui/icon" "^11.22.2"
+    "@leafygreen-ui/lib" "^11.0.0"
+    "@leafygreen-ui/palette" "^4.0.7"
+    "@leafygreen-ui/polymorphic" "^1.3.6"
+    "@leafygreen-ui/tokens" "^2.1.4"
+
 "@mdx-js/react@^2.1.5":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.3.0.tgz#4208bd6d70f0d0831def28ef28c26149b03180b3"