ENG-3071: WebUI Epic Features

.github/workflows/publication.yml

@@ -41,7 +41,7 @@ jobs:
         run: |
           ~/ppl-run \
             .. checkout-branch --id "CHECKOUT FOR NEXUS PUBLICATION" \
-            --lcd "$LOCAL_CLONE_DIR" \
+                  --lcd "$LOCAL_CLONE_DIR" \
                   --token "$ENTANDO_BOT_TOKEN" \
             .. pr-preflight-checks --only flags --lcd "$LOCAL_CLONE_DIR" \
           ;

config/env.js

@@ -61,6 +61,10 @@ const RUNTIME_OVERRIDABLE_VARS = [
   'COMPONENT_REPOSITORY_UI_ENABLED',
   'DOMAIN',
   'KEYCLOAK_JSON',
+  'WEBUI_ENABLED',
+  'WEBUI_APP_MANAGEMENT_URL',
+  'WEBUI_APP_URL',
+  'WEBUI_DEV_WORKSPACE_URL',
 ];
 
 function getClientEnvironment(publicUrl) {

src/api/pages.js

@@ -12,6 +12,11 @@ import {
 
 import { PAGE_STATUS_DRAFT } from 'state/pages/const';
 
+import getRuntimeEnv from 'helpers/getRuntimeEnv';
+
+const { WEBUI_APP_MANAGEMENT_URL } = getRuntimeEnv();
+
+
 /*
  * - homepage
  *   |- dashboard
@@ -285,3 +290,57 @@ export const postClonePage = (pageCode, pageObject) => makeRequest({
   mockResponse: {},
   useAuthentication: true,
 });
+
+export const postWebuiPage = pageObject => makeRequest({
+  uri: '/api/pages',
+  method: METHODS.POST,
+  body: pageObject,
+  mockResponse: {},
+  domain: WEBUI_APP_MANAGEMENT_URL,
+  useAuthentication: true,
+});
+
+export const postWebuiClonePage = (pageCode, pageObject) => makeRequest({
+  uri: `/api/pages/${pageCode}/clone`,
+  method: METHODS.POST,
+  body: pageObject,
+  mockResponse: {},
+  domain: WEBUI_APP_MANAGEMENT_URL,
+  useAuthentication: true,
+});
+
+export const putWebuiPage = pageObject => makeRequest({
+  uri: `/api/pages/${pageObject.code}`,
+  body: pageObject,
+  method: METHODS.PUT,
+  mockResponse: { ...pageObject },
+  domain: WEBUI_APP_MANAGEMENT_URL,
+  useAuthentication: true,
+  errors: () => (
+    fetchPageResponseMap[pageObject.code] ?
+      [] :
+      [{ code: 1, message: `no page with the code ${pageObject.code} could be found.` }]
+  ),
+});
+
+export const putWebuiPageStatus = (pageCode, status) => makeRequest({
+  uri: `/api/pages/${pageCode}/status`,
+  body: { status },
+  method: METHODS.PUT,
+  mockResponse: { ...fetchPageResponseMap.homepage, status },
+  useAuthentication: true,
+  domain: WEBUI_APP_MANAGEMENT_URL,
+  errors: () => (
+    fetchPageResponseMap[pageCode] ?
+      [] :
+      [{ code: 1, message: `no page with the code ${pageCode} could be found.` }]
+  ),
+});
+
+export const deleteWebuiPage = page => makeRequest({
+  uri: `/api/pages/${page.code}`,
+  method: METHODS.DELETE,
+  mockResponse: { code: `${page.code}` },
+  domain: WEBUI_APP_MANAGEMENT_URL,
+  useAuthentication: true,
+});

src/helpers/getRuntimeEnv.js

@@ -33,4 +33,8 @@ export default () => ({
   COMPONENT_REPOSITORY_UI_ENABLED: getBooleanEnvVar('COMPONENT_REPOSITORY_UI_ENABLED'),
   DOMAIN: validateDomain(getEnvVar('DOMAIN')),
   KEYCLOAK_JSON: getEnvVar('KEYCLOAK_JSON') || `${validateDomain(getEnvVar('DOMAIN'))}/keycloak.json`,
+  WEBUI_ENABLED: getBooleanEnvVar('WEBUI_ENABLED'),
+  WEBUI_APP_MANAGEMENT_URL: getEnvVar('WEBUI_APP_MANAGEMENT_URL'),
+  WEBUI_APP_URL: getEnvVar('WEBUI_APP_URL'),
+  WEBUI_DEV_WORKSPACE_URL: getEnvVar('WEBUI_DEV_WORKSPACE_URL'),
 });

src/helpers/urlUtils.js

@@ -1,3 +1,8 @@
 import { get } from 'lodash';
-// eslint-disable-next-line import/prefer-default-export
-export const adminConsoleUrl = url => `${get(process.env, 'DOMAIN', '')}/${url}`;
+
+export const adminConsoleUrl = url => `${get(process.env, 'REACT_APP_DOMAIN', '')}/${url}`;
+
+export const openInNewTab = (url) => {
+  const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+  if (newWindow) newWindow.opener = null;
+};

src/state/pages/actions.js

@@ -6,6 +6,7 @@ import {
   getPage, getPageChildren, setPagePosition, postPage, deletePage, getFreePages,
   getPageSettings, putPage, putPageStatus, getViewPages, getSearchPages,
   putPageSettings, patchPage, getPageSEO, postPageSEO, putPageSEO, postClonePage,
+  deleteWebuiPage, postWebuiPage, putWebuiPageStatus, postWebuiClonePage, putWebuiPage,
 } from 'api/pages';
 import {
   getStatusMap,
@@ -33,6 +34,10 @@ import { APP_TOUR_CANCELLED, APP_TOUR_STARTED, APP_TOUR_HOMEPAGE_CODEREF } from
 import { setExistingPages } from 'state/app-tour/actions';
 import { getAppTourProgress } from 'state/app-tour/selectors';
 
+import getRuntimeEnv from 'helpers/getRuntimeEnv';
+
+const { WEBUI_ENABLED } = getRuntimeEnv();
+
 const RESET_FOR_CLONE = {
   code: '',
   titles: '',
@@ -197,16 +202,23 @@ export const fetchViewPages = () => dispatch => new Promise((resolve) => {
 
 export const sendDeletePage = (page, successRedirect = true) => async (dispatch) => {
   try {
-    const response = await deletePage(page);
+    let response = null;
+    if (WEBUI_ENABLED) {
+      response = await deleteWebuiPage(page);
+    } else {
+      response = await deletePage(page);
+    }
     const json = await response.json();
     if (response) {
       dispatch(removePage(page));
+      dispatch(addToast({ id: 'app.deleted', values: { type: 'page', code: page.code } }, TOAST_SUCCESS));
       if (page.tourProgress === APP_TOUR_CANCELLED) return;
       if (page.tourProgress !== APP_TOUR_STARTED && successRedirect) {
         history.push(ROUTE_PAGE_TREE);
       }
     } else {
       dispatch(addErrors(json.errors.map(e => e.message)));
+      json.errors.forEach(err => dispatch(addToast(err.message, TOAST_ERROR)));
     }
   } catch (e) {
     // do nothing
@@ -316,11 +328,20 @@ export const sendPostPage = pageData => dispatch => new Promise(async (resolve)
       },
     } : {};
     const postPageCall = SEO_ENABLED ? postPageSEO : postPage;
-    const response = await postPageCall({
-      ...pageData,
-      ...seoPayload,
-    });
-    const json = await response.json();
+    let response = { json: () => {} };
+    let json = { errors: [] };
+    if (WEBUI_ENABLED) {
+      response = await postWebuiPage({
+        ...pageData,
+        ...seoPayload,
+      });
+    } else {
+      response = await postPageCall({
+        ...pageData,
+        ...seoPayload,
+      });
+    }
+    json = await response.json();
     if (response.ok) {
       dispatch(addToast({ id: 'pages.created' }, TOAST_SUCCESS));
       dispatch(addPages([json.payload]));
@@ -350,7 +371,9 @@ export const sendClonePage = (pageCode, pageData) => dispatch => new Promise(asy
       titles,
     };
 
-    const response = await postClonePage(pageCode, requestBody);
+    const cloneApi = WEBUI_ENABLED ? postWebuiClonePage : postClonePage;
+
+    const response = await cloneApi(pageCode, requestBody);
 
     const json = await response.json();
     if (response.ok) {
@@ -453,7 +476,8 @@ export const sendPutPage = pageData => dispatch =>
           useExtraTitles: seo,
         },
       } : {};
-      const response = await putPageFunc({
+      const putApiCall = WEBUI_ENABLED ? putWebuiPage : putPageFunc;
+      const response = await putApiCall({
         ...pageData,
         ...seoPayload,
       });
@@ -539,7 +563,9 @@ const putSelectedPageStatus = status => (dispatch, getState) =>
       status: status === PAGE_STATUS_DRAFT ? PAGE_STATUS_UNPUBLISHED : status,
     };
     dispatch(setPageLoading(page.code));
-    putPageStatus(page.code, status).then((response) => {
+    const pageStatusApiCall = WEBUI_ENABLED ?
+      putWebuiPageStatus : putPageStatus;
+    pageStatusApiCall(page.code, status).then((response) => {
       if (response.ok) {
         dispatch(setSelectedPage(newPage));
         dispatch(updatePage(newPage));

src/ui/assets/AssetsList.js

@@ -27,6 +27,7 @@ import {
   SORTABLE_COLUMNS,
   ASSET_FILETYPES,
 } from 'state/assets/const';
+import { openInNewTab } from 'helpers/urlUtils';
 
 class AssetsList extends Component {
   constructor(props) {
@@ -281,7 +282,7 @@ class AssetsList extends Component {
             <MenuItem onClick={() => onDuplicateClicked(asset)}>
               <FormattedMessage id="cms.label.duplicate" defaultMessage="Duplicate" />
             </MenuItem>
-            <MenuItem onClick={() => window.open(asset.downloadUrl)}>
+            <MenuItem onClick={() => openInNewTab(asset.downloadUrl)}>
               <FormattedMessage id="cms.label.download" defaultMessage="Download" />
             </MenuItem>
             <MenuItem onClick={() => onClickDelete(asset)}>

src/ui/assets/AssetsListGridView.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { DropdownKebab, MenuItem, Button } from 'patternfly-react';
+import { openInNewTab } from 'helpers/urlUtils';
 
 const AssetsListGridView = ({
   assets,
@@ -25,7 +26,7 @@ const AssetsListGridView = ({
     const onEditClickHandle = () => onEditClicked(asset);
     const onClickDeleteHandle = () => onClickDelete(asset);
     const onDuplicateClickHandle = () => onDuplicateClicked(asset);
-    const onDownloadHandle = () => window.open(asset.downloadUrl);
+    const onDownloadHandle = () => openInNewTab(asset.downloadUrl);
     const onClickSelectHandle = () => onItemSelected(asset);
     return (
       <div className="AssetsListGridView__item" key={asset.id}>

src/ui/page-templates/list/PageTemplateListMenuActions.js

@@ -11,8 +11,7 @@ import {
   ROUTE_PAGE_TEMPLATE_DETAIL,
 } from 'app-init/router';
 
-
-const PageTemplateListMenuActions = ({ onClickDelete, code }) => (
+const PageTemplateListMenuActions = ({ onClickDelete, code, locked }) => (
   <DropdownKebab
     className="PageTemplateListMenuActions"
     id={`${code}-actions`}
@@ -42,18 +41,23 @@ const PageTemplateListMenuActions = ({ onClickDelete, code }) => (
     >
       <FormattedMessage id="app.details" />
     </MenuItem>
-    <MenuItem
-      className="PageTemplateListMenuActions__menu-item-delete"
-      onClick={onClickDelete}
-    >
-      <FormattedMessage id="app.delete" />
-    </MenuItem>
+    {
+      !locked && (
+        <MenuItem
+          className="PageTemplateListMenuActions__menu-item-delete"
+          onClick={onClickDelete}
+        >
+          <FormattedMessage id="app.delete" />
+        </MenuItem>
+      )
+    }
   </DropdownKebab>
 );
 
 PageTemplateListMenuActions.propTypes = {
   onClickDelete: PropTypes.func,
   code: PropTypes.string.isRequired,
+  locked: PropTypes.bool.isRequired,
 };
 
 PageTemplateListMenuActions.defaultProps = {

src/ui/page-templates/list/PageTemplateListTable.js

@@ -81,6 +81,7 @@ class PageTemplateListTable extends Component {
       Cell: ({ values }) => (
         <PageTemplateListMenuActions
           code={values.code}
+          locked={values.locked}
           onClickDelete={() => removePageTemplate(values.code)}
         />
       ),

src/ui/pages/add/PagesAddFormContainer.js

@@ -10,7 +10,7 @@ import { getPageTemplatesList } from 'state/page-templates/selectors';
 import { getCharsets, getContentTypes, getSelectedPageLocaleTitle } from 'state/pages/selectors';
 import { sendPostPage, loadSelectedPage } from 'state/pages/actions';
 import { history, ROUTE_PAGE_TREE, ROUTE_PAGE_CONFIG } from 'app-init/router';
-import { PAGE_INIT_VALUES, SEO_DATA_BLANK, SEO_LANGDATA_BLANK } from 'ui/pages/common/const';
+import { NEXT_PAGE_TEMPLATE, PAGE_INIT_VALUES, SEO_DATA_BLANK, SEO_LANGDATA_BLANK } from 'ui/pages/common/const';
 import { getLocale } from 'state/locale/selectors';
 import getSearchParam from 'helpers/getSearchParam';
 import { setVisibleModal } from 'state/modal/actions';
@@ -23,6 +23,10 @@ import { getMyGroupPermissions } from 'state/permissions/selectors';
 import { fetchMyGroupPermissions } from 'state/permissions/actions';
 import { fetchAllGroupEntries, fetchMyGroups } from 'state/groups/actions';
 import { getGroupEntries, getGroupsList } from 'state/groups/selectors';
+import getRuntimeEnv from 'helpers/getRuntimeEnv';
+import { openInNewTab } from 'helpers/urlUtils';
+
+const { WEBUI_ENABLED, WEBUI_DEV_WORKSPACE_URL } = getRuntimeEnv();
 
 export const getDefaultLanguage = (languages) => {
   const defaultLang = { code: 'en' };
@@ -194,7 +198,12 @@ export const mapDispatchToProps = dispatch => ({
               dispatch(setAppTourLastStep(12));
               dispatch(setTourCreatedPage(data));
             }
-            history.push(routeConverter(ROUTE_PAGE_CONFIG, { pageCode: data.code }));
+            if (WEBUI_ENABLED && data.pageModel === NEXT_PAGE_TEMPLATE) {
+              openInNewTab(WEBUI_DEV_WORKSPACE_URL);
+              history.push(ROUTE_PAGE_TREE);
+            } else {
+              history.push(routeConverter(ROUTE_PAGE_CONFIG, { pageCode: data.code }));
+            }
             break;
           }
           default: history.push(ROUTE_PAGE_TREE);

src/ui/pages/clone/CloneFormContainer.js

@@ -13,6 +13,11 @@ import { sendClonePage } from 'state/pages/actions';
 import { history, ROUTE_PAGE_TREE, ROUTE_PAGE_CONFIG } from 'app-init/router';
 import { setVisibleModal } from 'state/modal/actions';
 import getSearchParam from 'helpers/getSearchParam';
+import getRuntimeEnv from 'helpers/getRuntimeEnv';
+import { openInNewTab } from 'helpers/urlUtils';
+import { NEXT_PAGE_TEMPLATE } from 'ui/pages/common/const';
+
+const { WEBUI_ENABLED, WEBUI_DEV_WORKSPACE_URL } = getRuntimeEnv();
 
 export const mapStateToProps = state => ({
   languages: getActiveLanguages(state),
@@ -47,7 +52,12 @@ export const mapDispatchToProps = dispatch => ({
           break;
         }
         case ACTION_SAVE_AND_CONFIGURE: {
-          history.push(routeConverter(ROUTE_PAGE_CONFIG, { pageCode: data.code }));
+          if (WEBUI_ENABLED && data.pageModel === NEXT_PAGE_TEMPLATE) {
+            openInNewTab(WEBUI_DEV_WORKSPACE_URL);
+            history.push(ROUTE_PAGE_TREE);
+          } else {
+            history.push(routeConverter(ROUTE_PAGE_CONFIG, { pageCode: data.code }));
+          }
           break;
         }
         default: history.push(ROUTE_PAGE_TREE);

src/ui/pages/common/FindTemplateModal.js

@@ -6,6 +6,7 @@ import { Modal, Col, Row, Spinner, DropdownKebab, MenuItem, Button } from 'patte
 import GenericModalContainer from 'ui/common/modal/GenericModalContainer';
 import { ROUTE_PAGE_TEMPLATE_DETAIL } from 'app-init/router';
 import { TEMPLATE_THUMBNAIL } from 'ui/pages/common/const';
+import { openInNewTab } from 'helpers/urlUtils';
 
 export const MODAL_ID = 'FindTemplateModal';
 
@@ -59,7 +60,7 @@ const FindTemplateModal = ({
               onClick={() => {
               const templatePath = ROUTE_PAGE_TEMPLATE_DETAIL.replace(':pageTemplateCode', code);
               const link = `${global.location.href.split('/page')[0]}${templatePath}`;
-              window.open(link);
+              openInNewTab(link);
             }}
             >
               <FormattedMessage id="app.details" />