refactor(auth): Various build improvements and minor refactoring

CHANGELOG.md

@@ -120,6 +120,8 @@
 
 ### Internal
 
+- Various build improvements and minor refactoring captured during the effort to unify
+  Volto, Plone classic, and ZMI authentication.  @rpatterson
 - Change prop `name` -> `componentName` in component `Component` @sneridagh
 
 ## 15.0.0-alpha.11 (2022-03-02)

Makefile

@@ -15,6 +15,18 @@ MAKEFLAGS+=--no-builtin-rules
 INSTANCE_PORT=8080
 DOCKER_IMAGE=plone/plone-backend:5.2.7
 KGS=plone.restapi==8.21.2 plone.volto==4.0.0a3 plone.rest==2.0.0a3 plone.app.iterate==4.0.2 plone.app.vocabularies==4.3.0
+# The defaults from the UI configuration
+# export RAZZLE_DEV_PROXY_API_PATH=http://localhost:$(INSTANCE_PORT)/Plone
+# export RAZZLE_API_PATH=http://localhost:3000
+# Uncomment the following to run against the proxy hosting testbed:
+# export RAZZLE_DEV_PROXY_API_PATH=
+# export RAZZLE_API_PATH=http://localhost:49080/api/Plone
+# Then run everything:
+#     $ make run-proxy-all
+# Finally, visit the parts of the stack in a browser:
+# - ZMI: http://localhost:49080/api/manage_main
+# - Plone Classic: http://localhost:49080/api/Plone
+# - Volto: http://localhost:49080/
 
 # Sphinx variables
 # You can set these variables from the command line.
@@ -159,9 +171,9 @@ netlify:
 docs-test: docs-clean docs-linkcheck docs-spellcheck  ## Clean docs build, then run linkcheck, spellcheck
 
 .PHONY: start
-# Run both the back-end and the front end
+# Run both the back-end and the front-end
 start:
-	$(MAKE) -j 2 start-backend start-frontend
+	$(MAKE) -e -j 2 start-backend start-frontend
 
 .PHONY: start-frontend
 start-frontend:
@@ -183,6 +195,14 @@ start-frontend-docker:
 start-backend-docker-guillotina:
 	docker-compose -f g-api/docker-compose.yml up -d
 
+.PHONY: run-proxy
+run-proxy:
+	docker-compose up traefik
+.PHONY: run-proxy-all
+# Run the back-end, front-end, and proxy testbed with all output combined
+run-proxy-all:
+	$(MAKE) -e -j 3 start-backend start-frontend run-proxy
+
 .PHONY: start-test
 start-test: ## Start Test
 	@echo "$(GREEN)==> Start Test$(RESET)"
@@ -235,8 +255,13 @@ test-acceptance-guillotina:
 .PHONY: clean
 clean:
 	$(MAKE) clean-tmp-worktrees
-	$(MAKE) -C "./api/" clean
+	$(MAKE) -C "./api/" "$(@)"
 	rm -rf node_modules
+.PHONY: clean-data
+clean-data: ## Remove all variable user data
+# E.g., to run the proxy test bed against a fresh Plone + Volto site:
+#     $ make clean-data run-proxy-all
+	$(MAKE) -C "./api/" "$(@)"
 .PHONY: clean-tmp-worktrees
 clean-tmp-worktrees:  ## Cleanup temporary worktrees managed by this `./Makefile`
 	git worktree list --porcelain | tail -n +5 |

api/Makefile

@@ -50,9 +50,18 @@ test-acceptance-server-old: build
 	ZSERVER_PORT=55001 CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,plone.volto,plone.volto.cors APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,plone.volto:default-homepage ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
 
 .PHONY: clean
-clean:
+clean: ## Remove all build artifacts
 	rm -rf bin eggs develop-eggs include lib parts .installed.cfg .mr.developer.cfg
-
+.PHONY: clean-data
+clean-data: ## Remove all variable user data
+	mkdir -pv "./var/backups/"
+	for data_path in ./var/*storage ./var/instance ./parts/instance
+	do
+	    test '!' -e "$${data_path}" || (
+	        mv --backup=numbered -f -v "$${data_path}" "./var/backups/"
+	    )
+	done
+	touch -c "./buildout.cfg"
 
 .PHONY: start
 start: build ## Start Plone Backend

api/buildout.cfg

@@ -1,6 +1,7 @@
 [buildout]
 index = https://pypi.org/simple/
 extends =
+    https://raw.githubusercontent.com/plone/buildout.coredev/5.2.6/sources.cfg
     http://dist.plone.org/release/5.2.6/versions.cfg
     version-constraints.cfg
     versions.cfg
@@ -14,11 +15,6 @@ auto-checkout =
 always-checkout = force
 show-picked-versions = true
 
-[sources]
-plone.volto = git https://github.com/plone/plone.volto.git branch=main
-plone.rest = git git@github.com:plone/plone.rest.git branch=master
-plone.restapi = git git://github.com/plone/plone.restapi.git pushurl=git@github.com:plone/plone.restapi.git branch=master
-
 [instance]
 recipe = plone.recipe.zope2instance
 user = admin:admin
@@ -83,4 +79,4 @@ site-replace = True
 # source code involved in the application in a way that's more readable and avoids
 # duplicates from older versions of eggs.
 recipe = collective.recipe.omelette
-eggs = ${instance:eggs}
+eggs = ${test:eggs}

docker-compose.yml

@@ -11,6 +11,16 @@ services:
       - SITE=Plone
       - 'ADDONS=plone.restapi==8.21.0 plone.volto==4.0.0a3 plone.rest==2.0.0a2 plone.app.iterate==4.0.2 plone.app.vocabularies==4.3.0'
       - 'PROFILES=plone.volto:default-homepage'
+    labels:
+      traefik.enable: "true"
+      traefik.http.routers.plone.entrypoints: "web"
+      traefik.http.routers.plone.rule: "PathPrefix(`/api`)"
+      # https://doc.traefik.io/traefik/middlewares/stripprefix/#configuration-examples
+      traefik.http.middlewares.strip-api-prefix.stripprefix.prefixes: "/api"
+      traefik.http.middlewares.rewrite-api-vhost.replacepathregex.regex: "^(.*)$$"
+      traefik.http.middlewares.rewrite-api-vhost.replacepathregex.replacement: "/VirtualHostBase/http/localhost:49080/VirtualHostRoot/_vh_api$$1"
+      traefik.http.routers.plone.middlewares: "strip-api-prefix@docker,rewrite-api-vhost@docker"
+      traefik.http.services.plone.loadbalancer.server.port: "8080"
 
   frontend:
     image: 'plone/plone-frontend:latest'
@@ -25,3 +35,41 @@ services:
       RAZZLE_DEV_PROXY_API_PATH: http://backend:8080/Plone
     depends_on:
       - backend
+    labels:
+      traefik.enable: "true"
+      traefik.http.routers.frontend.entrypoints: "web"
+      traefik.http.routers.frontend.rule: "PathPrefix(`/ui`)"
+      # https://doc.traefik.io/traefik/middlewares/stripprefix/#configuration-examples
+      traefik.http.middlewares.strip-ui-prefix.stripprefix.prefixes: "/ui"
+      traefik.http.routers.frontend.middlewares: "strip-ui-prefix@docker"
+      traefik.http.services.frontend.loadbalancer.server.port: "3000"
+
+  traefik:
+    image: "traefik"
+    # Disabled so that the proxy can also be used to test deployment scenarios against
+    # a back-end and/or front-end running on the local host.
+    # depends_on:
+    #   - plone
+    #   - frontend
+    command:
+      - "--log.level=INFO"
+      # - "--log.level=DEBUG"
+      # https://doc.traefik.io/traefik/observability/access-logs/#configuration
+      - "--accesslog=true"
+      - "--providers.docker=true"
+      - "--providers.docker.exposedbydefault=false"
+      - "--entrypoints.web.address=:49080"
+      - "--providers.file.directory=/etc/traefik.d/"
+    volumes:
+      - "/var/run/docker.sock:/var/run/docker.sock:ro"
+      - "./traefik.d/:/etc/traefik.d/"
+    ports:
+      - "49080:49080"
+
+networks:
+  default:
+    ipam:
+      driver: "default"
+      config:
+        # Use the same random subnet each time
+        - subnet: "192.168.80.0/24"

docs/source/recipes/folder-structure.md

@@ -12,20 +12,26 @@ Volto is based on React, Redux, and React-Router. All of the
 code is located in the `src` folder. The following convention for locating
 resources is used.
 
+## Components
+
+`components` contains all the React components, also known as views. This includes views
+for the management interface and the theme.
+
 ## Actions
 
 `actions` contains all the redux actions for fetching all backend data like
 content, users and external resources that are pulled into our app in general.
 
-## Components
+## Reducers
 
-`components` contains all the views. This includes views for the management
-interface and the theme.
+`reducers` contains all the Redux reducers that manage the life-cycle for Redux actions
+and make the according changes to state.
 
-## Config
+## Selectors
 
-In this folder all configuration is stored. All configuration can be overridden
-in your theme package.
+`selectors` contains all the [Redux
+selectors](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#selectors)
+that interpret state into the form used by UI components.
 
 ## Constants
 
@@ -35,9 +41,10 @@ The constants contain all constants including the action types.
 
 `helpers` contains helper methods like for example url helpers.
 
-## Reducers
+## Config
 
-All the reducers are located here.
+In this folder all configuration is stored. All configuration can be overridden
+in your theme package.
 
 ## Theme
 

src/actions/actions/actions.js

@@ -12,11 +12,13 @@ import { LIST_ACTIONS } from '@plone/volto/constants/ActionTypes';
  * @returns {Object} List actions action.
  */
 export function listActions(url) {
-  return {
-    type: LIST_ACTIONS,
-    request: {
-      op: 'get',
-      path: `${url}/@actions`,
-    },
+  return async function (dispatch, getState) {
+    dispatch({
+      type: LIST_ACTIONS,
+      request: {
+        op: 'get',
+        path: `${url}/@actions`,
+      },
+    });
   };
 }

src/actions/actions/actions.test.js

@@ -5,11 +5,18 @@ describe('Actions action', () => {
   describe('listActions', () => {
     it('should create an action to list the actions', () => {
       const url = 'http://localhost';
-      const action = listActions(url);
+      const getState = () => ({});
+      const dispatch = jest.fn();
 
-      expect(action.type).toEqual(LIST_ACTIONS);
-      expect(action.request.op).toEqual('get');
-      expect(action.request.path).toEqual(`${url}/@actions`);
+      listActions(url)(dispatch, getState);
+
+      expect(dispatch).toHaveBeenCalledWith({
+        type: LIST_ACTIONS,
+        request: {
+          op: 'get',
+          path: `${url}/@actions`,
+        },
+      });
     });
   });
 });

src/actions/types/types.js

@@ -4,6 +4,7 @@
  */
 
 import { GET_TYPES } from '@plone/volto/constants/ActionTypes';
+import { loggedIn } from '@plone/volto/selectors/userSession/userSession';
 
 /**
  * Get types function.
@@ -13,7 +14,7 @@ import { GET_TYPES } from '@plone/volto/constants/ActionTypes';
  */
 export function getTypes(url) {
   return (dispatch, getState) => {
-    if (getState().userSession.token) {
+    if (loggedIn(getState())) {
       dispatch({
         type: GET_TYPES,
         request: {

src/components/manage/Contents/Contents.jsx

@@ -49,6 +49,7 @@ import {
   updateColumnsContent,
 } from '@plone/volto/actions';
 import Indexes, { defaultIndexes } from '@plone/volto/constants/Indexes';
+import { loggedIn } from '@plone/volto/selectors/userSession/userSession';
 import {
   ContentsBreadcrumbs,
   ContentsIndexHeader,
@@ -1099,9 +1100,7 @@ class Contents extends Component {
     const selected = this.state.selected.length > 0;
     const filteredItems = this.state.filteredItems || this.state.selected;
     const path = getBaseUrl(this.props.pathname);
-    const folderContentsAction = find(this.props.objectActions, {
-      id: 'folderContents',
-    });
+    const folderContentsAction = this.props.actionsById.object.folderContents;
 
     const loading =
       (this.props.clipboardRequest?.loading &&
@@ -1111,7 +1110,7 @@ class Contents extends Component {
       (this.props.orderRequest?.loading && !this.props.orderRequest?.error) ||
       (this.props.searchRequest?.loading && !this.props.searchRequest?.error);
 
-    return this.props.token && this.props.objectActions.length > 0 ? (
+    return this.props.userLoggedIn && this.props.objectActions.length > 0 ? (
       <>
         {folderContentsAction ? (
           <Container id="page-contents" className="folder-contents">
@@ -1796,7 +1795,8 @@ export const __test__ = compose(
   connect(
     (store, props) => {
       return {
-        token: store.userSession.token,
+        userLoggedIn: loggedIn(store),
+        actionsById: store.actions.actionsById,
         items: store.search.items,
         sort: store.content.update.sort,
         index: store.content.updatecolumns.idx,
@@ -1836,7 +1836,8 @@ export default compose(
   connect(
     (store, props) => {
       return {
-        token: store.userSession.token,
+        userLoggedIn: loggedIn(store),
+        actionsById: store.actions.actionsById,
         items: store.search.items,
         sort: store.content.update.sort,
         index: store.content.updatecolumns.idx,

src/components/manage/Contents/Contents.test.jsx

@@ -5,6 +5,7 @@ import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
 
 import { __test__ as Contents } from './Contents';
+import { arrayWIdsToObject } from '@plone/volto/helpers/Utils/Utils';
 
 const mockStore = configureStore();
 
@@ -24,21 +25,22 @@ jest.mock('./ContentsUploadModal', () =>
   jest.fn(() => <div className="UploadModal" />),
 );
 
+const actions = {
+  document_actions: [],
+  object: [
+    {
+      icon: '',
+      id: 'folderContents',
+      title: 'Contents',
+    },
+  ],
+};
+const actionsById = arrayWIdsToObject(actions);
+
 describe('Contents', () => {
   it('renders a folder contents view component', () => {
     const store = mockStore({
-      actions: {
-        actions: {
-          document_actions: [],
-          object: [
-            {
-              icon: '',
-              id: 'folderContents',
-              title: 'Contents',
-            },
-          ],
-        },
-      },
+      actions: { actions, actionsById },
       userSession: {
         token: '14134234123qwdaf',
       },