EPMRPP-76242 || Sign up extension point at login page

app/src/controllers/plugins/selectors.js

@@ -45,6 +45,9 @@ export const availablePluginsSelector = createSelector(pluginsSelector, filterAv
 export const enabledPluginNamesSelector = createSelector(pluginsSelector, (plugins) =>
   filterEnabledPlugins(plugins).map((plugin) => plugin.name),
 );
+export const enabledPublicPluginNamesSelector = createSelector(publicPluginsSelector, (plugins) =>
+  filterEnabledPlugins(plugins).map((plugin) => plugin.name),
+);
 
 export const availableGroupedPluginsSelector = createSelector(
   availablePluginsSelector,

app/src/controllers/plugins/uiExtensions/constants.js

@@ -11,6 +11,7 @@ export const EXTENSION_TYPE_UNIQUE_ERROR_GRID_CELL_COMPONENT =
   'uiExtension:uniqueErrorGridCellComponent';
 export const EXTENSION_TYPE_UNIQUE_ERROR_GRID_HEADER_CELL_COMPONENT =
   'uiExtension:uniqueErrorGridHeaderCellComponent';
+export const EXTENSION_TYPE_LOGIN_PAGE = 'uiExtension:loginPage';
 
 export const COMMAND_GET_FILE = 'getFile';
 export const COMMAND_GET_ISSUE_TYPES = 'getIssueTypes';

app/src/controllers/plugins/uiExtensions/index.js

@@ -11,5 +11,6 @@ export {
   uiExtensionPostIssueFormSelector,
   uniqueErrorGridCellComponentSelector,
   uniqueErrorGridHeaderCellComponentSelector,
+  uiExtensionLoginPageSelector,
 } from './selectors';
 export { uiExtensionsReducer } from './reducer';

app/src/controllers/plugins/uiExtensions/selectors.js

@@ -10,8 +10,13 @@ import {
   EXTENSION_TYPE_POST_ISSUE_FORM,
   EXTENSION_TYPE_UNIQUE_ERROR_GRID_CELL_COMPONENT,
   EXTENSION_TYPE_UNIQUE_ERROR_GRID_HEADER_CELL_COMPONENT,
+  EXTENSION_TYPE_LOGIN_PAGE,
 } from './constants';
-import { domainSelector, enabledPluginNamesSelector } from '../selectors';
+import {
+  domainSelector,
+  enabledPluginNamesSelector,
+  enabledPublicPluginNamesSelector,
+} from '../selectors';
 import { uiExtensionMap } from './uiExtensionStorage';
 
 export const extensionsLoadedSelector = (state) =>
@@ -44,6 +49,23 @@ export const createExtensionSelectorByType = (type) =>
     },
   );
 
+export const createPublicExtensionSelectorByType = (type) =>
+  createSelector(
+    enabledPublicPluginNamesSelector,
+    extensionsMetadataSelector,
+    (pluginNames, extensionsMetadata) => {
+      const newExtensions = extensionsMetadata
+        .filter(({ pluginName }) => pluginNames.includes(pluginName))
+        .map(({ pluginName, scope, extensions }) =>
+          extensions.map((ext) => ({ ...ext, pluginName, scope })),
+        );
+
+      return newExtensions
+        .reduce((acc, val) => acc.concat(val), [])
+        .filter((extension) => extension.type === type);
+    },
+  );
+
 export const uiExtensionSettingsTabsSelector = createExtensionSelectorByType(
   EXTENSION_TYPE_SETTINGS_TAB,
 );
@@ -72,3 +94,6 @@ export const uniqueErrorGridCellComponentSelector = createExtensionSelectorByTyp
 export const uniqueErrorGridHeaderCellComponentSelector = createExtensionSelectorByType(
   EXTENSION_TYPE_UNIQUE_ERROR_GRID_HEADER_CELL_COMPONENT,
 );
+export const uiExtensionLoginPageSelector = createPublicExtensionSelectorByType(
+  EXTENSION_TYPE_LOGIN_PAGE,
+);

app/src/pages/outside/loginPage/loginPage.jsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import track from 'react-tracking';
 import classNames from 'classnames/bind';
 import PropTypes from 'prop-types';
@@ -77,8 +77,8 @@ export class LoginPage extends PureComponent {
 
   getCurrentBlock = () => {
     const { forgotPass, reset, multipleAuth } = this.props;
-    let currentBlock = <LoginBlock />;
 
+    let currentBlock = <LoginBlock />;
     if (forgotPass) {
       currentBlock = <ForgotPasswordBlock />;
     }

app/src/pages/outside/loginPage/pageBlocks/loginBlock/loginBlock.jsx

@@ -16,6 +16,11 @@
 
 import { defineMessages } from 'react-intl';
 import { PageBlockContainer } from 'pages/outside/common/pageBlockContainer';
+import { useSelector } from 'react-redux';
+import React from 'react';
+import { ExtensionLoader, extensionType } from 'components/extensionLoader';
+import { uiExtensionLoginPageSelector } from 'controllers/plugins/uiExtensions';
+import PropTypes from 'prop-types';
 import { LoginForm } from './loginForm';
 
 const messages = defineMessages({
@@ -29,8 +34,21 @@ const messages = defineMessages({
   },
 });
 
-export const LoginBlock = () => (
-  <PageBlockContainer header={messages.welcome} hint={messages.login}>
-    <LoginForm />
-  </PageBlockContainer>
-);
+export const LoginBlock = () => {
+  const extensions = useSelector(uiExtensionLoginPageSelector);
+
+  return (
+    <PageBlockContainer header={messages.welcome} hint={messages.login}>
+      {extensions.map((extension) => (
+        <ExtensionLoader extension={extension} />
+      ))}
+      <LoginForm />
+    </PageBlockContainer>
+  );
+};
+LoginBlock.propTypes = {
+  extensions: PropTypes.arrayOf(extensionType),
+};
+LoginBlock.defaultProps = {
+  extensions: [],
+};