Fix/dx 1936

src/app/components/AppBar/index.tsx

@@ -42,7 +42,6 @@ const NavList = (props: {
   ];
   const handleNavigation = () => {
     props.setIsNavExpanded?.(false);
-    document.body.style.overflow = "auto";
   };
   return (
     <>

src/app/modules/chart-module/__test__/filter.test.tsx

@@ -103,7 +103,7 @@ const checkIfAllOptionsAreChecked = (options: FilterGroupOptionModel[]) => {
   options.forEach((option: FilterGroupOptionModel) => {
     expect(
       screen.getByRole("checkbox", {
-        name: option.label,
+        name: option.label + " ()",
       })
     ).toBeChecked();
     if (option.subOptions && isOptionExpanded) {
@@ -118,7 +118,7 @@ const checkIfAllOptionsAreUnchecked = (options: FilterGroupOptionModel[]) => {
   options.forEach((option: FilterGroupOptionModel) => {
     expect(
       screen.getByRole("checkbox", {
-        name: option.label,
+        name: option.label + " ()",
       })
     ).not.toBeChecked();
     if (option.subOptions && isOptionExpanded) {
@@ -354,14 +354,14 @@ test("search input should filter options", async () => {
   expect(screen.getAllByTestId("filter-option-checkbox").length).toBe(5);
   const filteredOptions = ["100", "1000", "10016", "10033", "1005"];
   filteredOptions.forEach((option: string) => {
-    expect(screen.getByLabelText(option)).toBeInTheDocument();
+    expect(screen.getByLabelText(option + " ()")).toBeInTheDocument();
   });
 
   //delete search input
   await user.clear(searchInput);
   expect(screen.getAllByTestId("filter-option-checkbox").length).toBe(3);
   props.options.forEach((option: any) => {
-    expect(screen.getByLabelText(option.label)).toBeInTheDocument();
+    expect(screen.getByLabelText(option.label + " ()")).toBeInTheDocument();
   });
 });
 
@@ -380,7 +380,9 @@ test("should multi check and uncheck filter options", async () => {
   render(app);
   const checkboxList: HTMLElement[] = [];
   props.options.forEach((option: any) => {
-    checkboxList.push(screen.getByRole("checkbox", { name: option.label }));
+    checkboxList.push(
+      screen.getByRole("checkbox", { name: option.label + " ()" })
+    );
   });
   expect(checkboxList.length).toBe(3);
   //multi check filte options

src/app/modules/common/no-match-page/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import get from "lodash/get";
 import { Link, useHistory } from "react-router-dom";
 import { ReactComponent as NotFoundIcon } from "app/modules/common/no-match-page/asset/404.svg";
 import { ReactComponent as BgImg } from "app/modules/common/no-match-page/asset/bg-ellipse.svg";
@@ -11,7 +10,14 @@ import SmallFooter from "app/modules/home-module/components/Footer/smallFooter";
 export const NoMatchPage = () => {
   const history = useHistory();
   return (
-    <div>
+    <div
+      css={`
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      `}
+    >
       <div
         css={`
           width: 100%;

src/app/modules/home-module/components/AssetCollection/All/assetsGrid.tsx

@@ -23,7 +23,7 @@ import ColoredReportIcon from "app/assets/icons/ColoredReportIcon";
 import DeleteDatasetDialog from "app/components/Dialogs/deleteDatasetDialog";
 import DeleteReportDialog from "app/components/Dialogs/deleteReportDialog";
 import { EditorState, convertFromRaw } from "draft-js";
-import { DatasetListItemAPIModel } from "app/modules/dataset-module/data";
+import { getLimit } from "app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid";
 import { HomepageTable } from "app/modules/home-module/components/Table/";
 import { planDialogAtom } from "app/state/recoil/atoms";
 import { useSetRecoilState } from "recoil";
@@ -55,7 +55,7 @@ export default function AssetsGrid(props: Props) {
 
   const token = useStoreState((state) => state.AuthToken.value);
 
-  const limit = 15;
+  const limit = getLimit();
   const [offset, setOffset] = React.useState(0);
 
   const { isObserved } = useInfinityScroll(observerTarget);

src/app/modules/home-module/components/AssetCollection/Charts/chartsGrid.tsx

@@ -22,6 +22,7 @@ import GridItem from "app/modules/home-module/components/AssetCollection/Charts/
 import { useAuth0 } from "@auth0/auth0-react";
 import { useSetRecoilState } from "recoil";
 import { planDialogAtom } from "app/state/recoil/atoms";
+import { getLimit } from "app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid";
 
 interface Props {
   sortBy: string;
@@ -48,7 +49,8 @@ export default function ChartsGrid(props: Props) {
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
   const token = useStoreState((state) => state.AuthToken.value);
   const initialRender = React.useRef(true);
-  const limit = 15;
+  const limit = getLimit();
+
   const [offset, setOffset] = React.useState(0);
 
   const { isObserved } = useInfinityScroll(observerTarget);

src/app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid.tsx

@@ -30,20 +30,29 @@ interface Props {
   userOnly?: boolean;
 }
 
+export const getLimit = () => {
+  let rows = 4;
+  const size = Math.floor(window.innerHeight / 400);
+  if (window.innerHeight <= 1050) {
+    return rows * 4;
+  } else {
+    rows += size;
+    return rows * 4;
+  }
+};
 export default function DatasetsGrid(props: Readonly<Props>) {
+  const limit = getLimit();
   const observerTarget = React.useRef(null);
   const [cardId, setCardId] = React.useState<string>("");
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
   const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
-  const limit = 15;
   const initialRender = React.useRef(true);
   const [offset, setOffset] = React.useState(0);
   const { isObserved } = useInfinityScroll(observerTarget);
   const token = useStoreState((state) => state.AuthToken.value);
   const setPlanDialog = useSetRecoilState(planDialogAtom);
   const [loadedDatasets, setLoadedDatasets] =
     useRecoilState(loadedDatasetsAtom);
-
   const datasets = useStoreState(
     (state) =>
       (state.dataThemes.DatasetGetList.crudData ??

src/app/modules/home-module/components/AssetCollection/Reports/reportsGrid.tsx

@@ -16,6 +16,7 @@ import { EditorState, convertFromRaw } from "draft-js";
 import { useSetRecoilState } from "recoil";
 import { planDialogAtom } from "app/state/recoil/atoms";
 import CircleLoader from "app/modules/home-module/components/Loader";
+import { getLimit } from "app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid";
 
 interface Props {
   sortBy: string;
@@ -31,7 +32,7 @@ export default function ReportsGrid(props: Readonly<Props>) {
   const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
   const [loadedReports, setLoadedReports] = React.useState<ReportModel[]>([]);
-  const limit = 15;
+  const limit = getLimit();
   const initialRender = React.useRef(true);
   const [offset, setOffset] = React.useState(0);
   const { isObserved } = useInfinityScroll(observerTarget);