From cd232e7e2623a8b4a4465d5d70577ada464b0c49 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Wed, 28 Aug 2024 12:52:50 +0200 Subject: [PATCH] Do not create the new history step on tab change Clear service filter on backend info change --- src/components/Assets/AssetsFilter/styles.ts | 15 ---------- .../InsightsCatalog/FilterPanel/index.tsx | 28 ------------------- .../Insights/InsightsCatalog/styles.ts | 1 + .../Insights/Issues/IssuesFilter/styles.ts | 27 ++++++++++++------ src/components/Insights/index.tsx | 12 ++++++-- src/components/Main/index.tsx | 20 +++++++++++-- src/components/Navigation/Tabs/index.tsx | 2 +- .../RecentActivity/LiveView/styles.ts | 1 + 8 files changed, 47 insertions(+), 59 deletions(-) diff --git a/src/components/Assets/AssetsFilter/styles.ts b/src/components/Assets/AssetsFilter/styles.ts index b8836cb88..438e8263a 100644 --- a/src/components/Assets/AssetsFilter/styles.ts +++ b/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; diff --git a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx b/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx index 60656029c..79f06334c 100644 --- a/src/components/Insights/InsightsCatalog/FilterPanel/index.tsx +++ b/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); diff --git a/src/components/Insights/InsightsCatalog/styles.ts b/src/components/Insights/InsightsCatalog/styles.ts index ccdf32114..d710c9c8b 100644 --- a/src/components/Insights/InsightsCatalog/styles.ts +++ b/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}; `; diff --git a/src/components/Insights/Issues/IssuesFilter/styles.ts b/src/components/Insights/Issues/IssuesFilter/styles.ts index f1646ff6c..947528038 100644 --- a/src/components/Insights/Issues/IssuesFilter/styles.ts +++ b/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` diff --git a/src/components/Insights/index.tsx b/src/components/Insights/index.tsx index ba73a2475..d77e9bb2d 100644 --- a/src/components/Insights/index.tsx +++ b/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 = () => { diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx index c9b853755..54c059822 100644 --- a/src/components/Main/index.tsx +++ b/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( @@ -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: diff --git a/src/components/Navigation/Tabs/index.tsx b/src/components/Navigation/Tabs/index.tsx index ed01c55ef..30df10c16 100644 --- a/src/components/Navigation/Tabs/index.tsx +++ b/src/components/Navigation/Tabs/index.tsx @@ -97,7 +97,7 @@ export const Tabs = () => { }); if (!tab.isSelected) { - goTo(`/${tab.id}`); + goTo(`/${tab.id}`, { replace: true }); } } }; diff --git a/src/components/RecentActivity/LiveView/styles.ts b/src/components/RecentActivity/LiveView/styles.ts index a07a4409e..5ceaec67c 100644 --- a/src/components/RecentActivity/LiveView/styles.ts +++ b/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":