Add hook and HOC for consuming Console extensions

[vojtechszocs]

This PR adds the necessary changes for consuming Console extensions in a reactive way:

• via useExtensions hook (preferred, due to general preference for function components)
• via withExtensions higher-order component a.k.a HOC (use only with class components)

Change summary

• add flags object to Extension type
• declare AlwaysOnExtension type as Extension minus flags
• declare FeatureFlag and ModelDefinition extensions as always-on (anything else is gated)
• add PluginStore to replace ExtensionRegistry in the future (hook and HOC use this)

---

Example usage of useExtensions hook:

import {
  useExtensions,
  NavItem,
  Perspective,
  isNavItem,
  isPerspective,
} from '@console/plugin-sdk';

const Example = () => {
  const navItemExtensions = useExtensions<NavItem>(isNavItem);
  const perspectiveExtensions = useExtensions<Perspective>(isPerspective);
  // process extensions and render your component
};

Example usage of withExtensions HOC:

import {
  withExtensions,
  NavItem,
  Perspective,
  isNavItem,
  isPerspective,
} from '@console/plugin-sdk';

const Example = withExtensions<ExampleExtensionProps>({
  navItemExtensions: isNavItem,
  perspectiveExtensions: isPerspective,
})(
  class Example extends React.Component<ExampleOwnProps & ExampleExtensionProps> {
    render() {
      const { navItemExtensions, perspectiveExtensions } = this.props;
      // process extensions and render your component
    }
  },
);

type ExampleExtensionProps = {
  navItemExtensions: NavItem[];
  perspectiveExtensions: Perspective[];
};

[vojtechszocs]

/hold

[vojtechszocs]

cc @spadgett @christianvogt @rawagner

[vojtechszocs]

/hold cancel

[vojtechszocs]

FYI, this is needed for code like

-// eslint-disable-next-line no-undef
 if (process.env.NODE_ENV !== 'production') {

[vojtechszocs]

FYI, we're using an outdated version of @types/react-redux

$ yarn why @types/react-redux
=> Found "@types/react-redux@6.0.2"

$ yarn why react-redux
=> Found "react-redux@7.1.0"

I've tried to bump it to match react-redux but ran into typing errors, so using @ts-ignore comment for now.

[vojtechszocs]

FYI, can't use flagPending() or FlagsObject from public/reducers/features.ts as it causes Jest to fail on cyclic dependency.

[rawagner]

you can specify state and return value by

Suggested change

	const desiredFlags: FlagsObject = useSelector(
	const desiredFlags = useSelector<RootState, FlagsObject>(

[vojtechszocs]

@rawagner Please see #3383 (comment) - we're currently using an outdated version of @types/react-redux so we're missing types for new react-redux APIs like useSelector and shallowEqual.

I'll add type params to useSelector call as suggested.

However, we still need the explicit desiredFlags: FlagsObject type declaration due to missing types - otherwise, this variable would be inferred as any.

Edit: the reason for not updating @types/react-redux to match react-redux version - once we do that, we'll have some type-related errors in existing files - we can fix that in a follow-up PR.

[rawagner]

getFlagsFromState will run on every store update, maybe we could consider using reselect and comparing if store substate - state.FLAGS changed before getFlagsFromState

[vojtechszocs]

From react-redux useSelector docs:

The selector will be run whenever the function component renders. useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.

With useSelector(), returning a new object every time will always force a re-render by default. If you want to retrieve multiple values from the store, you can:

• Call useSelector() multiple times, with each call returning a single field value
• Use Reselect or a similar library to create a memoized selector that returns multiple values in one object, but only returns a new object when one of the values has changed.
• Use the shallowEqual function from React-Redux as the equalityFn argument to useSelector()

In our useExtensions hook, we're using the 3rd option listed above:

// Compute flags relevant for gating desired extensions
const desiredFlags: FlagsObject = useSelector<RootState, FlagsObject>(
  (state: RootState) => getFlagsFromState(desiredExtensions, state),
  shallowEqual,
);

The useSelector hook already memoizes the object selected from Redux store, based on the second argument (equalityFn) which is === by default, but we're customizing it to shallowEqual comparator.

This is similar to connectToFlags HOC using { areStatePropsEqual: _.isEqual } with the difference that _.isEqual does deep comparison while shallowEqual only compares the object's own properties.

Since we're selecting a simple object { [key: string]: boolean } it doesn't really matter if we use _.isEqual or shallowEqual for comparison.

[vojtechszocs]

@rawagner But I'm also OK with using _.isEqual instead of shallowEqual (better parity with connectToFlags in terms of comparator), up to you.

[rawagner]

What I meant is that we could use reselect to compare state before running getFlagsFromState. The second argument in useSelector compares result after getFlagsFromState

[rawagner]

We could compare state.FLAGS with old state.FLAGS as FLAGS are not updated that often

[vojtechszocs]

@rawagner Sorry, I misunderstood your comment.

I'll use reselect to memoize on RootState.FLAGS sub-state as suggested.

[vojtechszocs]

Added one more commit to handle all NavItem extensions via the new hook & HOC, while also removing getNavItems() from the registry and dropping memoize-one dependency too.

[spadgett]

/hold
the merge queue is blocked

[spadgett]

/test e2e-gcp-console

[spadgett]

/hold cancel
/retest

[openshift-bot]

/retest

Please review the full test history for this PR and help us cut down flakes.

[mareklibra]

/lgtm

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jtomasek, mareklibra, rawagner, vojtechszocs

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [rawagner,vojtechszocs]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment