Enable filters for Issues and Assets on Web

Author: kshmidt-digma

src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Analytics/index.tsx

@@ -1,160 +1,62 @@
-import {
-  useGetAboutQuery,
-  useGetEnvironmentsQuery,
-  useGetInsightsQuery
-} from "../../../../../../redux/services/digma";
-import {
-  InsightsSortingCriterion,
-  SortingOrder
-} from "../../../../../../redux/services/types";
-import { useInsightsSelector } from "../../../../../../store/insights/useInsightsSelector";
+import { useEffect } from "react";
+import { useAdminDispatch } from "../../../../../../containers/Admin/hooks";
+import { setScope } from "../../../../../../redux/slices/repositorySlice";
+import { useStore } from "../../../../../../store/useStore";
+import { useInsightsData } from "../../../../../Insights/hooks/useInsightsData";
 import * as s from "./styles";
 import type { AnalyticsProps } from "./types";
 
-const PAGE_SIZE = 10;
-
 export const Analytics = ({
   query,
   onScopeChange,
   onGoToTab
 }: AnalyticsProps) => {
-  const { page } = useInsightsSelector();
-  // const [page, setPage] = useState(0);
-  // const insightsListRef = useRef<HTMLDivElement>(null);
-  const { data: about } = useGetAboutQuery();
-  const { data: environments } = useGetEnvironmentsQuery();
-  // const pageSize = query?.pageSize ?? PAGE_SIZE;
-  const { data, isFetching, refetch } = useGetInsightsQuery({
-    data: {
-      environment: query?.environment,
-      scopedSpanCodeObjectId: query?.scopedSpanCodeObjectId,
-      services:
-        query?.services && query?.services.length > 0
-          ? query?.services.join(",")
-          : undefined,
-      sortBy: InsightsSortingCriterion.Criticality,
-      sortOrder: SortingOrder.Desc,
-      page,
-      pageSize: PAGE_SIZE
-    },
-    extra: {
-      insightViewType: "Analytics"
-    }
-  });
+  const { setInsightViewType } = useStore.getState();
+  const dispatch = useAdminDispatch();
+  const { data, isLoading, refresh } = useInsightsData();
 
   const handleRefresh = () => {
-    void refetch();
+    refresh();
   };
 
-  // const handleChangePage = (page: number) => {
-  //   sendUserActionTrackingEvent(trackingEvents.ANALYTICS_PAGE_CHANGED);
-  //   setPage(page);
-  // };
-
-  // const handleScopeChange = (payload: ChangeScopePayload) => {
-  //   onScopeChange(payload);
-  // };
-
-  // const totalCount = data?.data.totalCount ?? 0;
-  // const pageStartItemNumber = page * pageSize + 1;
-  // const pageEndItemNumber = Math.min(
-  //   pageStartItemNumber + pageSize - 1,
-  //   totalCount
-  // );
-
-  // useEffect(() => {
-  //   setPage(0);
-  // }, [query]);
-
-  // useEffect(() => {
-  //   insightsListRef.current?.scrollTo(0, 0);
-  // }, [page, query]);
-
-  // const renderEmptyState = () => {
-  //   const handleSeeAllAssetsClick = () => {
-  //     sendUserActionTrackingEvent(
-  //       trackingEvents.ANALYTICS_SEE_ALL_ASSETS_BUTTON_CLICKED
-  //     );
-  //     onGoToAssets();
-  //   };
-
-  //   if (!query?.scopedSpanCodeObjectId) {
-  //     return (
-  //       <InsightsPageEmptyState
-  //         preset={"analyticsSelectAsset"}
-  //         customContent={
-  //           <NewButton
-  //             buttonType={"primary"}
-  //             onClick={handleSeeAllAssetsClick}
-  //             label={"See all assets"}
-  //           />
-  //         }
-  //       />
-  //     );
-  //   }
-
-  //   return <InsightsPageEmptyState preset={"noDataYet"} />;
-  // };
-
-  // return (
-  //   <s.Container>
-  //     <s.ContentContainer>
-  //       {isFetching ? (
-  //         <EmptyState preset={"loading"} />
-  //       ) : data ? (
-  //         data.data.insights.length > 0 ? (
-  //           <s.InsightsList ref={insightsListRef}>
-  //             {data.data.insights.map((insight) => (
-  //               <InsightCardRenderer
-  //                 key={insight.id}
-  //                 insight={insight}
-  //                 isJiraHintEnabled={false}
-  //                 isMarkAsReadButtonEnabled={false}
-  //                 viewMode={"full"}
-  //                 tooltipBoundaryRef={insightsListRef}
-  //                 backendInfo={about ?? null}
-  //                 onScopeChange={handleScopeChange}
-  //               />
-  //             ))}
-  //           </s.InsightsList>
-  //         ) : (
-  //           renderEmptyState()
-  //         )
-  //       ) : null}
-  //     </s.ContentContainer>
-  //     <s.Footer>
-  //       {totalCount > 0 && (
-  //         <>
-  //           <Pagination
-  //             itemsCount={totalCount}
-  //             page={page}
-  //             pageSize={pageSize}
-  //             onPageChange={handleChangePage}
-  //             extendedNavigation={true}
-  //           />
-  //           <s.FooterItemsCount>
-  //             Showing{" "}
-  //             <s.FooterPageItemsCount>
-  //               {pageStartItemNumber} - {pageEndItemNumber}
-  //             </s.FooterPageItemsCount>{" "}
-  //             of {totalCount}
-  //           </s.FooterItemsCount>
-  //         </>
-  //       )}
-  //     </s.Footer>
-  //   </s.Container>
-  // );
+  // Set the insight view type in zustand store on component mount
+  useEffect(() => {
+    setInsightViewType("Analytics");
+  }, [setInsightViewType]);
+
+  // Set the scope on query change
+  useEffect(() => {
+    dispatch(
+      setScope({
+        span: query?.scopedSpanCodeObjectId
+          ? {
+              spanCodeObjectId: query.scopedSpanCodeObjectId,
+              displayName: "",
+              methodId: null,
+              serviceName: null,
+              role: null
+            }
+          : null,
+        code: {
+          relatedCodeDetailsList: [],
+          codeDetailsList: []
+        },
+        hasErrors: false,
+        issuesInsightsCount: 0,
+        analyticsInsightsCount: 0,
+        unreadInsightsCount: 0,
+        environmentId: query?.environment
+      })
+    );
+  }, [query, dispatch]);
 
   return (
     <s.Content
-      insightViewType={"Analytics"}
-      data={data?.data ?? null}
-      isLoading={isFetching}
+      data={data}
+      isLoading={isLoading}
       onScopeChange={onScopeChange}
       onGoToTab={onGoToTab}
-      backendInfo={about ?? null}
       onRefresh={handleRefresh}
-      environments={environments}
     />
   );
 };

src/components/Admin/common/RepositorySidebarOverlay/RepositorySidebar/Assets/index.tsx

@@ -70,7 +70,6 @@ export const Assets = ({
       onRefresh={handleRefresh}
       onAssetTypeSelect={handleAssetTypeSelect}
       selectedAssetTypeId={selectedAssetTypeId}
-      areFiltersEnabled={false}
     />
   );
 };