Merge pull request #1021 from digma-ai/feature/merge-store

Feature/merge store

package.json

@@ -122,6 +122,7 @@
     "semver": "^7.5.4",
     "styled-components": "^6.1.0",
     "uuid": "^9.0.1",
-    "zustand": "^4.5.4"
+    "zustand": "^4.5.5",
+    "zustand-slices": "^0.3.0"
   }
 }

src/components/Assets/AssetList/AssetEntry/index.tsx

@@ -1,5 +1,5 @@
-import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore";
 import { getFeatureFlagValue } from "../../../../featureFlags";
+import { useConfigSelector } from "../../../../store/config/useConfigSelector";
 import { isNumber } from "../../../../typeGuards/isNumber";
 import { isString } from "../../../../typeGuards/isString";
 import { FeatureFlag, InsightType } from "../../../../types";
@@ -24,7 +24,7 @@ export const AssetEntry = ({
   isImpactHidden,
   sortingCriterion
 }: AssetEntryProps) => {
-  const backendInfo = useGlobalStore.use.backendInfo();
+  const { backendInfo } = useConfigSelector();
   const isNewImpactScoreCalculationEnabled = getFeatureFlagValue(
     backendInfo,
     FeatureFlag.IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED

src/components/Assets/AssetList/index.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
 import { DigmaMessageError } from "../../../api/types";
-import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { changeScope } from "../../../utils/actions/changeScope";
 import { SCOPE_CHANGE_EVENTS } from "../../Main/types";
@@ -140,12 +140,10 @@ export const AssetList = ({
     filteredCount
   );
   const listRef = useRef<HTMLUListElement>(null);
-  const environment = useGlobalStore.use.environment();
-  const backendInfo = useGlobalStore.use.backendInfo();
+  const { environment, backendInfo, scope } = useConfigSelector();
   const refreshTimerId = useRef<number>();
   const previousEnvironment = usePrevious(environment);
   const previousViewScope = usePrevious(scopeViewOptions);
-  const scope = useGlobalStore.use.scope();
   const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
 
   const refreshData = useCallback(() => {

src/components/Assets/AssetTypeList/index.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { DigmaMessageError } from "../../../api/types";
-import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { isNull } from "../../../typeGuards/isNull";
 import { isString } from "../../../typeGuards/isString";
@@ -69,8 +69,7 @@ export const AssetTypeList = ({
   const previousData = usePrevious(data);
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
   const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp);
-  const scope = useGlobalStore.use.scope();
-  const environment = useGlobalStore.use.environment();
+  const { scope, environment } = useConfigSelector();
   const previousEnvironment = usePrevious(environment);
   const refreshTimerId = useRef<number>();
   const previousSearchQuery = usePrevious(searchQuery);

src/components/Assets/AssetsFilter/index.tsx

@@ -1,8 +1,9 @@
 import { ComponentType, useEffect, useState } from "react";
-import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
 import { dispatcher } from "../../../dispatcher";
 import { usePersistence } from "../../../hooks/usePersistence";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
+import { useStore } from "../../../store/useStore";
 import { isEnvironment } from "../../../typeGuards/isEnvironment";
 import { isNull } from "../../../typeGuards/isNull";
 import { isUndefined } from "../../../typeGuards/isUndefined";
@@ -18,6 +19,7 @@ import { IconProps } from "../../common/icons/types";
 import { AssetScopeOption } from "../AssetsViewScopeConfiguration/types";
 import { actions } from "../actions";
 import { trackingEvents } from "../tracking";
+import * as s from "./styles";
 import {
   AssetFilterCategory,
   AssetFilterQuery,
@@ -26,8 +28,6 @@ import {
   GetAssetFiltersDataPayload
 } from "./types";
 
-import * as s from "./styles";
-
 const PERSISTENCE_KEY = "assetsFilters";
 
 const getData = ({
@@ -98,12 +98,16 @@ export const AssetsFilter = ({
   const previousData = usePrevious(data);
   const [isOpen, setIsOpen] = useState(false);
   const previousIsOpen = usePrevious(isOpen);
-  const globallySelectedServices = useGlobalStore.use.selectedServices();
-  const setGloballySelectedServices = useGlobalStore.use.setSelectedServices();
+  const {
+    selectedServices: globallySelectedServices,
+    environment,
+    scope
+  } = useConfigSelector();
+  const { setSelectedServices: setGloballySelectedServices } =
+    useStore.getState();
   const [persistedFilters, setPersistedFilters] =
     usePersistence<AssetFilterQuery>(PERSISTENCE_KEY, "project");
   const previousPersistedFilters = usePrevious(persistedFilters);
-  const scope = useGlobalStore.use.scope();
   const isServicesFilterEnabled = !scope?.span?.spanCodeObjectId;
   const [selectedServices, setSelectedServices] = useState<string[]>(
     isServicesFilterEnabled ? globallySelectedServices ?? [] : []
@@ -112,7 +116,6 @@ export const AssetsFilter = ({
   const [selectedConsumers, setSelectedConsumers] = useState<string[]>([]);
   const [selectedInternals, setSelectedInternals] = useState<string[]>([]);
   const [selectedInsights, setSelectedInsights] = useState<InsightType[]>([]);
-  const environment = useGlobalStore.use.environment();
   const previousEnvironment = usePrevious(environment);
   const previousScope = usePrevious(scope);
 

src/components/Assets/index.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
-import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore";
 import { getFeatureFlagValue } from "../../featureFlags";
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
+import { useConfigSelector } from "../../store/config/useConfigSelector";
 import { FeatureFlag } from "../../types";
 import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent";
 import { useHistory } from "../Main/useHistory";
@@ -31,8 +31,7 @@ export const Assets = () => {
   const [assetScopeOption, setAssetScopeOption] =
     useState<AssetScopeOption | null>(null);
   const [selectedFilters, setSelectedFilters] = useState<AssetFilterQuery>();
-  const scope = useGlobalStore.use.scope();
-  const environments = useGlobalStore.use.environments();
+  const { scope, environments, backendInfo } = useConfigSelector();
   const previousScopeSpanCodeObjectId = usePrevious(
     scope?.span?.spanCodeObjectId
   );
@@ -42,7 +41,6 @@ export const Assets = () => {
     useState<DataRefresher | null>(null);
   const { goTo } = useHistory();
   const isBackendUpgradeMessageVisible = false;
-  const backendInfo = useGlobalStore.use.backendInfo();
   const areExtendedAssetsFiltersEnabled = getFeatureFlagValue(
     backendInfo,
     FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED

src/components/Dashboard/Report/ReportHeader/index.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { actions as globalActions } from "../../../../actions";
-import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore";
 import {
   DataFetcherConfiguration,
   useFetchData
 } from "../../../../hooks/useFetchData";
+import { useConfigSelector } from "../../../../store/config/useConfigSelector";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { GlobeIcon } from "../../../common/icons/12px/GlobeIcon";
 import { WrenchIcon } from "../../../common/icons/12px/WrenchIcon";
@@ -40,7 +40,7 @@ export const ReportHeader = ({
   const [selectedEnvironment, setSelectedEnvironment] = useState<string | null>(
     null
   );
-  const environments = useGlobalStore.use.environments();
+  const { environments } = useConfigSelector();
   const handleSelectedEnvironmentChanged = (option: string | string[]) => {
     const newItem =
       option === selectedEnvironment

src/components/Errors/index.tsx

@@ -1,12 +1,12 @@
 import { useParams } from "react-router-dom";
-import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore";
+import { useConfigSelector } from "../../store/config/useConfigSelector";
 import { useHistory } from "../Main/useHistory";
 import { ErrorDetails } from "./ErrorDetails";
 import { ErrorsList } from "./ErrorsList";
 import * as s from "./styles";
 
 export const Errors = () => {
-  const scope = useGlobalStore.use.scope();
+  const { scope } = useConfigSelector();
   const spanCodeObjectId = scope?.span?.spanCodeObjectId;
   const methodId = scope?.span?.methodId ?? undefined;
   const { goTo } = useHistory();

src/components/Highlights/Impact/index.tsx

@@ -1,7 +1,7 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useEffect } from "react";
 import { PERFORMANCE_IMPACT_DOCUMENTATION_URL } from "../../../constants";
-import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { SCOPE_CHANGE_EVENTS } from "../../Main/types";
@@ -76,9 +76,7 @@ const getRankTagType = (normalizedRank: number) => {
 
 export const Impact = () => {
   const { data, getData } = useImpactData();
-  const scope = useGlobalStore.use.scope();
-  const environments = useGlobalStore.use.environments();
-  const backendInfo = useGlobalStore.use.backendInfo();
+  const { scope, environments, backendInfo } = useConfigSelector();
 
   useEffect(() => {
     getData();

src/components/Highlights/Impact/useImpactData.ts

@@ -1,16 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { actions as mainActions } from "../../Main/actions";
 import { GetHighlightsImpactDataPayload, ImpactData } from "./types";
 
 const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
 
 export const useImpactData = () => {
   const [data, setData] = useState<ImpactData>();
-  const scope = useGlobalStore.use.scope();
-  const environments = useGlobalStore.use.environments();
+  const { scope, environments } = useConfigSelector();
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
   const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp);
   const refreshTimerId = useRef<number>();

src/components/Highlights/Performance/index.tsx

@@ -1,7 +1,7 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
-import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { isBoolean } from "../../../typeGuards/isBoolean";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { formatTimeDistance } from "../../../utils/formatTimeDistance";
@@ -26,8 +26,7 @@ export const Performance = () => {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const { data, getData } = usePerformanceData();
   const previousData = usePrevious(data);
-  const scope = useGlobalStore.use.scope();
-  const environments = useGlobalStore.use.environments();
+  const { scope, environments } = useConfigSelector();
 
   useEffect(() => {
     getData();

src/components/Highlights/Performance/usePerformanceData.ts

@@ -1,16 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { actions as mainActions } from "../../Main/actions";
 import { GetHighlightsPerformanceDataPayload, PerformanceData } from "./types";
 
 const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
 
 export const usePerformanceData = () => {
   const [data, setData] = useState<PerformanceData>();
-  const scope = useGlobalStore.use.scope();
-  const environments = useGlobalStore.use.environments();
+  const { scope, environments } = useConfigSelector();
   const [lastSetDataTimeStamp, setLastSetDataTimeStamp] = useState<number>();
   const previousLastSetDataTimeStamp = usePrevious(lastSetDataTimeStamp);
   const refreshTimerId = useRef<number>();

src/components/Highlights/Scaling/index.tsx

@@ -1,7 +1,7 @@
 import { Row, createColumnHelper } from "@tanstack/react-table";
 import { useEffect } from "react";
 import { SCALING_ISSUE_DOCUMENTATION_URL } from "../../../constants";
-import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
+import { useConfigSelector } from "../../../store/config/useConfigSelector";
 import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { getDurationString } from "../../../utils/getDurationString";
@@ -75,8 +75,7 @@ const demoData: EnvironmentScalingData[] = [
 
 export const Scaling = () => {
   const { data, getData } = useScalingData();
-  const scope = useGlobalStore.use.scope();
-  const environments = useGlobalStore.use.environments();
+  const { scope, environments } = useConfigSelector();
   const { goTo } = useHistory();
 
   useEffect(() => {