CSCFC4EMSCR-518 Rearrange content page top layout and add styles

mscr-ui/public/locales/en/common.json

@@ -5,12 +5,13 @@
   "access-request-error": "",
   "access-request-sent": "",
   "action": {
-    "actions": "Actions",
     "cancel": "Cancel",
+    "crosswalk-actions": "Crosswalk actions",
     "deprecate": "Deprecate",
     "invalidate": "Invalidate",
     "publish": "Publish",
-    "save": "Save"
+    "save": "Save",
+    "schema-actions": "Schema actions"
   },
   "actionmenu": {
     "delete-crosswalk": "Delete crosswalk",
@@ -340,7 +341,6 @@
   "site-logout": "Log out",
   "site-open-link-new-window": "",
   "site-open-new-email": "",
-  "site-page-not-found": "Content not available, check url",
   "site-register": "",
   "site-services": "",
   "site-title": "Metadata Schema and Crosswalk Regisrtry",
@@ -361,11 +361,16 @@
   "subscription-description": "",
   "synonym": "",
   "tabs": {
+    "crosswalk": {
+      "content-and-editor-tab": "Crosswalk"
+    },
+    "history-tab": "Version history",
     "label": "Content tabs",
-    "metadata-and-files": "Metadata and files",
-    "metadata-stub": "Metadata",
-    "schema": "Schema",
-    "version-history": "Version history"
+    "metadata-and-files": "Metadata & files",
+    "schema": {
+      "content-and-editor-tab": "Schema"
+    },
+    "stub-metadata": "Metadata"
   },
   "term-conjugation": {
     "plural": "",

mscr-ui/public/locales/fi/common.json

@@ -5,12 +5,13 @@
   "access-request-error": "",
   "access-request-sent": "",
   "action": {
-    "actions": "",
     "cancel": "",
+    "crosswalk-actions": "",
     "deprecate": "",
     "invalidate": "",
     "publish": "",
-    "save": ""
+    "save": "",
+    "schema-actions": ""
   },
   "actionmenu": {
     "delete-crosswalk": "",
@@ -340,7 +341,6 @@
   "site-logout": "",
   "site-open-link-new-window": "",
   "site-open-new-email": "",
-  "site-page-not-found": "",
   "site-register": "",
   "site-services": "",
   "site-title": "",
@@ -361,11 +361,16 @@
   "subscription-description": "",
   "synonym": "",
   "tabs": {
+    "crosswalk": {
+      "content-and-editor-tab": ""
+    },
+    "history-tab": "",
     "label": "",
     "metadata-and-files": "",
-    "metadata-stub": "",
-    "schema": "",
-    "version-history": ""
+    "schema": {
+      "content-and-editor-tab": ""
+    },
+    "stub-metadata": ""
   },
   "term-conjugation": {
     "plural": "",

mscr-ui/public/locales/sv/common.json

@@ -5,12 +5,13 @@
   "access-request-error": "",
   "access-request-sent": "",
   "action": {
-    "actions": "",
     "cancel": "",
+    "crosswalk-actions": "",
     "deprecate": "",
     "invalidate": "",
     "publish": "",
-    "save": ""
+    "save": "",
+    "schema-actions": ""
   },
   "actionmenu": {
     "delete-crosswalk": "",
@@ -340,7 +341,6 @@
   "site-logout": "logout",
   "site-open-link-new-window": "",
   "site-open-new-email": "",
-  "site-page-not-found": "",
   "site-register": "",
   "site-services": "",
   "site-title": "",
@@ -361,11 +361,16 @@
   "subscription-description": "",
   "synonym": "",
   "tabs": {
+    "crosswalk": {
+      "content-and-editor-tab": ""
+    },
+    "history-tab": "",
     "label": "",
     "metadata-and-files": "",
-    "metadata-stub": "",
-    "schema": "",
-    "version-history": ""
+    "schema": {
+      "content-and-editor-tab": ""
+    },
+    "stub-metadata": ""
   },
   "term-conjugation": {
     "plural": "",

mscr-ui/src/common/components/action-panel/action-panel.styles.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const StyledPanel = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  // Until Breadcrumbs are in place:
+  flex-direction: row-reverse;
+  padding-top: 1em;
+`;

mscr-ui/src/common/components/action-panel/index.tsx

@@ -0,0 +1,10 @@
+import { StyledPanel } from '@app/common/components/action-panel/action-panel.styles';
+import SchemaAndCrosswalkActionMenu from '@app/common/components/schema-and-crosswalk-actionmenu';
+
+export default function ActionPanel({ isActionMenu }: { isActionMenu?: boolean }) {
+  return (
+    <StyledPanel>
+      {isActionMenu && <SchemaAndCrosswalkActionMenu />}
+    </StyledPanel>
+  );
+}

mscr-ui/src/common/components/actionmenu/actionmenu.slice.tsx

@@ -0,0 +1,198 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { AppState, AppThunk } from '@app/store';
+
+export interface MenuList {
+  editMetadata: boolean;
+  editContent: boolean;
+  // testCrosswalk: boolean;
+  publish: boolean;
+  invalidate: boolean;
+  deprecate: boolean;
+  remove: boolean;
+  version: boolean;
+  mscrCopy: boolean;
+  deleteDraft: boolean;
+}
+
+const initialMenuList: MenuList = {
+  deleteDraft: false,
+  deprecate: false,
+  editContent: false,
+  editMetadata: false,
+  invalidate: false,
+  mscrCopy: false,
+  publish: false,
+  remove: false,
+  version: false,
+};
+
+export interface ModalList {
+  form: FormState;
+  confirm: ConfirmState;
+}
+
+export interface FormState {
+  mscrCopy: boolean;
+  version: boolean;
+}
+
+const initialFormState: FormState = {
+  mscrCopy: false,
+  version: false
+};
+
+export interface ConfirmState {
+  deleteDraft: boolean;
+  deprecate: boolean;
+  invalidate: boolean;
+  publish: boolean;
+  remove: boolean;
+  saveMetadata: boolean;
+}
+
+const initialConfirmState: ConfirmState = {
+  deleteDraft: false,
+  deprecate: false,
+  invalidate: false,
+  publish: false,
+  remove: false,
+  saveMetadata: false,
+};
+
+const initialModalList: ModalList = {
+  confirm: initialConfirmState,
+  form: initialFormState,
+};
+
+const initialState = {
+  isLatest: false,
+  isPublished: false,
+  isCrosswalk: false,
+  menuList: initialMenuList,
+  modal: initialModalList,
+};
+
+export const actionmenuSlice = createSlice({
+  name: 'actionmenu',
+  initialState: initialState,
+  reducers: {
+    setIsLatest(state, action) {
+      return {
+        ...state,
+        isLatest: action.payload
+      };
+    },
+    setIsPublished(state, action) {
+      return {
+        ...state,
+        isPublished: action.payload
+      };
+    },
+    setIsCrosswalk(state, action) {
+      return {
+        ...state,
+        isCrosswalk: action.payload
+      };
+    },
+    setMenuList(state, action) {
+      const menuListAddition: Partial<MenuList> = {};
+      action.payload.forEach((key: keyof MenuList) => menuListAddition[key] = true);
+      return {
+        ...state,
+        menuList: {
+          ...state.menuList,
+          ...menuListAddition
+        }
+      };
+    },
+    setMenuListFull(state, action) {
+      return {
+        ...state,
+        menuList: action.payload
+      };
+    },
+    setFormState(state, action) {
+      return {
+        ...state,
+        modal: {
+          ...initialModalList,
+          form: {
+            ...initialFormState,
+            [action.payload.key]: action.payload.value
+          }
+        }
+      };
+    },
+    setConfirmState(state, action) {
+      return {
+        ...state,
+        modal: {
+          ...initialModalList,
+          confirm: {
+            ...initialConfirmState,
+            [action.payload.key]: action.payload.value
+          }
+        }
+      };
+    },
+  },
+});
+
+export function selectIsLatest() {
+  return (state: AppState) => state.actionmenu.isLatest;
+}
+
+export function setIsLatest(isLatest?: boolean): AppThunk {
+  return (dispatch) =>
+    dispatch(actionmenuSlice.actions.setIsLatest(isLatest ?? false));
+}
+
+export function selectIsPublished() {
+  return (state: AppState) => state.actionmenu.isPublished;
+}
+
+export function setIsPublished(isPublished?: boolean): AppThunk {
+  return (dispatch) =>
+    dispatch(actionmenuSlice.actions.setIsPublished(isPublished ?? false));
+}
+
+export function selectIsCrosswalk() {
+  return (state: AppState) => state.actionmenu.isCrosswalk;
+}
+
+export function setIsCrosswalk(isCrosswalk?: boolean): AppThunk {
+  return (dispatch) =>
+    dispatch(actionmenuSlice.actions.setIsCrosswalk(isCrosswalk ?? false));
+}
+
+export function selectMenuList() {
+  return (state: AppState) => state.actionmenu.menuList;
+}
+
+export function setMenuList(menuList: Array<keyof MenuList>): AppThunk {
+  return (dispatch) => dispatch(actionmenuSlice.actions.setMenuList(menuList));
+}
+
+export function resetMenuList(): AppThunk {
+  return (dispatch) => dispatch(actionmenuSlice.actions.setMenuListFull(initialMenuList));
+}
+
+export function selectModal() {
+  return (state: AppState) => state.actionmenu.modal;
+}
+
+export function selectFormModalState() {
+  return (state: AppState) => state.actionmenu.modal.form;
+}
+
+export function setFormModalState(formType: {key: keyof FormState; value: boolean}): AppThunk {
+  return (dispatch) => dispatch(actionmenuSlice.actions.setFormState(formType));
+}
+
+export function selectConfirmModalState() {
+  return (state: AppState) => state.actionmenu.modal.confirm;
+}
+
+export function setConfirmModalState(confirmType: {key: keyof ConfirmState; value: boolean}): AppThunk {
+  return (dispatch) => dispatch(actionmenuSlice.actions.setConfirmState(confirmType));
+}