From 7b7ceff3737d54d1910b0e7675418c74ba347b31 Mon Sep 17 00:00:00 2001 From: Joshua Israel <65822698+joshri@users.noreply.github.com> Date: Mon, 12 Sep 2022 16:40:43 -0400 Subject: [PATCH] Add filtering by undefined and fix searching by name (#2714) * empty settings page and route * wow it was annoying to make the settings page * did not end up needing to change breadcrumbs * list providers * debug adding notifications in the backend, debug provider object class in the frontend, and allow for undefined values as - in filters * filter by name search was broken and tests were not behaving as expected * go mod tidy * filterByText formatting * filter dialog formatting * filter bugs and added filterSeparator to tests * removed an oopsie yaml file * one spot where filterSeparator was missing * bad fix for undefined chip label * SNAPS * better test for displaying dash in chip, chip group height * test changes * snapshot * remove override for chip text * test updates * remove screen.debug and make filterByText better * make search and filter optional on data table --- ui/components/ChipGroup.tsx | 1 + ui/components/DataTable.tsx | 87 ++--- ui/components/FilterDialog.tsx | 34 +- ui/components/__tests__/ChipGroup.test.tsx | 2 +- ui/components/__tests__/DataTable.test.tsx | 2 +- .../__tests__/DataTableFilters.test.tsx | 84 +++-- ui/components/__tests__/FilterDialog.test.tsx | 6 +- .../__snapshots__/DataTable.test.tsx.snap | 344 ++++-------------- 8 files changed, 182 insertions(+), 378 deletions(-) diff --git a/ui/components/ChipGroup.tsx b/ui/components/ChipGroup.tsx index 8e8d46eaea..fece65709b 100644 --- a/ui/components/ChipGroup.tsx +++ b/ui/components/ChipGroup.tsx @@ -32,6 +32,7 @@ export default styled(ChipGroup).attrs({ className: ChipGroup.name })` .MuiChip-root { margin-right: ${(props) => props.theme.spacing.xxs}; } + height: 40px; padding: 4px 0px; flex-wrap: nowrap; overflow-x: auto; diff --git a/ui/components/DataTable.tsx b/ui/components/DataTable.tsx index a03485aee2..4ebd6b8831 100644 --- a/ui/components/DataTable.tsx +++ b/ui/components/DataTable.tsx @@ -161,31 +161,27 @@ function filterText( return _.filter(rows, (row) => { let matches = false; - for (const colName in row) { - const value = row[colName]; - const field = _.find(fields, (f) => { - if (typeof f.value === "string") { - return f.value === colName; - } + fields.forEach((field) => { + if (!field.textSearchable) return matches; - if (f.sortValue) { - return f.sortValue(row) === value; - } - }); - - if (!field || !field.textSearchable) { - continue; + let value; + if (field.sortValue) { + value = field.sortValue(row); + } else { + value = + typeof field.value === "function" + ? field.value(row) + : row[field.value]; } - // This allows us to look for a fragment in the string. - // For example, if the user searches for "pod", the "podinfo" kustomization should be returned. - for (const filterString of textFilters) { - if (_.includes(value, filterString)) { - matches = true; + for (let i = 0; i < textFilters.length; i++) { + matches = value.includes(textFilters[i]); + if (!matches) { + break; } } - } + }); return matches; }); @@ -480,30 +476,37 @@ function UnstyledDataTable({ }); return ( - + {checkboxes && } - - - - - setFilterDialogOpen(!filterDialogOpen)} - className={className} - variant={filterDialogOpen ? "contained" : "text"} - color="inherit" - > - - - - + {filters && ( + + + + + setFilterDialogOpen(!filterDialogOpen)} + className={className} + variant={filterDialogOpen ? "contained" : "text"} + color="inherit" + > + + + + + )} diff --git a/ui/components/FilterDialog.tsx b/ui/components/FilterDialog.tsx index 56040e6783..0973bdf812 100644 --- a/ui/components/FilterDialog.tsx +++ b/ui/components/FilterDialog.tsx @@ -33,7 +33,7 @@ const SlideContent = styled.div` padding-left: ${(props) => props.theme.spacing.large}; `; -export const filterSeparator = ":"; +export const filterSeparator = ": "; type FilterSectionProps = { header: string; @@ -48,7 +48,9 @@ const FilterSection = ({ formState, onSectionSelect, }: FilterSectionProps) => { - const compoundKeys = options.map((option) => `${header}:${option}`); + const compoundKeys = options.map( + (option) => `${header}${filterSeparator}${option}` + ); // every on an empty list is true so check that too const all = compoundKeys.length > 0 && compoundKeys.every((key) => formState[key]); @@ -77,21 +79,19 @@ const FilterSection = ({ {convertHeaders(header)} - {options.sort().map((option: string, index: number) => { - return ( - - - - - - {_.toString(option)} - - - ); - })} + {options.sort().map((option: string, index: number) => ( + + + + + + {_.toString(option) || "-"} + + + ))} ); diff --git a/ui/components/__tests__/ChipGroup.test.tsx b/ui/components/__tests__/ChipGroup.test.tsx index 1efb1324c1..38fee90330 100644 --- a/ui/components/__tests__/ChipGroup.test.tsx +++ b/ui/components/__tests__/ChipGroup.test.tsx @@ -6,7 +6,7 @@ import ChipGroup from "../ChipGroup"; describe("ChipGroup", () => { const setActiveChips = jest.fn(); - const chipList = ["app", "app2", "app3"]; + const chipList = ["app", "app2", "app3", `appappapp`]; it("should render chips", () => { render( diff --git a/ui/components/__tests__/DataTable.test.tsx b/ui/components/__tests__/DataTable.test.tsx index 74d8eb204b..73dd56c87c 100644 --- a/ui/components/__tests__/DataTable.test.tsx +++ b/ui/components/__tests__/DataTable.test.tsx @@ -103,7 +103,7 @@ describe("DataTable", () => { const firstRow = screen.getAllByRole("row")[1]; expect(firstRow.innerHTML).toMatch(/podinfo/); }); - it("should render text when rows is empty", () => { + it("should render text when rows are empty", () => { render( withTheme( withContext( diff --git a/ui/components/__tests__/DataTableFilters.test.tsx b/ui/components/__tests__/DataTableFilters.test.tsx index 5186eb9fc4..935f222915 100644 --- a/ui/components/__tests__/DataTableFilters.test.tsx +++ b/ui/components/__tests__/DataTableFilters.test.tsx @@ -13,6 +13,9 @@ import DataTable, { filterSelectionsToQueryString, parseFilterStateFromURL, } from "../DataTable"; +import { filterSeparator } from "../FilterDialog"; + +const uriEncodedSeparator = encodeURIComponent(filterSeparator); const addTextSearchInput = (term: string) => { const input = document.getElementById("table-search"); @@ -188,6 +191,8 @@ describe("DataTableFilters", () => { expect(screen.queryAllByText("slick")).toBeTruthy(); expect(screen.queryAllByText("cool")).toBeTruthy(); + expect(screen.queryAllByText("neat")).toBeTruthy(); + expect(screen.queryAllByText("rad")).toBeTruthy(); }); it("should filter on click", () => { const initialFilterState = { @@ -209,7 +214,9 @@ describe("DataTableFilters", () => { ) ); - const checkbox1 = document.getElementById("type:foo") as HTMLInputElement; + const checkbox1 = document.getElementById( + `type${filterSeparator}foo` + ) as HTMLInputElement; fireEvent.click(checkbox1); const tableRows = document.querySelectorAll("tbody tr"); @@ -218,17 +225,19 @@ describe("DataTableFilters", () => { expect(tableRows[0].innerHTML).toContain("cool"); expect(tableRows[1].innerHTML).toContain("slick"); - const chip1 = screen.getByText("type:foo"); + const chip1 = screen.getByText(`type${filterSeparator}foo`); expect(chip1).toBeTruthy(); - const checkbox2 = document.getElementById("type:baz") as HTMLInputElement; + const checkbox2 = document.getElementById( + `type${filterSeparator}baz` + ) as HTMLInputElement; fireEvent.click(checkbox2); const tableRows2 = document.querySelectorAll("tbody tr"); expect(tableRows2).toHaveLength(3); expect(tableRows2[1].innerHTML).toContain("rad"); - const chip2 = screen.getByText("type:baz"); + const chip2 = screen.getByText(`type${filterSeparator}baz`); expect(chip2).toBeTruthy(); }); it("should filter by status", () => { @@ -252,7 +261,7 @@ describe("DataTableFilters", () => { ); const checkbox1 = document.getElementById( - "status:Ready" + `status${filterSeparator}Ready` ) as HTMLInputElement; fireEvent.click(checkbox1); @@ -261,11 +270,11 @@ describe("DataTableFilters", () => { expect(tableRows).toHaveLength(1); expect(tableRows[0].innerHTML).toContain("slick"); - const chip1 = screen.getByText("status:Ready"); + const chip1 = screen.getByText(`status${filterSeparator}Ready`); expect(chip1).toBeTruthy(); const checkbox2 = document.getElementById( - "status:Suspended" + `status${filterSeparator}Suspended` ) as HTMLInputElement; fireEvent.click(checkbox2); @@ -273,7 +282,7 @@ describe("DataTableFilters", () => { expect(tableRows2).toHaveLength(2); expect(tableRows2[0].innerHTML).toContain("cool"); - const chip2 = screen.getByText("status:Suspended"); + const chip2 = screen.getByText(`status${filterSeparator}Suspended`); expect(chip2).toBeTruthy(); }); it("should filter by type with callback", () => { @@ -348,14 +357,16 @@ describe("DataTableFilters", () => { expect(tableRows1).toHaveLength(4); expect(tableRows1[0].innerHTML).toContain("foo"); - const checkbox1 = document.getElementById("type:foo") as HTMLInputElement; + const checkbox1 = document.getElementById( + `type${filterSeparator}foo` + ) as HTMLInputElement; fireEvent.click(checkbox1); const tableRows2 = document.querySelectorAll("tbody tr"); expect(tableRows2).toHaveLength(1); expect(tableRows2[0].innerHTML).toContain("foo"); - const chip1 = screen.getByText("type:foo"); + const chip1 = screen.getByText(`type${filterSeparator}foo`); expect(chip1).toBeTruthy(); const clearAll = screen.getByText("Clear All"); @@ -366,7 +377,9 @@ describe("DataTableFilters", () => { expect(tableRows3).toHaveLength(rows.length); - const checkbox2 = document.getElementById("type:bar") as HTMLInputElement; + const checkbox2 = document.getElementById( + `type${filterSeparator}bar` + ) as HTMLInputElement; fireEvent.click(checkbox2); const tableRows4 = document.querySelectorAll("tbody tr"); @@ -375,7 +388,7 @@ describe("DataTableFilters", () => { expect(tableRows4[1].innerHTML).toContain("bar"); expect(tableRows4[2].innerHTML).toContain("bar"); - const chip2 = screen.getByText("type:bar"); + const chip2 = screen.getByText(`type${filterSeparator}bar`); expect(chip2).toBeTruthy(); }); it("should select/deselect all when category checkbox is clicked", () => { @@ -402,11 +415,11 @@ describe("DataTableFilters", () => { fireEvent.click(checkbox1); const tableRows = document.querySelectorAll("tbody tr"); expect(tableRows).toHaveLength(4); - let checkbox2 = document.getElementById("status:Ready"); + let checkbox2 = document.getElementById(`status${filterSeparator}Ready`); expect(checkbox2).toHaveProperty("checked", true); fireEvent.click(checkbox1); expect(tableRows).toHaveLength(4); - checkbox2 = document.getElementById("status:Ready"); + checkbox2 = document.getElementById(`status${filterSeparator}Ready`); expect(checkbox2).toHaveProperty("checked", false); }); it("should change select all box status when other checkboxes effect state", () => { @@ -430,12 +443,12 @@ describe("DataTableFilters", () => { ); const checkbox1 = document.getElementById("status") as HTMLInputElement; fireEvent.click(checkbox1); - let checkbox2 = document.getElementById("status:Ready"); + let checkbox2 = document.getElementById(`status${filterSeparator}Ready`); fireEvent.click(checkbox2); const tableRows = document.querySelectorAll("tbody tr"); expect(tableRows).toHaveLength(3); expect(checkbox1).toHaveProperty("checked", false); - checkbox2 = document.getElementById("status:Ready"); + checkbox2 = document.getElementById(`status${filterSeparator}Ready`); fireEvent.click(checkbox2); expect(checkbox1).toHaveProperty("checked", true); }); @@ -459,10 +472,12 @@ describe("DataTableFilters", () => { ) ); - const checkbox1 = document.getElementById("type:foo") as HTMLInputElement; + const checkbox1 = document.getElementById( + `type${filterSeparator}foo` + ) as HTMLInputElement; fireEvent.click(checkbox1); - const chip1 = screen.getByText("type:foo"); + const chip1 = screen.getByText(`type${filterSeparator}foo`); expect(chip1).toBeTruthy(); expect(screen.queryByText("Clear All")).toBeTruthy(); @@ -475,7 +490,7 @@ describe("DataTableFilters", () => { // Should return to all rows being shown const tableRows2 = document.querySelectorAll("tbody tr"); - expect(screen.queryByText("type:foo")).toBeFalsy(); + expect(screen.queryByText(`type${filterSeparator}foo`)).toBeFalsy(); expect(screen.queryByText("Clear All")).toBeFalsy(); expect(tableRows2).toHaveLength(rows.length); }); @@ -499,17 +514,21 @@ describe("DataTableFilters", () => { ) ); - const checkbox1 = document.getElementById("type:foo") as HTMLInputElement; + const checkbox1 = document.getElementById( + `type${filterSeparator}foo` + ) as HTMLInputElement; fireEvent.click(checkbox1); - const chip1 = screen.getByText("type:foo"); + const chip1 = screen.getByText(`type${filterSeparator}foo`); expect(chip1).toBeTruthy(); const tableRows1 = document.querySelectorAll("tbody tr"); expect(tableRows1).toHaveLength(2); - const checkbox2 = document.getElementById("type:baz") as HTMLInputElement; + const checkbox2 = document.getElementById( + `type${filterSeparator}baz` + ) as HTMLInputElement; fireEvent.click(checkbox2); - const chip2 = screen.getByText("type:baz"); + const chip2 = screen.getByText(`type${filterSeparator}baz`); expect(chip2).toBeTruthy(); const tableRows2 = document.querySelectorAll("tbody tr"); @@ -619,16 +638,15 @@ describe("DataTableFilters", () => { ) ); - const term1 = rows[0].name; + const term1 = "a"; addTextSearchInput(term1); - const term2 = rows[3].name; + const term2 = "r"; addTextSearchInput(term2); const tableRows = document.querySelectorAll("tbody tr"); - expect(tableRows).toHaveLength(2); - expect(tableRows[0].innerHTML).toContain(term1); - expect(tableRows[1].innerHTML).toContain(term2); + expect(tableRows).toHaveLength(1); + expect(tableRows[0].innerHTML).toContain(rows[3].name); }); it("filters by fragments of text fields", () => { render( @@ -654,7 +672,7 @@ describe("DataTableFilters", () => { ...filterConfig(rows, "type"), }; - const search = `?filters=type%3Afoo_`; + const search = `?filters=type${uriEncodedSeparator}foo_`; render( withTheme( @@ -675,10 +693,12 @@ describe("DataTableFilters", () => { expect(tableRows[0].innerHTML).toContain("foo"); }); it("returns a query string on filter change", () => { - const queryString = filterSelectionsToQueryString({ "type:foo": true }); - expect(queryString).toEqual("filters=type%3Afoo_"); + const queryString = filterSelectionsToQueryString({ + [`type${filterSeparator}foo`]: true, + }); + expect(queryString).toEqual(`filters=type${uriEncodedSeparator}foo_`); expect(parseFilterStateFromURL(queryString)).toEqual({ - "type:foo": true, + [`type${filterSeparator}foo`]: true, }); }); }); diff --git a/ui/components/__tests__/FilterDialog.test.tsx b/ui/components/__tests__/FilterDialog.test.tsx index 51c4c06ab0..ca03b7e868 100644 --- a/ui/components/__tests__/FilterDialog.test.tsx +++ b/ui/components/__tests__/FilterDialog.test.tsx @@ -3,7 +3,7 @@ import "jest-styled-components"; import React from "react"; import { withTheme } from "../../lib/test-utils"; import { initialFormState } from "../DataTable"; -import FilterDialog from "../FilterDialog"; +import FilterDialog, { filterSeparator } from "../FilterDialog"; describe("FilterDialog", () => { const setActiveFilters = jest.fn(); @@ -55,7 +55,9 @@ describe("FilterDialog", () => { ) ); - const checkbox1 = document.getElementById("Name:app") as HTMLInputElement; + const checkbox1 = document.getElementById( + `Name${filterSeparator}app` + ) as HTMLInputElement; expect(checkbox1.checked).toEqual(false); fireEvent.click(checkbox1); diff --git a/ui/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/ui/components/__tests__/__snapshots__/DataTable.test.tsx.snap index 88012bbaa0..6e2018cd8b 100644 --- a/ui/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/ui/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -30,10 +30,10 @@ exports[`DataTable snapshots renders 1`] = ` -ms-flex-align: center; align-items: center; width: 100%; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; } .c3 { @@ -44,15 +44,12 @@ exports[`DataTable snapshots renders 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + -webkit-align-items: start; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; + height: 100%; width: 100%; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; } .c4 { @@ -67,44 +64,13 @@ exports[`DataTable snapshots renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - width: 100%; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } -.c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-align-items: start; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: start; - height: 100%; - width: 100%; -} - -.c12 { +.c8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -116,13 +82,9 @@ exports[`DataTable snapshots renders 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; } -.c21 { +.c14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -140,7 +102,7 @@ exports[`DataTable snapshots renders 1`] = ` justify-content: flex-start; } -.c18 { +.c11 { font-family: 'proxima-nova',Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 400; @@ -148,7 +110,7 @@ exports[`DataTable snapshots renders 1`] = ` font-style: normal; } -.c23 { +.c16 { font-family: 'proxima-nova',Helvetica,Arial,sans-serif; font-size: 20px; font-weight: 400; @@ -158,51 +120,28 @@ exports[`DataTable snapshots renders 1`] = ` } .c9 svg { - fill: #737373 !important; - height: 24px; - width: 24px; -} - -.c9.downward { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); -} - -.c9.upward { - -webkit-transform: initial; - -ms-transform: initial; - transform: initial; -} - -.c9 .c17 { - margin-left: 4px; - color: #737373; -} - -.c16 svg { fill: !important; height: 16px; width: 16px; } -.c16.downward { +.c9.downward { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } -.c16.upward { +.c9.upward { -webkit-transform: initial; -ms-transform: initial; transform: initial; } -.c16 .c17 { +.c9 .c10 { margin-left: 4px; } -.c13.MuiButton-root { +.c5.MuiButton-root { height: 32px; font-size: 12px; -webkit-letter-spacing: 1px; @@ -214,39 +153,16 @@ exports[`DataTable snapshots renders 1`] = ` font-weight: 600; } -.c13.MuiButton-outlined { +.c5.MuiButton-outlined { padding: 8px 12px; border-color: #d8d8d8; } -.c8.MuiButton-root { - border-radius: 50%; - min-width: 38px; - height: 38px; - padding: 0; -} - -.c8.MuiButton-text { - padding: 0; -} - -.c15 { +.c7 { padding: 4px; } -.c5 { - padding: 4px 0px; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - overflow-x: auto; -} - -.c5 .MuiChip-root { - margin-right: 4px; -} - -.c19 { +.c12 { position: relative; height: 100%; width: 0px; @@ -259,12 +175,12 @@ exports[`DataTable snapshots renders 1`] = ` transition-timing-function: ease-in-out; } -.c19.open { +.c12.open { left: 0px; width: 350px; } -.c20 { +.c13 { background: rbga(255,255,255,0.75); height: 100%; width: 100%; @@ -273,30 +189,19 @@ exports[`DataTable snapshots renders 1`] = ` padding-left: 32px; } -.c22 .MuiListItem-gutters { +.c15 .MuiListItem-gutters { padding-left: 0px; } -.c22 .MuiCheckbox-root { +.c15 .MuiCheckbox-root { padding: 0px; } -.c22 .MuiCheckbox-colorSecondary.Mui-checked { +.c15 .MuiCheckbox-colorSecondary.Mui-checked { color: #00b3ec; } -.c10 { - width: 0px; - -webkit-transition: width 0.3s ease-in-out; - transition: width 0.3s ease-in-out; - margin-left: 4px; -} - -.c10.expanded { - width: 200px; -} - -.c14.MuiButton-root { +.c6.MuiButton-root { margin: 0; text-transform: none; -webkit-letter-spacing: 0; @@ -305,23 +210,18 @@ exports[`DataTable snapshots renders 1`] = ` letter-spacing: 0; } -.c14.MuiButton-text { +.c6.MuiButton-text { min-width: 0px; } -.c14.MuiButton-text .selected { +.c6.MuiButton-text .selected { color: #1a1a1a; } -.c14.arrow { +.c6.arrow { min-width: 0px; } -.c7 { - position: relative; - padding: 0 12px; -} - .c1 { width: 100%; -webkit-flex-wrap: nowrap; @@ -371,131 +271,9 @@ exports[`DataTable snapshots renders 1`] = ` >
-
-
-
-
- -
-
-
-
- -
-
-
-
-
- -
-
-
+ />
Ready @@ -753,7 +531,7 @@ exports[`DataTable snapshots renders 1`] = ` className="MuiTableCell-root MuiTableCell-body" > 2004-01-02T15:04:05-0700 @@ -764,7 +542,7 @@ exports[`DataTable snapshots renders 1`] = ` className="MuiTableCell-root MuiTableCell-body" > 3000 @@ -780,7 +558,7 @@ exports[`DataTable snapshots renders 1`] = ` className="MuiTableCell-root MuiTableCell-body" > - @@ -806,7 +584,7 @@ exports[`DataTable snapshots renders 1`] = ` className="MuiTableCell-root MuiTableCell-body" > 2006-01-02T15:04:05-0700 @@ -817,7 +595,7 @@ exports[`DataTable snapshots renders 1`] = ` className="MuiTableCell-root MuiTableCell-body" > 2000 @@ -833,7 +611,7 @@ exports[`DataTable snapshots renders 1`] = ` className="MuiTableCell-root MuiTableCell-body" > @@ -857,7 +635,7 @@ exports[`DataTable snapshots renders 1`] = ` className="MuiTableCell-root MuiTableCell-body" > 2005-01-02T15:04:05-0700 @@ -868,7 +646,7 @@ exports[`DataTable snapshots renders 1`] = ` className="MuiTableCell-root MuiTableCell-body" > 1000 @@ -879,20 +657,20 @@ exports[`DataTable snapshots renders 1`] = `