Implementing extension links appearance on the sidebar and redirection handling.

Author: krulis-martin

src/components/layout/Sidebar/Sidebar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { lruMemoize } from 'reselect';
 import { Link } from 'react-router-dom';
 
@@ -16,6 +16,7 @@ import { isSupervisorRole, isEmpoweredSupervisorRole, isSuperadminRole } from '.
 import withLinks from '../../../helpers/withLinks.js';
 import { getExternalIdForCAS } from '../../../helpers/cas.js';
 import { getConfigVar } from '../../../helpers/config.js';
+import { EMPTY_ARRAY } from '../../../helpers/common.js';
 import Admin from './Admin.js';
 
 import './sidebar.css';
@@ -24,12 +25,45 @@ const URL_PREFIX = getConfigVar('URL_PATH_PREFIX');
 
 const getUserData = lruMemoize(user => getJsData(user));
 
+const processInstances = lruMemoize(instances =>
+  instances && instances.size > 0 ? instances.toArray().filter(isReady).map(getJsData) : EMPTY_ARRAY
+);
+
+const _getCaption = (caption, locale) =>
+  typeof caption === 'string'
+    ? caption
+    : caption && typeof caption === 'object'
+      ? caption[locale] || caption.en || caption[Object.keys(caption)[0]]
+      : '??';
+
+const getExtensions = lruMemoize((instances, locale) => {
+  const exts = [];
+  processInstances(instances).forEach(({ id, extensions = {} }) =>
+    Object.keys(extensions).forEach(extension =>
+      exts.push({ extension, caption: _getCaption(extensions[extension], locale), instance: id })
+    )
+  );
+  exts.sort((a, b) => a.caption.localeCompare(b.caption));
+  return exts;
+});
+
+const extensionClickHandler = lruMemoize(fetchExtensionUrl => ev => {
+  ev.preventDefault();
+  if (window) {
+    const extension = ev.currentTarget.dataset.extension;
+    const instance = ev.currentTarget.dataset.instance;
+    const locale = ev.currentTarget.dataset.locale;
+    fetchExtensionUrl(extension, instance, locale).then(({ value: url }) => window.location.assign(url));
+  }
+});
+
 const Sidebar = ({
   pendingFetchOperations,
   loggedInUser,
   effectiveRole = null,
   currentUrl,
   instances,
+  fetchExtensionUrl,
   links: {
     HOME_URI,
     FAQ_URL,
@@ -42,6 +76,7 @@ const Sidebar = ({
     ARCHIVE_URI,
     SIS_INTEGRATION_URI,
   },
+  intl: { locale },
 }) => {
   const user = getUserData(loggedInUser);
 
@@ -120,21 +155,15 @@ const Sidebar = ({
                     link={DASHBOARD_URI}
                   />
 
-                  {instances &&
-                    instances.size > 0 &&
-                    instances
-                      .toArray()
-                      .filter(isReady)
-                      .map(getJsData)
-                      .map(({ id, name }) => (
-                        <MenuItem
-                          key={id}
-                          title={name}
-                          icon="university"
-                          currentPath={currentUrl}
-                          link={INSTANCE_URI_FACTORY(id)}
-                        />
-                      ))}
+                  {processInstances(instances).map(({ id, name }) => (
+                    <MenuItem
+                      key={id}
+                      title={name}
+                      icon="university"
+                      currentPath={currentUrl}
+                      link={INSTANCE_URI_FACTORY(id)}
+                    />
+                  ))}
 
                   {isSupervisorRole(effectiveRole) && (
                     <MenuItem
@@ -181,6 +210,26 @@ const Sidebar = ({
             )}
 
             {isSuperadminRole(effectiveRole) && <Admin currentUrl={currentUrl} />}
+
+            {getExtensions(instances, locale).length > 0 && (
+              <ul
+                className="nav nav-pills sidebar-menu flex-column"
+                data-lte-toggle="treeview"
+                role="menu"
+                data-accordion="false">
+                <MenuTitle title={<FormattedMessage id="app.sidebar.menu.extensions" defaultMessage="Extensions" />} />
+
+                {getExtensions(instances, locale).map(({ extension, caption, instance }) => (
+                  <MenuItem
+                    key={extension}
+                    title={caption}
+                    icon="share-from-square"
+                    linkData={{ extension, instance, locale }}
+                    onClick={extensionClickHandler(fetchExtensionUrl)}
+                  />
+                ))}
+              </ul>
+            )}
           </nav>
         </div>
       </div>
@@ -194,7 +243,9 @@ Sidebar.propTypes = {
   effectiveRole: PropTypes.string,
   currentUrl: PropTypes.string,
   instances: ImmutablePropTypes.list,
+  fetchExtensionUrl: PropTypes.func.isRequired,
   links: PropTypes.object,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired,
 };
 
-export default withLinks(Sidebar);
+export default withLinks(injectIntl(Sidebar));

src/components/widgets/Sidebar/MenuItem/MenuItem.js

@@ -5,19 +5,31 @@ import { Link, useLocation } from 'react-router-dom';
 
 import Icon from '../../../icons';
 import { getConfigVar } from '../../../../helpers/config.js';
+import { EMPTY_OBJ, objectKeyMap } from '../../../../helpers/common.js';
 import '../Sidebar.css';
 
 const SKIN = getConfigVar('SKIN') || 'success';
 
-const MenuItem = ({ title, icon = 'circle', link, notificationsCount = 0, inNewTab = false, small = false }) => {
+const MenuItem = ({
+  title,
+  icon = 'circle',
+  link,
+  notificationsCount = 0,
+  inNewTab = false,
+  small = false,
+  onClick,
+  linkData = null,
+}) => {
   const { pathname, search } = useLocation();
   const active = link === pathname + search;
   return (
     <li className={classnames({ 'nav-item': true, small })}>
       <Link
         to={link}
         target={inNewTab ? '_blank' : undefined}
-        className={classnames({ 'nav-link': true, 'align-items-center': true, active, [`bg-${SKIN}`]: active })}>
+        className={classnames({ 'nav-link': true, 'align-items-center': true, active, [`bg-${SKIN}`]: active })}
+        onClick={onClick}
+        {...(linkData ? objectKeyMap(linkData, k => `data-${k}`) : EMPTY_OBJ)}>
         <Icon icon={icon} fixedWidth className="nav-icon" />
         <p className="sidebarMenuItem">{title}</p>
         {notificationsCount > 0 && <span className="right badge badge-warning">{notificationsCount}</span>}
@@ -33,6 +45,8 @@ MenuItem.propTypes = {
   link: PropTypes.string,
   inNewTab: PropTypes.bool,
   small: PropTypes.bool,
+  onClick: PropTypes.func,
+  linkData: PropTypes.object,
 };
 
 export default MenuItem;

src/containers/SidebarContainer/SidebarContainer.js

@@ -1,15 +1,21 @@
 import { connect } from 'react-redux';
 import Sidebar from '../../components/layout/Sidebar/Sidebar.js';
+import { fetchExtensionUrl } from '../../redux/modules/app.js';
 import { loggedInUserMemberOfInstances } from '../../redux/selectors/instances.js';
 import {
   loggedInUserSelector,
   notificationsSelector,
   getLoggedInUserEffectiveRole,
 } from '../../redux/selectors/users.js';
 
-export default connect(state => ({
-  loggedInUser: loggedInUserSelector(state),
-  effectiveRole: getLoggedInUserEffectiveRole(state),
-  instances: loggedInUserMemberOfInstances(state),
-  notifications: notificationsSelector(state),
-}))(Sidebar);
+export default connect(
+  state => ({
+    loggedInUser: loggedInUserSelector(state),
+    effectiveRole: getLoggedInUserEffectiveRole(state),
+    instances: loggedInUserMemberOfInstances(state),
+    notifications: notificationsSelector(state),
+  }),
+  dispatch => ({
+    fetchExtensionUrl: (extension, instance, locale) => dispatch(fetchExtensionUrl(extension, instance, locale)),
+  })
+)(Sidebar);

src/helpers/common.js

@@ -144,6 +144,20 @@ export const objectMap = (obj, fnc) => {
   return res;
 };
 
+/**
+ * Implementation of map() function for objects applied on keys only.
+ * Create a copy of an object where each key is transformed using given function.
+ * @param {object} obj Object being copied (used as template).
+ * @param {function} fnc Mapping function for keys
+ */
+export const objectKeyMap = (obj, fnc) => {
+  const res = {};
+  for (const key in obj) {
+    res[fnc(key)] = obj[key];
+  }
+  return res;
+};
+
 /**
  * Search object by values and return corresponding key.
  * @param {Object} obj object to be searched

src/locales/cs.json

@@ -1749,6 +1749,7 @@
   "app.sidebar.menu.createAccount": "Zaregistrovat se",
   "app.sidebar.menu.dashboard": "Přehled",
   "app.sidebar.menu.exercises": "Úlohy",
+  "app.sidebar.menu.extensions": "Rozšíření",
   "app.sidebar.menu.faq": "FAQ",
   "app.sidebar.menu.pipelines": "Pipeline",
   "app.sidebar.menu.signIn": "Přihlásit se",

src/locales/en.json

@@ -1749,6 +1749,7 @@
   "app.sidebar.menu.createAccount": "Create account",
   "app.sidebar.menu.dashboard": "Dashboard",
   "app.sidebar.menu.exercises": "Exercises",
+  "app.sidebar.menu.extensions": "Extensions",
   "app.sidebar.menu.faq": "FAQ",
   "app.sidebar.menu.pipelines": "Pipelines",
   "app.sidebar.menu.signIn": "Sign in",

src/redux/modules/app.js

@@ -1,10 +1,13 @@
 import { createAction, handleActions } from 'redux-actions';
 import { fromJS } from 'immutable';
+import { createApiAction } from '../middleware/apiMiddleware.js';
+import { createActionsWithPostfixes } from '../helpers/resourceManager';
 
 export const actionTypes = {
   SET_LANG: 'recodex/app/SET_LANG',
   NEW_PENDING_FETCH_OPERATION: 'recodex/app/NEW_PENDING_FETCH_OPERATION',
   COMPLETED_FETCH_OPERATION: 'recodex/app/COMPLETED_FETCH_OPERATION',
+  ...createActionsWithPostfixes('EXTENSION_URL', 'recodex/app'),
 };
 
 const createInitialState = lang =>
@@ -19,6 +22,14 @@ export const setLang = createAction(actionTypes.SET_LANG, lang => ({
 export const newPendingFetchOperation = createAction(actionTypes.NEW_PENDING_FETCH_OPERATION);
 export const completedFetchOperation = createAction(actionTypes.COMPLETED_FETCH_OPERATION);
 
+export const fetchExtensionUrl = (extension, instance, locale) =>
+  createApiAction({
+    type: actionTypes.EXTENSION_URL,
+    method: 'GET',
+    endpoint: `/extensions/${extension}/${instance}?locale=${locale}`,
+    meta: { extension, instance, locale },
+  });
+
 const app = (lang = 'en') =>
   handleActions(
     {