ref(reflux): remove index signature (#33407)

* ref(reflux): remove index signature

* fix(groupingStore): fix state call

* fix(store): no need to extend

* fix(store): add methods to interace

* ref(mergedToolbar): add ts-ignore comment

static/app/stores/groupingStore.tsx

@@ -1,5 +1,5 @@
 import pick from 'lodash/pick';
-import {createStore, StoreDefinition} from 'reflux';
+import {createStore} from 'reflux';
 
 import {mergeGroups} from 'sentry/actionCreators/group';
 import {
@@ -13,6 +13,8 @@ import {Group, Organization, Project} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import {makeSafeRefluxStore} from 'sentry/utils/makeSafeRefluxStore';
 
+import {CommonStoreDefinition} from './types';
+
 // Between 0-100
 const MIN_SCORE = 0.6;
 
@@ -114,7 +116,9 @@ type InternalDefinition = {
   api: Client;
 };
 
-interface GroupingStoreDefinition extends StoreDefinition, InternalDefinition {
+interface GroupingStoreDefinition
+  extends CommonStoreDefinition<State>,
+    InternalDefinition {
   getInitialState(): State;
   init(): void;
   isAllUnmergedSelected(): boolean;
@@ -615,6 +619,10 @@ const storeConfig: GroupingStoreDefinition = {
     this.trigger(state);
     return state;
   },
+
+  getState(): State {
+    return this.state;
+  },
 };
 
 const GroupingStore = createStore(makeSafeRefluxStore(storeConfig));

static/app/stores/guideStore.tsx

@@ -76,12 +76,14 @@ const defaultState: GuideStoreState = {
 interface GuideStoreDefinition extends StoreDefinition {
   browserHistoryListener: null | (() => void);
 
+  closeGuide(dismissed?: boolean): void;
   fetchSucceeded(data: GuidesServerData): void;
   nextStep(): void;
   recordCue(guide: string): void;
   registerAnchor(target: string): void;
   setForceHide(forceHide: boolean): void;
   state: GuideStoreState;
+  toStep(step: number): void;
   unregisterAnchor(target: string): void;
   updatePrevGuide(nextGuide: Guide | null): void;
 }

static/app/types/reflux.d.ts

@@ -4,8 +4,12 @@ import type {
 } from 'sentry/utils/makeSafeRefluxStore';
 import type {Store, StoreDefinition} from 'reflux';
 
+type RemoveIndex<T> = {
+  [P in keyof T as string extends P ? never : P]: T[P];
+};
+
 declare module 'reflux' {
   function createStore<T extends SafeStoreDefinition | StoreDefinition>(
     storeDefinition: T
-  ): Store & T;
+  ): RemoveIndex<Store & T>;
 }

static/app/views/organizationGroupDetails/groupMerged/mergedToolbar.tsx

@@ -30,6 +30,7 @@ class MergedToolbar extends React.Component<Props, State> {
   state: State = this.getInitialState();
 
   getInitialState() {
+    // @ts-ignore GroupingStore types are not correct, store.init dinamically sets these
     const {unmergeList, unmergeLastCollapsed, unmergeDisabled, enableFingerprintCompare} =
       GroupingStore;
 

tests/js/spec/views/organizationGroupDetails/groupMergedView.spec.jsx

@@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types';
 import {mountWithTheme} from 'sentry-test/enzyme';
 
 import {Client} from 'sentry/api';
+import GroupingStore from 'sentry/stores/groupingStore';
 import {GroupMergedView} from 'sentry/views/organizationGroupDetails/groupMerged';
 
 jest.mock('sentry/api');
@@ -37,6 +38,12 @@ describe('Issues -> Merged View', function () {
     });
   });
 
+  beforeEach(() => {
+    GroupingStore.init();
+  });
+  afterEach(() => {
+    GroupingStore.teardown();
+  });
   it('renders initially with loading component', function () {
     const wrapper = mountWithTheme(
       <GroupMergedView