Added team filter support (#195)

Author: GurinderRawala

public/app/core/reducers/fn-slice.ts

@@ -15,6 +15,9 @@ export interface FnGlobalState {
   queryParams: AnyObject;
   hiddenVariables: readonly string[];
   fnGlobalTimeRange: TimeRange | null;
+  metadata: {
+    teams: string[];
+  };
 }
 
 export type UpdateFNGlobalStateAction = PayloadAction<Partial<FnGlobalState>>;
@@ -57,6 +60,9 @@ export const INITIAL_FN_STATE: FnGlobalState = {
   queryParams: {},
   hiddenVariables: [],
   fnGlobalTimeRange: null,
+  metadata: {
+    teams: [],
+  },
 } as const;
 
 const reducers: SliceCaseReducers<FnGlobalState> = {

public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx

@@ -53,8 +53,21 @@ export const optionPickerFactory = <Model extends VariableWithOptions | Variable
       };
     }
 
+    const isMfeTeamFilter = state.fnGlobalState.FNDashboard && state.fnGlobalState.metadata.teams.length;
+
+    const teamFilter = isMfeTeamFilter
+      ? state.fnGlobalState.metadata.teams.map((t) => ({
+          text: t,
+          value: t,
+          selected: false,
+        }))
+      : [];
+
+    const p = getVariablesState(rootStateKey, state).optionsPicker;
+
     return {
-      picker: getVariablesState(rootStateKey, state).optionsPicker,
+      picker: { ...p, ...(teamFilter.length && { options: [...p.options, ...teamFilter] }) },
+      mfeState: state.fnGlobalState,
     };
   };
 
@@ -149,7 +162,9 @@ export const optionPickerFactory = <Model extends VariableWithOptions | Variable
           <VariableInput
             id={VARIABLE_PREFIX + id}
             value={picker.queryValue}
-            onChange={this.onFilterOrSearchOptions}
+            onChange={(value) => {
+              this.onFilterOrSearchOptions(value);
+            }}
             onNavigate={this.onNavigate}
             aria-expanded={true}
             aria-controls={`options-${id}`}

public/app/fn-app/create-mfe.ts

@@ -204,8 +204,8 @@ class createMfe {
 
           const initialState: FnGlobalState = {
             ...INITIAL_FN_STATE,
-            FNDashboard: true,
             ...pick(props, ...fnStateProps),
+            FNDashboard: true,
           };
 
           createMfe.logger.info('[FN Grafana] Dispatching initial state.', { initialState });
@@ -280,6 +280,7 @@ class createMfe {
             version: other.version,
             queryParams: other.queryParams,
             controlsContainer: other.controlsContainer,
+            metadata: other.metadata,
           })
         );
       }

public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx

@@ -7,7 +7,7 @@ import { DashboardRoutes, StoreState, useSelector } from 'app/types';
 
 import { FNDashboardProps } from '../types';
 
-const locationService = locationSrv as HistoryWrapper;
+export const mfeLocationService = locationSrv as HistoryWrapper;
 
 const DEFAULT_DASHBOARD_PAGE_PROPS: Pick<DashboardPageProps, 'history' | 'route'> & {
   match: Pick<DashboardPageProps['match'], 'isExact' | 'path' | 'url'>;
@@ -17,7 +17,7 @@ const DEFAULT_DASHBOARD_PAGE_PROPS: Pick<DashboardPageProps, 'history' | 'route'
     path: '/d/:uid/:slug?',
     url: '',
   },
-  history: {} as DashboardPageProps['history'],
+  history: mfeLocationService.getHistory(),
   route: {
     routeName: DashboardRoutes.Normal,
     path: '/d/:uid/:slug?',
@@ -50,7 +50,7 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
   }, [firstError, setErrors]);
 
   useEffect(() => {
-    locationService.fnPathnameChange(window.location.pathname, queryParams);
+    mfeLocationService.fnPathnameChange(window.location.pathname, queryParams);
   }, [queryParams]);
 
   const dashboardPageProps: DashboardPageProps = useMemo(
@@ -62,7 +62,7 @@ export const RenderFNDashboard: FC<FNDashboardProps> = (props) => {
             ...props,
           },
         },
-        location: locationService.getLocation(),
+        location: mfeLocationService.getLocation(),
         queryParams,
         hiddenVariables,
         controlsContainer,

public/app/fn-app/types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { GrafanaThemeType } from '@grafana/data';
+import { FnGlobalState } from 'app/core/reducers/fn-slice';
 
 export type FailedToMountGrafanaErrorName = 'FailedToMountGrafana';
 
@@ -16,17 +16,9 @@ export type GrafanaMicroFrontendActions = {
 export type AnyObject<K extends string | number | symbol = string, V = any> = {
   [key in K]: V;
 };
-
-export interface FNDashboardProps {
+export interface FNDashboardProps extends FnGlobalState {
   name: string;
-  uid: string;
-  slug: string;
-  version: number;
-  mode: GrafanaThemeType.Dark | GrafanaThemeType.Light;
-  queryParams: Record<string, string>;
   fnError?: ReactNode;
-  pageTitle?: string;
-  controlsContainer: string | null;
   isLoading: (isLoading: boolean) => void;
   setErrors: (errors?: { [K: number | string]: string }) => void;
   hiddenVariables: readonly string[];