[Filters] Fix vanishing applied filters bug (#10429)

### WHY are these changes introduced?

Fixes an issue where if you have an applied filter set from the props
when the component initiates, and then you remove the selected filter
option, the filter pill disappears from the view. The correct behaviour
is that the filter pill should remain, but be empty.

### Video of existing issue 

https://github.com/Shopify/polaris/assets/2562596/880c0974-23ce-4f8c-bda4-5734e7c8faa3

### Video showing new intended behaviour



https://github.com/Shopify/polaris/assets/2562596/b31b60b4-2077-4982-8545-bc54e03f1e9c


### WHAT is this pull request doing?

The issue stemmed from having two sources of local pinned filters, and
them behaving in different ways. Now, by only using the
`localPinnedFilters` value, and setting the initial state value on
component mount, we can expect the component to behave identically for
both filter pills that are rendered on mount, and filter pills that are
rendered as a result of a state change within the component.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)


### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>

Author: mrcthms

.changeset/beige-jeans-scream.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Fixed `Filters` pinned filter pill not remaining when applied values are cleared

polaris-react/src/components/Filters/Filters.tsx

@@ -141,7 +141,6 @@ export function Filters({
   const {mdDown} = useBreakpoints();
   const {polarisSummerEditions2023: se23} = useFeatures();
   const [popoverActive, setPopoverActive] = useState(false);
-  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>([]);
   const hasMounted = useRef(false);
 
   useEffect(() => {
@@ -158,23 +157,23 @@ export function Filters({
   const appliedFilterKeys = appliedFilters?.map(({key}) => key);
 
   const pinnedFiltersFromPropsAndAppliedFilters = filters.filter(
-    ({pinned, key}) =>
-      (Boolean(pinned) || appliedFilterKeys?.includes(key)) &&
-      // Filters that are pinned in local state display at the end of our list
-      !localPinnedFilters.find((filterKey) => filterKey === key),
+    ({pinned, key}) => {
+      const isPinnedOrApplied =
+        Boolean(pinned) || appliedFilterKeys?.includes(key);
+      return isPinnedOrApplied;
+    },
+  );
+  const [localPinnedFilters, setLocalPinnedFilters] = useState<string[]>(
+    pinnedFiltersFromPropsAndAppliedFilters.map(({key}) => key),
   );
-  const pinnedFiltersFromLocalState = localPinnedFilters
+
+  const pinnedFilters = localPinnedFilters
     .map((key) => filters.find((filter) => filter.key === key))
     .reduce<FilterInterface[]>(
       (acc, filter) => (filter ? [...acc, filter] : acc),
       [],
     );
 
-  const pinnedFilters = [
-    ...pinnedFiltersFromPropsAndAppliedFilters,
-    ...pinnedFiltersFromLocalState,
-  ];
-
   const onFilterClick =
     ({key, onAction}: FilterInterface) =>
     () => {

polaris-react/src/components/Filters/tests/Filters.test.tsx

@@ -180,6 +180,31 @@ describe('<Filters />', () => {
     expect(wrapper).toContainReactComponent(ActionList);
   });
 
+  it('will not remove a pinned filter when it is removed from the applied filters array', () => {
+    const appliedFilters = [
+      {
+        ...defaultProps.filters[2],
+        label: 'Value is Baz',
+        value: ['Baz'],
+        onRemove: jest.fn(),
+      },
+    ];
+    const wrapper = mountWithApp(
+      <Filters {...defaultProps} appliedFilters={appliedFilters} />,
+    );
+
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Value is Baz',
+      selected: true,
+    });
+    wrapper.setProps({appliedFilters: []});
+
+    expect(wrapper.findAll(FilterPill)[1]).toHaveReactProps({
+      label: 'Baz',
+      selected: false,
+    });
+  });
+
   it('correctly invokes the onRemove callback when clicking on an applied filter', () => {
     const scrollSpy = jest.fn();
     HTMLElement.prototype.scroll = scrollSpy;