Do not create the new history step on tab change

src/components/Assets/AssetsFilter/styles.ts

@@ -27,21 +27,6 @@ export const FilterCategoryName = styled.div`
   color: ${grayScale[400]};
 `;
 
-export const MenuButton = styled.button`
-  border: 1px solid ${({ theme }) => theme.colors.stroke.primary};
-  background: ${({ theme }) => theme.colors.surface.secondary};
-  border-radius: 4px;
-  padding: 4px 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-export const MenuButtonChevronIconContainer = styled.span`
-  color: ${({ theme }) => theme.colors.icon.primary};
-`;
-
 export const Footer = styled.div`
   padding: 8px 0;
   display: flex;

src/components/Insights/InsightsCatalog/FilterPanel/index.tsx

@@ -1,7 +1,4 @@
-import { useEffect } from "react";
-import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore";
 import { useInsightsStore } from "../../../../containers/Main/stores/useInsightsStore";
-import { usePrevious } from "../../../../hooks/usePrevious";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { InsightFilterType } from "../types";
 import { FilterChip } from "./FilterChip";
@@ -15,31 +12,6 @@ export const FilterPanel = ({
 }: FilterPanelProps) => {
   const filters = useInsightsStore.use.filters();
   const setFilters = useInsightsStore.use.setFilters();
-  const environment = useGlobalStore.use.environment();
-  const environmentId = environment?.id;
-  const previousEnvironmentId = usePrevious(environmentId);
-  const scope = useGlobalStore.use.scope();
-  const previousScope = usePrevious(scope);
-  const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId;
-  const previousScopeSpanCodeObjectId = previousScope?.span?.spanCodeObjectId;
-
-  useEffect(() => {
-    if (
-      Boolean(
-        previousEnvironmentId && previousEnvironmentId !== environmentId
-      ) ||
-      (previousScope && previousScopeSpanCodeObjectId !== scopeSpanCodeObjectId)
-    ) {
-      setFilters([]);
-    }
-  }, [
-    previousEnvironmentId,
-    environmentId,
-    previousScope,
-    setFilters,
-    scopeSpanCodeObjectId,
-    previousScopeSpanCodeObjectId
-  ]);
 
   const handleFilterChipClick = (selectedFilter?: InsightFilterType) => {
     const newFilters = new Set(filters);

src/components/Insights/InsightsCatalog/styles.ts

@@ -73,6 +73,7 @@ export const BackToAllInsightsButton = styled.button`
   display: flex;
   gap: 4px;
   align-items: center;
+  cursor: pointer;
   color: ${({ theme }) => theme.colors.v3.text.primary};
 `;
 

src/components/Insights/Issues/IssuesFilter/styles.ts

@@ -1,19 +1,28 @@
 import styled from "styled-components";
+import { NewButton } from "../../../common/v3/NewButton";
 import { Select } from "../../../common/v3/Select";
 
-export const MenuButton = styled.button`
-  border: 1px solid ${({ theme }) => theme.colors.stroke.primary};
-  background: ${({ theme }) => theme.colors.surface.secondary};
-  border-radius: 4px;
-  padding: 4px 8px;
+export const Footer = styled.div`
+  padding: 8px 0;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  width: 100%;
+  align-items: center;
 `;
 
-export const MenuButtonChevronIconContainer = styled.span`
-  color: ${({ theme }) => theme.colors.icon.primary};
+export const ClearAllButton = styled(NewButton)`
+  padding: 0;
+
+  span {
+    color: ${({ theme }) => theme.colors.v3.status.high};
+  }
+
+  &:hover:enabled {
+    color: ${({ theme }) => theme.colors.v3.status.high};
+
+    span {
+      color: ${({ theme }) => theme.colors.v3.status.high};
+    }
+  }
 `;
 
 export const InsightIconContainer = styled.div`

src/components/Insights/index.tsx

@@ -250,6 +250,9 @@ export const Insights = ({ insightViewType }: InsightsProps) => {
   const scopeSpanCodeObjectId = scope?.span?.spanCodeObjectId;
   const previousScope = usePrevious(scope);
   const previousScopeSpanCodeObjectId = previousScope?.span?.spanCodeObjectId;
+  const environment = useGlobalStore.use.environment();
+  const environmentId = environment?.id;
+  const previousEnvironmentId = usePrevious(environmentId);
 
   useEffect(() => {
     return () => {
@@ -313,7 +316,7 @@ export const Insights = ({ insightViewType }: InsightsProps) => {
     persistedFilters
   ]);
 
-  // Reset filters on backend instance or scope change
+  // Reset filters on backend instance, scope or environment change
   useEffect(() => {
     if (
       (areFiltersRehydrated &&
@@ -323,7 +326,8 @@ export const Insights = ({ insightViewType }: InsightsProps) => {
         )) ||
       Boolean(
         previousScope && previousScopeSpanCodeObjectId !== scopeSpanCodeObjectId
-      )
+      ) ||
+      Boolean(previousEnvironmentId && previousEnvironmentId !== environmentId)
     ) {
       setFilteredInsightTypes([]);
       setFilters([]);
@@ -337,7 +341,9 @@ export const Insights = ({ insightViewType }: InsightsProps) => {
     areFiltersRehydrated,
     persistedFilters,
     setFilteredInsightTypes,
-    setFilters
+    setFilters,
+    previousEnvironmentId,
+    environmentId
   ]);
 
   const handleSlackLinkClick = () => {

src/components/Main/index.tsx

@@ -11,6 +11,7 @@ import { logger } from "../../logging";
 import { trackingEvents as globalTrackingEvents } from "../../trackingEvents";
 import { isUndefined } from "../../typeGuards/isUndefined";
 import { sendTrackingEvent } from "../../utils/actions/sendTrackingEvent";
+import { areBackendInfosEqual } from "../../utils/areBackendInfosEqual";
 import { Navigation } from "../Navigation";
 import { TAB_IDS } from "../Navigation/Tabs/types";
 import { Scope } from "../common/App/types";
@@ -54,6 +55,7 @@ export const Main = () => {
   const userId = userInfo?.id;
   const previousUserId = usePrevious(userId);
   const backendInfo = useGlobalStore.use.backendInfo();
+  const previousBackendInfo = usePrevious(backendInfo);
   const { goTo } = useHistory();
   const updateBrowserLocation = useBrowserLocationUpdater();
   const [persistedServices, setPersistedServices] = usePersistence<string[]>(
@@ -82,12 +84,24 @@ export const Main = () => {
     }
   }, [selectedServices, isInitialized, setPersistedServices]);
 
-  // Clear selected services when environment is changed
+  // Clear selected services when backend instance or environment is changed
   useEffect(() => {
-    if (previousEnvironment && previousEnvironment.id !== environment?.id) {
+    if (
+      Boolean(
+        previousBackendInfo &&
+          !areBackendInfosEqual(previousBackendInfo, backendInfo)
+      ) ||
+      (previousEnvironment && previousEnvironment.id !== environment?.id)
+    ) {
       setSelectedServices([]);
     }
-  }, [setSelectedServices, previousEnvironment, environment?.id]);
+  }, [
+    setSelectedServices,
+    previousEnvironment,
+    environment?.id,
+    previousBackendInfo,
+    backendInfo
+  ]);
 
   useEffect(() => {
     // clear the history in following cases:

src/components/Navigation/Tabs/index.tsx

@@ -97,7 +97,7 @@ export const Tabs = () => {
       });
 
       if (!tab.isSelected) {
-        goTo(`/${tab.id}`);
+        goTo(`/${tab.id}`, { replace: true });
       }
     }
   };

src/components/RecentActivity/LiveView/styles.ts

@@ -286,6 +286,7 @@ export const LatestDataButton = styled.button`
   align-self: flex-end;
   font-size: 14px;
   font-family: inherit;
+  cursor: pointer;
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":