Fix pagination

.vscode/settings.json

@@ -4,5 +4,6 @@
     "source.organizeImports": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "stylelint.validate": ["typescript"]
+  "stylelint.validate": ["typescript"],
+  "cSpell.words": ["uuidv"]
 }

package.json

@@ -73,6 +73,7 @@
     "@types/react-syntax-highlighter": "^15.5.7",
     "@types/react-transition-group": "^4.4.5",
     "@types/semver": "^7.5.6",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
     "babel-loader": "^9.1.3",
@@ -120,6 +121,7 @@
     "react-transition-group": "^4.4.5",
     "recharts": "^2.6.2",
     "semver": "^7.5.4",
-    "styled-components": "^6.1.0"
+    "styled-components": "^6.1.0",
+    "uuid": "^9.0.1"
   }
 }

src/components/Assets/AssetList/index.tsx

@@ -271,7 +271,7 @@ export const AssetList = (props: AssetListProps) => {
       (Array.isArray(previousServices) &&
         previousServices !== props.services) ||
       (previousFilters && previousFilters !== props.filters) ||
-      (previousViewScope && previousViewScope !== props.scopeViewOptions)
+      previousViewScope !== props.scopeViewOptions
     ) {
       getData(
         props.assetTypeId,

src/components/Assets/AssetList/types.ts

@@ -9,7 +9,7 @@ export interface AssetListProps {
   services?: string[];
   filters?: AssetFilterQuery;
   searchQuery: string;
-  scopeViewOptions?: AssetScopeOption;
+  scopeViewOptions: AssetScopeOption | null;
 }
 
 export enum SORTING_CRITERION {

src/components/Assets/AssetTypeList/index.tsx

@@ -123,7 +123,7 @@ export const AssetTypeList = (props: AssetTypeListProps) => {
       (previousFilters && previousFilters !== props.filters) ||
       (isString(previousSearchQuery) &&
         previousSearchQuery !== props.searchQuery) ||
-      (previousViewScope && previousViewScope !== props.scopeViewOptions)
+      previousViewScope !== props.scopeViewOptions
     ) {
       getData(
         props.filters,
@@ -144,7 +144,8 @@ export const AssetTypeList = (props: AssetTypeListProps) => {
     previousSearchQuery,
     props.searchQuery,
     isComplexFilterEnabled,
-    props.scopeViewOptions
+    props.scopeViewOptions,
+    previousViewScope
   ]);
 
   useEffect(() => {

src/components/Assets/AssetTypeList/types.ts

@@ -7,7 +7,7 @@ export interface AssetTypeListProps {
   services?: string[];
   filters?: AssetFilterQuery;
   searchQuery: string;
-  scopeViewOptions?: AssetScopeOption;
+  scopeViewOptions: AssetScopeOption | null;
 }
 
 export interface AssetCategoriesData {

src/components/Assets/AssetsViewScopeConfiguration/index.tsx

@@ -1,5 +1,4 @@
-import { useContext, useEffect, useState } from "react";
-import { ConfigContext } from "../../common/App/ConfigContext";
+import { useEffect, useState } from "react";
 import { ToggleSwitch } from "../../common/ToggleSwitch";
 import * as s from "./styles";
 import { AssetsViewConfigurationProps as AssetsViewScopeConfigurationProps } from "./types";
@@ -9,11 +8,10 @@ export const AssetsViewScopeConfiguration = (
 ) => {
   const [isEntry, setIsEntry] = useState(false);
   const [isDirect, setIsDirect] = useState(false);
-  const { scope } = useContext(ConfigContext);
+  const scope = props.currentScope;
 
   useEffect(() => {
     const isEntryPoint = !scope || scope.span?.role === "Entry";
-
     props.onAssetViewChanged({
       scopedSpanCodeObjectId: scope?.span?.spanCodeObjectId,
       isDirect: !isEntryPoint

src/components/Assets/AssetsViewScopeConfiguration/types.ts

@@ -1,5 +1,8 @@
+import { Scope } from "../../common/App/types";
+
 export interface AssetsViewConfigurationProps {
-  onAssetViewChanged: (isDirect: AssetScopeOption) => void;
+  onAssetViewChanged: (assetViewScope: AssetScopeOption) => void;
+  currentScope: Scope;
 }
 
 export interface AssetScopeOption {

src/components/Assets/index.tsx

@@ -1,6 +1,7 @@
 import {
   ChangeEvent,
   useContext,
+  useEffect,
   useLayoutEffect,
   useMemo,
   useState
@@ -33,7 +34,8 @@ export const Assets = () => {
   const [searchInputValue, setSearchInputValue] = useState("");
   const debouncedSearchInputValue = useDebounce(searchInputValue, 1000);
   const [selectedServices, setSelectedServices] = useState<string[]>();
-  const [assetScopeOption, setAssetScopeOption] = useState<AssetScopeOption>();
+  const [assetScopeOption, setAssetScopeOption] =
+    useState<AssetScopeOption | null>(null);
   const [selectedFilters, setSelectedFilters] = useState<AssetFilterQuery>();
   const config = useContext(ConfigContext);
 
@@ -68,6 +70,12 @@ export const Assets = () => {
     });
   }, []);
 
+  useEffect(() => {
+    if (!config.scope?.span) {
+      setAssetScopeOption(null);
+    }
+  }, [config.scope]);
+
   const handleBackButtonClick = () => {
     setSelectedAssetTypeId(null);
   };
@@ -167,6 +175,7 @@ export const Assets = () => {
         {config.scope && config.scope.span && (
           <s.HeaderItem>
             <AssetsViewScopeConfiguration
+              currentScope={config.scope}
               onAssetViewChanged={(val) => {
                 setAssetScopeOption(val);
               }}

src/components/Insights/InsightsCatalog/index.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from "react";
 import { usePrevious } from "../../../hooks/usePrevious";
 
 import { isNumber } from "../../../typeGuards/isNumber";
-import { isString } from "../../../typeGuards/isString";
 import { Pagination } from "../../common/Pagination";
 import { SearchInput } from "../../common/SearchInput";
 import { SortingSelector } from "../../common/SortingSelector";
@@ -40,8 +39,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
     if (
       (isNumber(previousPage) && previousPage !== page) ||
       (previousSorting && previousSorting !== sorting) ||
-      (isString(previousSearchQuery) &&
-        previousSearchQuery !== searchInputValue)
+      previousSearchQuery !== searchInputValue
     ) {
       props.onQueryChange({
         page,
@@ -90,23 +88,26 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
         insights={insights}
         isFilteringEnabled={searchInputValue !== null}
         onJiraTicketCreate={onJiraTicketCreate}
+        onRefresh={props.onRefresh}
       />
-      <s.Footer>
-        <s.FooterItemsCount>
-          Showing{" "}
-          <s.FooterPageItemsCount>
-            {pageStartItemNumber} - {pageEndItemNumber}
-          </s.FooterPageItemsCount>{" "}
-          of {totalCount}
-        </s.FooterItemsCount>
-        <Pagination
-          itemsCount={totalCount}
-          page={page}
-          pageSize={PAGE_SIZE}
-          onPageChange={setPage}
-          extendedNavigation={true}
-        />
-      </s.Footer>
+      {totalCount > 0 && (
+        <s.Footer>
+          <s.FooterItemsCount>
+            Showing{" "}
+            <s.FooterPageItemsCount>
+              {pageStartItemNumber} - {pageEndItemNumber}
+            </s.FooterPageItemsCount>{" "}
+            of {totalCount}
+          </s.FooterItemsCount>
+          <Pagination
+            itemsCount={totalCount}
+            page={page}
+            pageSize={PAGE_SIZE}
+            onPageChange={setPage}
+            extendedNavigation={true}
+          />
+        </s.Footer>
+      )}
     </>
   );
 };

src/components/Insights/InsightsCatalog/types.ts

@@ -9,6 +9,7 @@ export interface InsightsCatalogProps {
   ) => void;
   onQueryChange: (query: InsightsQuery) => void;
   defaultQuery: InsightsQuery;
+  onRefresh: () => void;
 }
 
 export enum SORTING_CRITERION {