fix(dashboards): temporary filters broken when changing values

static/app/views/dashboards/detail.tsx

@@ -516,6 +516,14 @@ class DashboardDetail extends Component<Props, State> {
         )
       : [''];
 
+    filterParams[DashboardFilterKeys.TEMPORARY_FILTERS] = activeFilters[
+      DashboardFilterKeys.TEMPORARY_FILTERS
+    ]?.length
+      ? activeFilters[DashboardFilterKeys.TEMPORARY_FILTERS].map(filter =>
+          JSON.stringify(filter)
+        )
+      : [''];
+
     if (
       !isEqualWith(activeFilters, dashboard.filters, (a, b) => {
         // This is to handle the case where dashboard filters has release:[] and the new filter is release:""
@@ -1187,7 +1195,7 @@ class DashboardDetail extends Component<Props, State> {
                                 isPreview={this.isPreview}
                                 onDashboardFilterChange={this.handleChangeFilter}
                                 shouldBusySaveButton={this.state.isSavingDashboardFilters}
-                                isPrebuiltDashboard={defined(dashboard.prebuiltId)}
+                                prebuiltDashboardId={dashboard.prebuiltId}
                                 onCancel={() => {
                                   resetPageFilters(dashboard, location);
                                   trackAnalytics('dashboards2.filter.cancel', {

static/app/views/dashboards/filtersBar.tsx

@@ -11,6 +11,7 @@ import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilt
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {User} from 'sentry/types/user';
+import {defined} from 'sentry/utils';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {ToggleOnDemand} from 'sentry/utils/performance/contexts/onDemandControl';
 import {ReleasesProvider} from 'sentry/utils/releases/releasesProvider';
@@ -28,6 +29,10 @@ import {
   getCombinedDashboardFilters,
   getDashboardFiltersFromURL,
 } from 'sentry/views/dashboards/utils';
+import {
+  PREBUILT_DASHBOARDS,
+  type PrebuiltDashboardId,
+} from 'sentry/views/dashboards/utils/prebuiltConfigs';
 
 import {checkUserHasEditAccess} from './utils/checkUserHasEditAccess';
 import ReleasesSelectControl from './releasesSelectControl';
@@ -44,9 +49,9 @@ type FiltersBarProps = {
   onDashboardFilterChange: (activeFilters: DashboardFilters) => void;
   dashboardCreator?: User;
   dashboardPermissions?: DashboardPermissions;
-  isPrebuiltDashboard?: boolean;
   onCancel?: () => void;
   onSave?: () => Promise<void>;
+  prebuiltDashboardId?: PrebuiltDashboardId;
   shouldBusySaveButton?: boolean;
 };
 
@@ -63,14 +68,18 @@ export default function FiltersBar({
   onDashboardFilterChange,
   onSave,
   shouldBusySaveButton,
-  isPrebuiltDashboard,
+  prebuiltDashboardId,
 }: FiltersBarProps) {
   const {selection} = usePageFilters();
   const organization = useOrganization();
   const currentUser = useUser();
   const {teams: userTeams} = useUserTeams();
   const getSearchBarData = useDatasetSearchBarData();
   const hasDrillDownFlowsFeature = useHasDrillDownFlows();
+  const isPrebuiltDashboard = defined(prebuiltDashboardId);
+  const prebuiltDashboardFilters: GlobalFilter[] = prebuiltDashboardId
+    ? (PREBUILT_DASHBOARDS[prebuiltDashboardId].filters.globalFilter ?? [])
+    : [];
 
   const hasEditAccess = checkUserHasEditAccess(
     currentUser,
@@ -106,9 +115,12 @@ export default function FiltersBar({
 
   const updateGlobalFilters = (newGlobalFilters: GlobalFilter[]) => {
     setActiveGlobalFilters(newGlobalFilters);
+    const temporaryFilters = newGlobalFilters.filter(filter => filter.isTemporary);
+    const globalFilters = newGlobalFilters.filter(filter => !filter.isTemporary);
     onDashboardFilterChange({
       [DashboardFilterKeys.RELEASE]: selectedReleases,
-      [DashboardFilterKeys.GLOBAL_FILTER]: newGlobalFilters,
+      [DashboardFilterKeys.GLOBAL_FILTER]: globalFilters,
+      [DashboardFilterKeys.TEMPORARY_FILTERS]: temporaryFilters,
     });
   };
 
@@ -163,6 +175,14 @@ export default function FiltersBar({
         <Fragment>
           {activeGlobalFilters.map(filter => (
             <GenericFilterSelector
+              disableRemoveFilter={
+                isPrebuiltDashboard &&
+                prebuiltDashboardFilters.some(
+                  prebuiltFilter =>
+                    prebuiltFilter.tag.key === filter.tag.key &&
+                    prebuiltFilter.dataset === filter.dataset
+                )
+              }
               key={filter.tag.key + filter.value}
               globalFilter={filter}
               searchBarData={getSearchBarData(filter.dataset)}

static/app/views/dashboards/globalFilter/filterSelector.tsx

@@ -50,13 +50,15 @@ type FilterSelectorProps = {
   onRemoveFilter: (filter: GlobalFilter) => void;
   onUpdateFilter: (filter: GlobalFilter) => void;
   searchBarData: SearchBarData;
+  disableRemoveFilter?: boolean;
 };
 
 function FilterSelector({
   globalFilter,
   searchBarData,
   onRemoveFilter,
   onUpdateFilter,
+  disableRemoveFilter,
 }: FilterSelectorProps) {
   const {selection} = usePageFilters();
 
@@ -275,13 +277,15 @@ function FilterSelector({
           {t('Clear')}
         </StyledButton>
       )}
-      <StyledButton
-        aria-label={t('Remove Filter')}
-        size="zero"
-        onClick={() => onRemoveFilter(globalFilter)}
-      >
-        {t('Remove Filter')}
-      </StyledButton>
+      {!disableRemoveFilter && (
+        <StyledButton
+          aria-label={t('Remove Filter')}
+          size="zero"
+          onClick={() => onRemoveFilter(globalFilter)}
+        >
+          {t('Remove Filter')}
+        </StyledButton>
+      )}
     </Flex>
   );
 

static/app/views/dashboards/globalFilter/genericFilterSelector.tsx

@@ -10,6 +10,7 @@ export type GenericFilterSelectorProps = {
   onRemoveFilter: (filter: GlobalFilter) => void;
   onUpdateFilter: (filter: GlobalFilter) => void;
   searchBarData: SearchBarData;
+  disableRemoveFilter?: boolean;
 };
 
 function getFilterSelector(

static/app/views/dashboards/types.tsx

@@ -192,6 +192,7 @@ export type GlobalFilter = {
   tag: Tag;
   // The raw filter condition string (e.g. 'tagKey:[values,...]')
   value: string;
+  isTemporary?: boolean;
 };
 
 /**

static/app/views/dashboards/utils.tsx

@@ -574,7 +574,7 @@ export function getDashboardFiltersFromURL(location: Location): DashboardFilters
         dashboardFilters[key] = queryFilters
           .map(filter => {
             try {
-              return JSON.parse(filter);
+              return {...JSON.parse(filter), isTemporary: true};
             } catch (error) {
               return null;
             }
@@ -633,16 +633,18 @@ export function getCombinedDashboardFilters(
 ): GlobalFilter[] {
   const finalFilters = [...(globalFilters ?? [])];
   const temporaryFiltersCopy = [...(temporaryFilters ?? [])];
+
   finalFilters.forEach((filter, idx) => {
     // if a temporary filter exists for the same dataset and key, override it and delete it from the temporary filters to avoid duplicates
     const temporaryFilter = temporaryFiltersCopy.find(
       tf => tf.dataset === filter.dataset && tf.tag.key === filter.tag.key
     );
     if (temporaryFilter) {
-      finalFilters[idx] = {...filter, value: temporaryFilter.value};
+      finalFilters[idx] = {...temporaryFilter};
       temporaryFiltersCopy.splice(temporaryFiltersCopy.indexOf(temporaryFilter), 1);
     }
   });
+
   return [...finalFilters, ...temporaryFiltersCopy];
 }