Fix env empty state

src/components/Assets/index.tsx

@@ -122,7 +122,10 @@ export const Assets = () => {
       );
     }
 
-    if (!selectedFilters && !selectedServices) {
+    if (
+      !config.environments?.length ||
+      (!selectedFilters && !selectedServices)
+    ) {
       return <NoDataMessage type={"noDataYet"} />;
     }
 

src/components/Insights/index.tsx

@@ -155,6 +155,34 @@ const renderInsightTicket = (
   return null;
 };
 
+const NoDataYet = () => {
+  const handleTroubleshootingLinkClick = () => {
+    sendTrackingEvent(globalTrackingEvents.TROUBLESHOOTING_LINK_CLICKED, {
+      origin: "insights"
+    });
+
+    sendMessage(globalActions.OPEN_TROUBLESHOOTING_GUIDE);
+  };
+
+  return (
+    <EmptyState
+      icon={CardsIcon}
+      title={"No data yet"}
+      content={
+        <>
+          <s.EmptyStateDescription>
+            Trigger actions that call this application to learn more about its
+            runtime behavior
+          </s.EmptyStateDescription>
+          <s.TroubleshootingLink onClick={handleTroubleshootingLinkClick}>
+            Not seeing your application data?
+          </s.TroubleshootingLink>
+        </>
+      }
+    />
+  );
+};
+
 const sendMessage = (action: string, data?: object) => {
   return window.sendMessageToDigma({
     action,
@@ -282,6 +310,10 @@ export const Insights = (props: InsightsProps) => {
       return <EmptyState content={<CircleLoader size={32} />} />;
     }
 
+    if (!config.environments?.length) {
+      return <NoDataYet />;
+    }
+
     switch (data?.insightsStatus) {
       case InsightsStatus.STARTUP:
         return (
@@ -321,23 +353,7 @@ export const Insights = (props: InsightsProps) => {
           />
         );
       case InsightsStatus.NO_SPANS_DATA:
-        return (
-          <EmptyState
-            icon={CardsIcon}
-            title={"No data yet"}
-            content={
-              <>
-                <s.EmptyStateDescription>
-                  Trigger actions that call this application to learn more about
-                  its runtime behavior
-                </s.EmptyStateDescription>
-                <s.TroubleshootingLink onClick={handleTroubleshootingLinkClick}>
-                  Not seeing your application data?
-                </s.TroubleshootingLink>
-              </>
-            }
-          />
-        );
+        return <NoDataYet />;
       case InsightsStatus.NO_OBSERVABILITY:
         return (
           <EmptyState

src/components/Navigation/EnvironmentBar/types.ts

@@ -1,7 +1,7 @@
 import { Environment } from "../../common/App/types";
 
 export interface EnvironmentBarProps {
-  selectedEnvironment?: Environment;
+  selectedEnvironment?: Environment | null;
   isMenuOpen?: boolean;
   onClick: () => void;
   isDisabled?: boolean;

src/components/Navigation/ScopeNavigation/index.tsx

@@ -2,34 +2,46 @@ import { useContext, useEffect, useState } from "react";
 import { actions } from "../../../actions";
 import { dispatcher } from "../../../dispatcher";
 import { usePrevious } from "../../../hooks/usePrevious";
-import { HistoryManager, HistoryStep } from "../../../utils/HistoryManager";
+import { HistoryManager } from "../../../utils/HistoryManager";
 import { ConfigContext } from "../../common/App/ConfigContext";
 import { Scope } from "../../common/App/types";
-import { ChangeEnvironmentPayload, ChangeViewPayload } from "../types";
+import {
+  ChangeEnvironmentPayload,
+  ChangeScopePayload,
+  ChangeViewPayload
+} from "../types";
 import { actions as globalActions } from "./../actions";
 import { HistoryNavigationPanel } from "./HistoryNavigationPanel";
 import { ScopeNavigationProps } from "./types";
 
-const sendMessage = (historyStep: HistoryStep) => {
-  if (historyStep.scope) {
-    window.sendMessageToDigma({
-      action: globalActions.CHANGE_SCOPE,
-      payload: {
-        ...historyStep.scope
-      }
-    });
-  }
+const changeScope = (scope: Scope | null) => {
+  window.sendMessageToDigma<ChangeScopePayload>({
+    action: globalActions.CHANGE_SCOPE,
+    payload: {
+      span: scope?.span || null
+    }
+  });
 };
 
 export const ScopeNavigation = (props: ScopeNavigationProps) => {
   const [historyManager, setHistoryManager] = useState<HistoryManager>(
     new HistoryManager()
   );
-  const { environment } = useContext(ConfigContext);
+  const { environment, environments } = useContext(ConfigContext);
   const previousTabId = usePrevious(props.currentTabId);
   const previousEnvironment = usePrevious(environment);
   const previousSate = usePrevious(historyManager.getCurrent());
 
+  useEffect(() => {
+    if (
+      !environment ||
+      !environments?.find((x) => x.originalName == environment?.originalName)
+    ) {
+      сhangeScope(null);
+      setHistoryManager(new HistoryManager());
+    }
+  }, [environment, environments]);
+
   useEffect(() => {
     const currentStep = historyManager.getCurrent();
     if (
@@ -100,15 +112,15 @@ export const ScopeNavigation = (props: ScopeNavigationProps) => {
 
   const handleBackClick = () => {
     const currentStep = historyManager.back();
-    if (currentStep) {
-      sendMessage(currentStep);
+    if (currentStep && currentStep.scope) {
+      changeScope(currentStep.scope);
     }
   };
 
   const handleNexClick = () => {
     const currentStep = historyManager.forward();
-    if (currentStep) {
-      sendMessage(currentStep);
+    if (currentStep && currentStep.scope) {
+      changeScope(currentStep.scope);
     }
   };
 

src/components/Navigation/index.tsx

@@ -169,20 +169,19 @@ export const Navigation = () => {
     if (
       config.environments &&
       config.environments.length > 0 &&
-      !config.environment
+      (!config.environment ||
+        !config.environments.find(
+          (x) => x.originalName == config.environment?.originalName
+        ))
     ) {
-      setSelectedEnvironment(config.environments[0]);
+      handleEnvironmentChange(config.environments[0]);
     }
 
     if (config.environments && config.environments.length === 0) {
       setSelectedEnvironment(undefined);
     }
   }, [config.environments, config.environment]);
 
-  useEffect(() => {
-    setSelectedEnvironment(config.environment);
-  }, [config.environment]);
-
   useEffect(() => {
     setIsAutoFixing(false);
     setIsAnnotationAdding(false);

src/components/Navigation/types.ts

@@ -16,7 +16,7 @@ export interface OpenDocumentationPayload {
 }
 
 export interface OpenDashboardPayload {
-  environment?: Environment;
+  environment?: Environment | null;
 }
 
 export interface ChangeScopePayload {

src/components/common/App/index.tsx

@@ -195,6 +195,13 @@ export const App = (props: AppProps) => {
           ...config,
           environments: data.environments as Environment[]
         }));
+
+        if (!data.environments.length) {
+          setConfig((config) => ({
+            ...config,
+            environment: null
+          }));
+        }
       }
     };
 

src/components/common/App/types.ts

@@ -82,7 +82,7 @@ export interface ConfigContextData {
   isDockerComposeInstalled: boolean;
   userEmail: string;
   userRegistrationEmail: string;
-  environment: Environment | undefined;
+  environment?: Environment | null;
   backendInfo: BackendInfo | undefined;
   environments: Environment[] | undefined;
   scope: Scope | undefined;