7829 Read hiddenVariables, mode, FNDashboard from grfana's state (#44)

Co-authored-by: Katarzyna Ziomek-Zdanowicz <[email protected]>

Author: 2 people

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

@@ -1,8 +1,6 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { WritableDraft } from 'immer/dist/internal';
+import { createSlice, PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit';
 
 import { GrafanaThemeType } from '@grafana/data';
-import { dispatch } from 'app/store/store';
 
 import { AnyObject } from '../../fn-app/types';
 
@@ -14,17 +12,41 @@ export interface FnGlobalState {
   controlsContainer: string | null;
   pageTitle: string;
   queryParams: AnyObject;
-  hiddenVariables: string[];
+  hiddenVariables: readonly string[];
 }
 
-export type UpdateFNGlobalStateAction = PayloadAction<{
-  type: keyof FnGlobalState;
-  payload: FnGlobalState[keyof FnGlobalState];
-}>;
+export type UpdateFNGlobalStateAction = PayloadAction<Partial<FnGlobalState>>;
+
+export type SetFnStateAction = PayloadAction<Omit<FnGlobalState, 'hiddenVariables'>>;
+
+export type FnPropMappedFromState = Extract<keyof FnGlobalState, 'FNDashboard' | 'hiddenVariables' | 'mode'>;
+export type FnStateProp = keyof FnGlobalState;
+
+export type FnPropsMappedFromState = Pick<FnGlobalState, FnPropMappedFromState>;
+
+export const fnStateProps: FnStateProp[] = [
+  'FNDashboard',
+  'controlsContainer',
+  'hiddenVariables',
+  'mode',
+  'pageTitle',
+  'queryParams',
+  'slug',
+  'uid',
+];
+
+export const fnPropsMappedFromState: readonly FnPropMappedFromState[] = [
+  'FNDashboard',
+  'hiddenVariables',
+  'mode',
+] as const;
 
 const INITIAL_MODE = GrafanaThemeType.Light;
 
-const initialState: FnGlobalState = {
+export const FN_STATE_KEY = 'fnGlobalState';
+
+export const INITIAL_FN_STATE: FnGlobalState = {
+  // NOTE: initial value is false
   FNDashboard: false,
   uid: '',
   slug: '',
@@ -33,37 +55,25 @@ const initialState: FnGlobalState = {
   pageTitle: '',
   queryParams: {},
   hiddenVariables: [],
-};
+} as const;
 
-const fnSlice = createSlice({
-  name: 'fnGlobalState',
-  initialState,
-  reducers: {
-    setInitialMountState: (state, action: PayloadAction<Omit<FnGlobalState, 'hiddenVariables'>>) => {
-      return { ...state, ...action.payload };
-    },
-    updateFnState: (state: WritableDraft<FnGlobalState>, action: UpdateFNGlobalStateAction) => {
-      const { type, payload } = action.payload;
-
-      return {
-        ...state,
-        [type]: payload,
-      };
-    },
+const reducers: SliceCaseReducers<FnGlobalState> = {
+  updateFnState: (state, action: SetFnStateAction) => {
+    return { ...state, ...action.payload };
+  },
+  updatePartialFnStates: (state, action: UpdateFNGlobalStateAction) => {
+    return {
+      ...state,
+      ...action.payload,
+    };
   },
+};
+
+const fnSlice = createSlice<FnGlobalState, SliceCaseReducers<FnGlobalState>, string>({
+  name: FN_STATE_KEY,
+  initialState: INITIAL_FN_STATE,
+  reducers,
 });
 
-export const { updateFnState, setInitialMountState } = fnSlice.actions;
+export const { updatePartialFnStates, updateFnState } = fnSlice.actions;
 export const fnSliceReducer = fnSlice.reducer;
-
-export const updateFNGlobalState = (
-  type: keyof FnGlobalState,
-  payload: UpdateFNGlobalStateAction['payload']['payload']
-): void => {
-  dispatch(
-    updateFnState({
-      type,
-      payload,
-    })
-  );
-};

public/app/features/dashboard/components/SubMenu/SubMenu.tsx

@@ -4,8 +4,7 @@ import * as React from 'react';
 import { connect, MapStateToProps } from 'react-redux';
 
 import { AnnotationQuery, DataQuery, TypedVariableModel, GrafanaTheme2 } from '@grafana/data';
-import { DashboardLink } from '@grafana/schema';
-import { stylesFactory, Themeable2, withTheme2 } from '@grafana/ui';
+import { FnGlobalState } from 'app/core/reducers/fn-slice';
 
 import { StoreState } from '../../../../types';
 import { getSubMenuVariables, getVariablesState } from '../../../variables/state/selectors';
@@ -14,16 +13,19 @@ import { DashboardModel } from '../../state';
 import { Annotations } from './Annotations';
 import { DashboardLinks } from './DashboardLinks';
 import { SubMenuItems } from './SubMenuItems';
+import { VariableModel } from 'app/features/variables/types';
+import { Themeable2, stylesFactory, withTheme2 } from '@grafana-ui';
+import { DashboardLink } from '@grafana/schema/dist/esm/index';
 
 interface OwnProps extends Themeable2 {
   dashboard: DashboardModel;
   links: DashboardLink[];
   annotations: AnnotationQuery[];
-  hiddenVariables?: string[];
 }
 
 interface ConnectedProps {
   variables: TypedVariableModel[];
+  hiddenVariables: FnGlobalState['hiddenVariables'];
 }
 
 interface DispatchProps {}
@@ -79,8 +81,10 @@ class SubMenuUnConnected extends PureComponent<Props> {
 const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, ownProps) => {
   const { uid } = ownProps.dashboard;
   const templatingState = getVariablesState(uid, state);
+
   return {
     variables: getSubMenuVariables(uid, templatingState.variables),
+    hiddenVariables: state.fnGlobalState.hiddenVariables,
   };
 };
 

public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx

@@ -4,17 +4,19 @@ import { useEffect, useState, FC } from 'react';
 import { GrafanaTheme2, TypedVariableModel, VariableHide } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { useStyles2 } from '@grafana/ui';
+import { FnGlobalState } from 'app/core/reducers/fn-slice';
 
 import { PickerRenderer } from '../../../variables/pickers/PickerRenderer';
 
 interface Props {
   variables: TypedVariableModel[];
   readOnly?: boolean;
-  hiddenVariables?: string[];
+  hiddenVariables?: FnGlobalState['hiddenVariables'];
 }
 
 export const SubMenuItems: FC<Props> = ({ variables, readOnly, hiddenVariables }) => {
   const [visibleVariables, setVisibleVariables] = useState<TypedVariableModel[]>([]);
+  const styles = useStyles2(getStyles);
 
   useEffect(() => {
     setVisibleVariables(variables.filter((state) => state.hide !== VariableHide.hideVariable));
@@ -34,7 +36,7 @@ export const SubMenuItems: FC<Props> = ({ variables, readOnly, hiddenVariables }
         return (
           <div
             key={variable.id}
-            className="submenu-item gf-form-inline"
+             className={styles.submenuItem}
             data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}
           >
             <PickerRenderer variable={variable} readOnly={readOnly} />

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -15,6 +15,7 @@ import { createErrorNotification } from 'app/core/copy/appNotification';
 import { getKioskMode } from 'app/core/navigation/kiosk';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { ID_PREFIX } from 'app/core/reducers/navBarTree';
+import { FnGlobalState } from 'app/core/reducers/fn-slice';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { PanelModel } from 'app/features/dashboard/state';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
@@ -50,7 +51,10 @@ import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
 export type MapStateToDashboardPageProps = MapStateToProps<
-  Pick<DashboardState, 'initPhase' | 'initError'> & { dashboard: ReturnType<DashboardState['getModel']> },
+  Pick<DashboardState, 'initPhase' | 'initError'> & { dashboard: ReturnType<DashboardState['getModel']> } & Pick<
+      FnGlobalState,
+      'FNDashboard'
+    >,
   OwnProps,
   StoreState
 >;
@@ -70,6 +74,7 @@ export const mapStateToProps: MapStateToDashboardPageProps = (state) => ({
   initError: state.dashboard.initError,
   dashboard: state.dashboard.getModel(),
   navIndex: state.navIndex,
+  FNDashboard: state.fnGlobalState.FNDashboard,
 });
 
 const mapDispatchToProps: MapDispatchToDashboardPageProps = {
@@ -84,9 +89,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 
 type OwnProps = {
   isPublic?: boolean;
-  isFNDashboard?: boolean;
   controlsContainer?: string | null;
-  hiddenVariables?: string[];
   fnLoader?: ReactNode;
 };
 
@@ -167,9 +170,11 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
 
   componentDidMount() {
     this.initDashboard();
-    const { isPublic, isFNDashboard } = this.props;
-    if (!isPublic && !isFNDashboard) {
-      this.forceRouteReloadCounter = (this.props.history.location.state as any)?.routeReloadCounter || 0;
+
+    const { isPublic, FNDashboard } = this.props;
+
+    if (!isPublic && !FNDashboard) {
+      this.forceRouteReloadCounter = (this.props.history.location?.state as any)?.routeReloadCounter || 0;
     }
   }
 
@@ -183,7 +188,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   }
 
   initDashboard() {
-    const { dashboard, isPublic, match, queryParams, isFNDashboard } = this.props;
+    const { dashboard, isPublic, match, queryParams, FNDashboard } = this.props;
 
     if (dashboard) {
       this.closeDashboard();
@@ -196,7 +201,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       urlFolderUid: queryParams.folderUid,
       panelType: queryParams.panelType,
       routeName: this.props.route.routeName,
-      fixUrl: !isPublic && !isFNDashboard,
+      fixUrl: !isPublic && !FNDashboard,
       accessToken: match.params.accessToken,
       keybindingSrv: this.context.keybindings,
     });
@@ -206,13 +211,13 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
-    const { dashboard, match, templateVarsChangedInUrl, isPublic, isFNDashboard } = this.props;
+    const { dashboard, match, templateVarsChangedInUrl, isPublic, FNDashboard } = this.props;
 
     if (!dashboard) {
       return;
     }
 
-    if (!isPublic && !isFNDashboard) {
+    if (!isPublic && !FNDashboard) {
       const routeReloadCounter = (this.props.history.location?.state as any)?.routeReloadCounter;
 
       if (
@@ -391,11 +396,11 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   };
 
   render() {
-    const { dashboard, initError, queryParams, isPublic, isFNDashboard, fnLoader } = this.props;
+    const { dashboard, initError, queryParams, isPublic, FNDashboard, fnLoader } = this.props;
     const { editPanel, viewPanel, updateScrollTop, pageNav, sectionNav } = this.state;
-    const kioskMode = isFNDashboard ? KioskMode.FN : !isPublic  ? getKioskMode(this.props.queryParams) : KioskMode.Full;
+    const kioskMode = FNDashboard ? KioskMode.FN : !isPublic ? getKioskMode(this.props.queryParams) : KioskMode.Full;
 
-    if (!dashboard ) {
+    if (!dashboard) {
       return fnLoader ? <>{fnLoader}</> : <DashboardLoading initPhase={this.props.initPhase} />;
     }
 
@@ -406,7 +411,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
       <header data-testid={selectors.pages.Dashboard.DashNav.navV2}>
         <DashNav
           dashboard={dashboard}
-          title={!isFNDashboard ? dashboard.title : ''}
+          title={!FNDashboard ? dashboard.title : ''}
           folderTitle={dashboard.meta.folderTitle}
           isFullscreen={!!viewPanel}
           onAddPanel={this.onAddPanel}
@@ -490,17 +495,12 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
           className={pageClassName}
           onSetScrollRef={this.setScrollRef}
         >
-          {!isFNDashboard && <DashboardPrompt dashboard={dashboard} />}
+          {!FNDashboard && <DashboardPrompt dashboard={dashboard} />}
 
           {initError && <DashboardFailed />}
           {showSubMenu && (
             <section aria-label={selectors.pages.Dashboard.SubMenu.submenu}>
-              <SubMenu
-                dashboard={dashboard}
-                annotations={dashboard.annotations.list}
-                links={dashboard.links}
-                hiddenVariables={this.props.hiddenVariables}
-              />
+              <SubMenu dashboard={dashboard} annotations={dashboard.annotations.list} links={dashboard.links} />
             </section>
           )}
           {config.featureToggles.angularDeprecationUI && dashboard.hasAngularPlugins() && dashboard.uid !== null && (
@@ -548,9 +548,9 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
 }
 
 function updateStatePageNavFromProps(props: Props, state: State): State {
-  const { dashboard, isFNDashboard } = props;
+  const { dashboard, FNDashboard } = props;
 
-  if (!dashboard || isFNDashboard) {
+  if (!dashboard || FNDashboard) {
     return state;
   }