From 341252b9884fd51632c024a4dd0a30819d9607b2 Mon Sep 17 00:00:00 2001 From: Irakli Chalagashvili Date: Wed, 25 Oct 2023 21:32:19 +0400 Subject: [PATCH 001/211] ENG-5235 fix kebab menu actions for mfe widgets --- src/ui/widgets/list/WidgetListTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/widgets/list/WidgetListTable.js b/src/ui/widgets/list/WidgetListTable.js index b29f068c3..303d638e4 100644 --- a/src/ui/widgets/list/WidgetListTable.js +++ b/src/ui/widgets/list/WidgetListTable.js @@ -77,7 +77,7 @@ export const WidgetListTableBody = ({ className: 'text-center', }, Cell: (cellinfo) => { - const { values: { code, locked, hasConfig } } = cellinfo; + const { values: { code }, original: { locked, hasConfig } } = cellinfo; return (
From 218397f70610f8e5bec9d6e4c635173579b55968 Mon Sep 17 00:00:00 2001 From: Irakli Chalagashvili Date: Thu, 26 Oct 2023 19:46:26 +0400 Subject: [PATCH 002/211] ENG-5235 add save buttons --- .../newUserWidget/NewUserWidgetPage.js | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/ui/widgets/newUserWidget/NewUserWidgetPage.js b/src/ui/widgets/newUserWidget/NewUserWidgetPage.js index e4dba6cea..5943d537a 100644 --- a/src/ui/widgets/newUserWidget/NewUserWidgetPage.js +++ b/src/ui/widgets/newUserWidget/NewUserWidgetPage.js @@ -16,17 +16,22 @@ export const NewUserWidgetPageBody = () => ( - - - - - - - - - - - +
+ + + + + + + + + + + +
+
+
+
From 0262ebe3bc52c3c44b3b611ee6ed743507f91817 Mon Sep 17 00:00:00 2001 From: ichalagashvili Date: Mon, 6 Nov 2023 14:54:03 +0400 Subject: [PATCH 003/211] ENG-5235 fix buttons alignment and show parent type --- src/ui/widgets/common/WidgetForm.js | 4 +++- src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js | 3 +++ src/ui/widgets/newUserWidget/NewUserWidgetPage.js | 6 +++--- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/ui/widgets/common/WidgetForm.js b/src/ui/widgets/common/WidgetForm.js index f03d96d51..850ce97f9 100644 --- a/src/ui/widgets/common/WidgetForm.js +++ b/src/ui/widgets/common/WidgetForm.js @@ -18,6 +18,7 @@ import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelMod import IconUploader from 'ui/widgets/common/IconUploader'; import RenderDropdownTypeaheadInput from 'ui/common/form/RenderDropdownTypeaheadInput'; import { CONTINUE_SAVE_TYPE, REGULAR_SAVE_TYPE } from 'state/widgets/const'; +import { MODE_ADD_NEW } from 'ui/widgets/newUserWidget/NewUserWidgetFormContainer'; const MODE_NEW = 'new'; const MODE_EDIT = 'edit'; @@ -368,7 +369,8 @@ export class WidgetFormBody extends Component { validate={[required]} /> - {((mode === MODE_EDIT || mode === MODE_CLONE) && parentWidget) && ( + {((mode === MODE_EDIT || mode === MODE_CLONE || mode === MODE_ADD_NEW) + && parentWidget) && (
diff --git a/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js b/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js index aef114bbd..c5119114d 100644 --- a/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js +++ b/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js @@ -21,7 +21,10 @@ import { setVisibleModal } from 'state/modal/actions'; import { ROUTE_WIDGET_LIST } from 'app-init/router'; import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal'; +export const MODE_ADD_NEW = 'addNew'; + export const mapStateToProps = state => ({ + mode: MODE_ADD_NEW, groups: getGroupsList(state), parentWidget: getSelectedParentWidget(state), parentWidgetParameters: getSelectedParentWidgetParameters(state), diff --git a/src/ui/widgets/newUserWidget/NewUserWidgetPage.js b/src/ui/widgets/newUserWidget/NewUserWidgetPage.js index 5943d537a..5e39fb962 100644 --- a/src/ui/widgets/newUserWidget/NewUserWidgetPage.js +++ b/src/ui/widgets/newUserWidget/NewUserWidgetPage.js @@ -12,10 +12,10 @@ import withPermissions from 'ui/auth/withPermissions'; import { SUPERUSER_PERMISSION } from 'state/permissions/const'; export const NewUserWidgetPageBody = () => ( - + - - + +
From e78ced8e02f308eb8e5462ba67f0f5d0364623b2 Mon Sep 17 00:00:00 2001 From: ichalagashvili Date: Wed, 8 Nov 2023 14:32:15 +0400 Subject: [PATCH 004/211] ENG-5238 empty commit for ticket workflow purposes From 01160ac78bcde2b93a140222caad34ca58c33c66 Mon Sep 17 00:00:00 2001 From: Irakli Chalagashvili Date: Fri, 10 Nov 2023 18:27:45 +0400 Subject: [PATCH 005/211] ENG-5235 fix circular dependency issue --- src/ui/widgets/common/WidgetForm.js | 2 +- src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/ui/widgets/common/WidgetForm.js b/src/ui/widgets/common/WidgetForm.js index 850ce97f9..229ba7cd5 100644 --- a/src/ui/widgets/common/WidgetForm.js +++ b/src/ui/widgets/common/WidgetForm.js @@ -18,8 +18,8 @@ import ConfirmCancelModalContainer from 'ui/common/cancel-modal/ConfirmCancelMod import IconUploader from 'ui/widgets/common/IconUploader'; import RenderDropdownTypeaheadInput from 'ui/common/form/RenderDropdownTypeaheadInput'; import { CONTINUE_SAVE_TYPE, REGULAR_SAVE_TYPE } from 'state/widgets/const'; -import { MODE_ADD_NEW } from 'ui/widgets/newUserWidget/NewUserWidgetFormContainer'; +export const MODE_ADD_NEW = 'addNew'; const MODE_NEW = 'new'; const MODE_EDIT = 'edit'; export const MODE_CLONE = 'clone'; diff --git a/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js b/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js index c5119114d..0a4d1ddbf 100644 --- a/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js +++ b/src/ui/widgets/newUserWidget/NewUserWidgetFormContainer.js @@ -3,7 +3,7 @@ import { withRouter } from 'react-router-dom'; import { routeConverter } from '@entando/utils'; import { submit } from 'redux-form'; import { clearErrors } from '@entando/messages'; -import WidgetForm from 'ui/widgets/common/WidgetForm'; +import WidgetForm, { MODE_ADD_NEW } from 'ui/widgets/common/WidgetForm'; import { fetchLanguages } from 'state/languages/actions'; import { getActiveLanguages } from 'state/languages/selectors'; @@ -21,8 +21,6 @@ import { setVisibleModal } from 'state/modal/actions'; import { ROUTE_WIDGET_LIST } from 'app-init/router'; import { ConfirmCancelModalID } from 'ui/common/cancel-modal/ConfirmCancelModal'; -export const MODE_ADD_NEW = 'addNew'; - export const mapStateToProps = state => ({ mode: MODE_ADD_NEW, groups: getGroupsList(state), From 04e418de6250650766303167a9ed5dbd7a33793e Mon Sep 17 00:00:00 2001 From: Irakli Chalagashvili Date: Mon, 20 Nov 2023 15:40:56 +0400 Subject: [PATCH 006/211] ENG-4627 fix the auto code generation for hello world app --- src/ui/pages/add/PagesAddFormContainer.js | 42 ++++++++++++------- .../pages/add/PagesAddFormContainer.test.js | 8 ++++ 2 files changed, 36 insertions(+), 14 deletions(-) diff --git a/src/ui/pages/add/PagesAddFormContainer.js b/src/ui/pages/add/PagesAddFormContainer.js index 44e23202b..95f08f297 100644 --- a/src/ui/pages/add/PagesAddFormContainer.js +++ b/src/ui/pages/add/PagesAddFormContainer.js @@ -30,21 +30,35 @@ const getNextPageProperty = ({ pattern, separator, }) => { - const indexes = pages - .map(page => page[property]) - .filter(Boolean) - .map((propertyValue) => { - const regex = new RegExp(`${pattern}[${separator}]*(?\\d)*$`); - const result = propertyValue.match(regex); - if (!result) { - return null; + // Regex to match the pattern with an optional number at the end. + const regex = new RegExp(`^${pattern}(?:${separator}(?\\d+))?$`); + let maxIndex = 0; // Assume no pages are found initially. + + pages.forEach((page) => { + const propertyValue = page[property]; + if (propertyValue) { + const match = propertyValue.match(regex); + if (match) { + if (match.groups.currentIndex) { + // If there's a number, parse it and compare. + const currentIndex = parseInt(match.groups.currentIndex, 10); + if (currentIndex > maxIndex) { + maxIndex = currentIndex; + } + } else { + // If there's no number, it's the base pattern. + maxIndex = Math.max(maxIndex, 1); + } } - const currentIndexStr = result.groups.currentIndex; - return currentIndexStr ? Number(currentIndexStr) : 1; - }) - .filter(Boolean); - const nextIndex = !indexes.length ? null : Math.max(...indexes) + 1; - return `${pattern}${nextIndex ? `${separator}${nextIndex}` : ''}`; + } + }); + + if (maxIndex === 0) { + // If no matching pages are found, return the base pattern. + return pattern; + } + // If matching pages are found, increment and return. + return `${pattern}${separator}${maxIndex + 1}`; }; export const getNextPageName = ({ pages, pattern, separator }) => getNextPageProperty({ diff --git a/test/ui/pages/add/PagesAddFormContainer.test.js b/test/ui/pages/add/PagesAddFormContainer.test.js index aa477830f..64bcdf576 100644 --- a/test/ui/pages/add/PagesAddFormContainer.test.js +++ b/test/ui/pages/add/PagesAddFormContainer.test.js @@ -200,6 +200,14 @@ describe('getNextPageCode', () => { separator: '_', })).toBe('hello_world_app_3'); }); + + it('hello_world_app_11', () => { + expect(getNextPageCode({ + pages: [{ code: 'hello_world_app_10' }], + pattern: 'hello_world_app', + separator: '_', + })).toBe('hello_world_app_11'); + }); }); describe('PagesAddFormContainer', () => { From be664923df216926971f91c2f92e2326299edd63 Mon Sep 17 00:00:00 2001 From: Irakli Chalagashvili Date: Mon, 20 Nov 2023 18:11:05 +0400 Subject: [PATCH 007/211] ENG-4057 disable list, enum, enum map and composite attributes --- src/state/profile-types/actions.js | 6 +++++- test/state/profile-types/actions.test.js | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/state/profile-types/actions.js b/src/state/profile-types/actions.js index 06bf20685..41208a97c 100644 --- a/src/state/profile-types/actions.js +++ b/src/state/profile-types/actions.js @@ -79,6 +79,7 @@ import { MODE_ADD_MONOLIST_ATTRIBUTE_COMPOSITE, MODE_ADD_SUB_ATTRIBUTE_MONOLIST_COMPOSITE, } from 'state/profile-types/const'; +import { TYPE_ENUMERATOR, TYPE_ENUMERATOR_MAP } from 'state/content-type/const'; // Profile type export const setProfileTypes = profileTypes => ({ @@ -486,6 +487,7 @@ export const sendDeleteAttributeFromProfileType = attributeCode => (dispatch, ge }) ); +export const excludeTypes = [TYPE_COMPOSITE, TYPE_LIST, TYPE_ENUMERATOR, TYPE_ENUMERATOR_MAP]; export const fetchProfileTypeAttributes = (page = { page: 1, pageSize: 0 }, params = '') => (dispatch, getState) => ( new Promise((resolve) => { @@ -495,7 +497,9 @@ export const fetchProfileTypeAttributes = (page = { page: 1, pageSize: 0 }, para if (response.ok) { const list = getProfileTypeAttributesIdList(getState()); if (!list || list.length === 0) { - dispatch(setProfileTypeAttributes(json.payload)); + const exludedAttributes = json.payload ? + json.payload.filter(attribute => !excludeTypes.includes(attribute)) : []; + dispatch(setProfileTypeAttributes(exludedAttributes)); } } else { dispatch(addErrors(json.errors.map(err => err.message))); diff --git a/test/state/profile-types/actions.test.js b/test/state/profile-types/actions.test.js index e26817bc6..92ccd247c 100644 --- a/test/state/profile-types/actions.test.js +++ b/test/state/profile-types/actions.test.js @@ -65,6 +65,7 @@ import { handlerAttributeFromProfileType, sendMoveAttributeUp, sendMoveAttributeDown, + excludeTypes, } from 'state/profile-types/actions'; import { postProfileType, @@ -526,7 +527,7 @@ describe('state/profile-types/actions ', () => { expect(actions[1]).toHaveProperty('type', SET_ATTRIBUTES); expect(actions[1]).toHaveProperty('payload'); expect(actions[1]).toHaveProperty('payload.attributes'); - expect(actions[1]).toHaveProperty('payload.attributes', PROFILE_TYPES_ATTRIBUTES); + expect(actions[1]).toHaveProperty('payload.attributes', PROFILE_TYPES_ATTRIBUTES.filter(att => !excludeTypes.includes(att))); expect(actions[2]).toHaveProperty('type', TOGGLE_LOADING); done(); }).catch(done.fail); From 2e0415403937c8d10bd1eaa19ff399afd2af2367 Mon Sep 17 00:00:00 2001 From: Riccardo Fadda Date: Wed, 6 Dec 2023 12:04:39 +0100 Subject: [PATCH 008/211] ENG-5354 fix pages and widgets dropdown IDs --- src/ui/pages/common/PageTreeActionMenu.js | 2 +- src/ui/widgets/detail/DetailWidgetElement.js | 2 +- src/ui/widgets/list/WidgetListTable.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/pages/common/PageTreeActionMenu.js b/src/ui/pages/common/PageTreeActionMenu.js index f4ed399bb..ab1c36de4 100644 --- a/src/ui/pages/common/PageTreeActionMenu.js +++ b/src/ui/pages/common/PageTreeActionMenu.js @@ -98,7 +98,7 @@ class PageTreeActionMenu extends Component { return (
e.stopPropagation()} role="none" data-testid={`${page.code}-actions`}> - + { {data[info].frameDraft} - + - + {hasConfig && ( Date: Thu, 7 Dec 2023 12:24:18 +0100 Subject: [PATCH 009/211] ENG-5354 made frame dropdown button IDs unique in page designer --- src/ui/pages/config/WidgetFrame.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/pages/config/WidgetFrame.js b/src/ui/pages/config/WidgetFrame.js index 7301ec951..050f4ebe8 100644 --- a/src/ui/pages/config/WidgetFrame.js +++ b/src/ui/pages/config/WidgetFrame.js @@ -52,7 +52,7 @@ class WidgetFrame extends Component { actionsMenu = ( From 8a2d7ae274e72d3e55cdee2c8780221d6ad605e1 Mon Sep 17 00:00:00 2001 From: ryanjpburgos Date: Fri, 22 Dec 2023 15:39:33 +0100 Subject: [PATCH 010/211] ENG-5114 & ENG-5406 Avatar API integration in my profile page --- src/api/avatar.js | 39 +++++++++++ src/state/avatar/actions.js | 52 ++++++++++++++ src/state/avatar/reducer.js | 21 ++++++ src/state/avatar/selectors.js | 9 +++ src/state/avatar/types.js | 3 + src/state/file-browser/actions.js | 2 +- src/state/rootReducer.js | 3 +- src/ui/users/common/ProfileImageUploader.js | 5 +- src/ui/users/my-profile/MyProfileEditForm.js | 9 +-- .../my-profile/MyProfileEditFormContainer.js | 4 ++ test/state/avatar/actions.test.js | 69 +++++++++++++++++++ test/state/avatar/reducer.test.js | 26 +++++++ test/state/avatar/selectors.test.js | 22 ++++++ 13 files changed, 255 insertions(+), 9 deletions(-) create mode 100644 src/api/avatar.js create mode 100644 src/state/avatar/actions.js create mode 100644 src/state/avatar/reducer.js create mode 100644 src/state/avatar/selectors.js create mode 100644 src/state/avatar/types.js create mode 100644 test/state/avatar/actions.test.js create mode 100644 test/state/avatar/reducer.test.js create mode 100644 test/state/avatar/selectors.test.js diff --git a/src/api/avatar.js b/src/api/avatar.js new file mode 100644 index 000000000..35b331652 --- /dev/null +++ b/src/api/avatar.js @@ -0,0 +1,39 @@ +import { makeRequest, METHODS } from '@entando/apimanager'; +import { FILE_BROWSER_FILE } from 'test/mocks/fileBrowser'; + +const AVATAR_ENDPOINT = '/api/userProfiles/avatar'; + +export const getAvatar = () => + makeRequest({ + uri: AVATAR_ENDPOINT, + method: METHODS.GET, + mockResponse: FILE_BROWSER_FILE, + useAuthentication: true, + }); + +export const postAvatar = avatar => + makeRequest({ + uri: AVATAR_ENDPOINT, + method: METHODS.POST, + body: avatar, + mockResponse: FILE_BROWSER_FILE, + useAuthentication: true, + }); + +export const updateAvatar = avatar => + makeRequest({ + uri: AVATAR_ENDPOINT, + method: METHODS.PUT, + body: avatar, + mockResponse: FILE_BROWSER_FILE, + useAuthentication: true, + }); + +export const deleteAvatar = () => + makeRequest({ + uri: AVATAR_ENDPOINT, + method: METHODS.DELETE, + mockResponse: FILE_BROWSER_FILE, + useAuthentication: true, + }); + diff --git a/src/state/avatar/actions.js b/src/state/avatar/actions.js new file mode 100644 index 000000000..d2f4f5483 --- /dev/null +++ b/src/state/avatar/actions.js @@ -0,0 +1,52 @@ +import { postAvatar, getAvatar } from 'api/avatar'; +import { getBase64 } from 'state/file-browser/actions'; +import { toggleLoading } from 'state/loading/actions'; +import { addToast, addErrors, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages'; +import { SET_AVATAR_FILE_NAME } from './types'; + +const setAvatarFilename = filename => ({ + type: SET_AVATAR_FILE_NAME, + payload: { + filename, + }, +}); + + +export const createFileObject = async (avatar) => { + const base64 = await getBase64(avatar); + return { filename: avatar.name, base64 }; +}; + +export const uploadAvatar = + (avatar, loader = 'uploadAvatar') => + async (dispatch) => { + try { + dispatch(toggleLoading(loader)); + const requestObject = await createFileObject(avatar); + const response = await postAvatar(requestObject); + const avatarCreated = await response.json(); + dispatch(setAvatarFilename(avatarCreated.payload.filename)); + dispatch(toggleLoading(loader)); + dispatch(addToast({ id: 'fileBrowser.uploadFileComplete' }, TOAST_SUCCESS)); + } catch (error) { + dispatch(toggleLoading(loader)); + const message = { id: 'fileBrowser.uploadFileError', values: { errmsg: error } }; + dispatch(addErrors(error)); + dispatch(addToast(message, TOAST_ERROR)); + } + }; + +export const fetchAvatar = (loader = 'fetchAvatar') => async (dispatch) => { + try { + dispatch(toggleLoading(loader)); + const response = await getAvatar(); + const avatar = await response.json(); + if (avatar.payload.filename) dispatch(setAvatarFilename(avatar.payload.filename)); + dispatch(toggleLoading(loader)); + } catch (error) { + dispatch(toggleLoading(loader)); + dispatch(addErrors(error)); + dispatch(addToast(error.message, TOAST_ERROR)); + } +}; + diff --git a/src/state/avatar/reducer.js b/src/state/avatar/reducer.js new file mode 100644 index 000000000..02343f590 --- /dev/null +++ b/src/state/avatar/reducer.js @@ -0,0 +1,21 @@ +import { combineReducers } from 'redux'; +import { SET_AVATAR_FILE_NAME } from './types'; + +const initialState = { + filename: '', +}; + +const filename = (state = initialState.filename, action = {}) => { + switch (action.type) { + case SET_AVATAR_FILE_NAME: { + return action.payload.filename; + } + default: + return state; + } +}; + +export default combineReducers({ + filename, +}); + diff --git a/src/state/avatar/selectors.js b/src/state/avatar/selectors.js new file mode 100644 index 000000000..7584b10f1 --- /dev/null +++ b/src/state/avatar/selectors.js @@ -0,0 +1,9 @@ +import { createSelector } from 'reselect'; + +export const getAvatar = state => state.avatar; + +export const getAvatarFilename = createSelector( + getAvatar, + avatar => avatar.filename, +); + diff --git a/src/state/avatar/types.js b/src/state/avatar/types.js new file mode 100644 index 000000000..28e912b5c --- /dev/null +++ b/src/state/avatar/types.js @@ -0,0 +1,3 @@ +// eslint-disable-next-line import/prefer-default-export +export const SET_AVATAR_FILE_NAME = 'avatar/filename'; + diff --git a/src/state/file-browser/actions.js b/src/state/file-browser/actions.js index fbd8b8c73..4d7555877 100644 --- a/src/state/file-browser/actions.js +++ b/src/state/file-browser/actions.js @@ -34,7 +34,7 @@ const wrapApiCall = apiFunc => (...args) => async (dispatch) => { // thunks -const getBase64 = file => ( +export const getBase64 = file => ( new Promise((resolve) => { const reader = new FileReader(); reader.readAsDataURL(file); diff --git a/src/state/rootReducer.js b/src/state/rootReducer.js index 2b52b0217..9b91b1b1a 100644 --- a/src/state/rootReducer.js +++ b/src/state/rootReducer.js @@ -44,7 +44,7 @@ import editContent from 'state/edit-content/reducer'; import contents from 'state/contents/reducer'; import system from 'state/system/reducer'; import currentTenant from 'state/multi-tenancy/reducer'; - +import avatar from 'state/avatar/reducer'; import entandoApps from 'entando-apps'; import hub from 'state/component-repository/hub/reducer'; import mfe from 'state/mfe/reducer'; @@ -103,6 +103,7 @@ const reducerDef = { mfe, currentTenant, currentSystemConfiguration, + avatar, }; // app root reducer diff --git a/src/ui/users/common/ProfileImageUploader.js b/src/ui/users/common/ProfileImageUploader.js index ae3a87b6b..5d922038b 100644 --- a/src/ui/users/common/ProfileImageUploader.js +++ b/src/ui/users/common/ProfileImageUploader.js @@ -3,8 +3,7 @@ import PropTypes from 'prop-types'; import { Dropdown, MenuItem } from 'patternfly-react'; import { useDispatch } from 'react-redux'; import md5 from 'md5'; - -import { uploadFile } from 'state/file-browser/actions'; +import { uploadAvatar } from 'state/avatar/actions'; import { useDynamicResourceUrl } from 'hooks/useDynamicResourceUrl'; const FILE_BROWSER_PATH = 'static/profile'; @@ -24,7 +23,7 @@ const ProfileImageUploader = ({ const imageProvider = useDynamicResourceUrl(FILE_BROWSER_PATH); const onFileChange = ({ target: { files } }) => { - dispatch(uploadFile(files[0], FILE_BROWSER_PATH)).then(() => onChange(files[0].name)); + dispatch(uploadAvatar(files[0])).then(() => onChange(files[0].name)); }; const handleUploadClick = () => { diff --git a/src/ui/users/my-profile/MyProfileEditForm.js b/src/ui/users/my-profile/MyProfileEditForm.js index 899767e16..ae4f91102 100644 --- a/src/ui/users/my-profile/MyProfileEditForm.js +++ b/src/ui/users/my-profile/MyProfileEditForm.js @@ -151,7 +151,7 @@ export class MyProfileEditFormBody extends Component { render() { const { profileTypesAttributes, defaultLanguage, languages, intl, userEmail, onChangeProfilePicture, - userProfileForm, + avatar, } = this.props; const { editMode } = this.state; @@ -226,13 +226,12 @@ export class MyProfileEditFormBody extends Component { return field(intl, attribute, !editMode); }); - const { profilepicture } = userProfileForm; return (
- + ({ username: getUsername(state), @@ -24,12 +26,14 @@ export const mapStateToProps = state => ({ ), userEmail: getUserEmail(state), userProfileForm: getUserProfileForm(state), + avatar: getAvatarFilename(state), }); export const mapDispatchToProps = dispatch => ({ onMount: () => { dispatch(fetchLanguages({ page: 1, pageSize: 0 })); dispatch(fetchMyUserProfile()); + dispatch(fetchAvatar()); }, onSubmit: (userprofile) => { dispatch(updateMyUserProfile(userprofile, false)); diff --git a/test/state/avatar/actions.test.js b/test/state/avatar/actions.test.js new file mode 100644 index 000000000..26ebaf138 --- /dev/null +++ b/test/state/avatar/actions.test.js @@ -0,0 +1,69 @@ +import { createFileObject, uploadAvatar, fetchAvatar } from 'state/avatar/actions'; +import * as actionsHelper from 'state/avatar/actions'; +import * as apiHelper from 'api/avatar'; + +describe('createFileObject', () => { + it('should create a file object', async () => { + const avatar = new File(['test data'], 'test.png', { type: 'image/png' }); + const result = await createFileObject(avatar); + expect(result).toEqual({ filename: 'test.png', base64: result.base64 }); + }); +}); + +describe('uploadAvatar', () => { + it('should upload avatar successfully', async () => { + const avatar = new File(['test data'], 'test.png', { type: 'image/png' }); + const dispatch = jest.fn(); + jest.spyOn(actionsHelper, 'createFileObject').mockResolvedValue({ filename: 'test.png', base64: 'base64encodedstring' }); + jest.spyOn(apiHelper, 'postAvatar').mockResolvedValue({ json: () => Promise.resolve({ payload: { filename: 'test.png' } }) }); + + await uploadAvatar(avatar)(dispatch); + + expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'uploadAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { filename: 'test.png' }, type: 'avatar/filename' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'uploadAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { message: { id: 'fileBrowser.uploadFileComplete' }, type: 'success' }, type: 'toasts/add-toast' }); + expect(dispatch).toHaveBeenCalledTimes(4); + }); + + it('should handle avatar upload error', async () => { + const avatar = { name: 'test.jpg' }; + const dispatch = jest.fn(); + const error = new Error('Upload failed'); + jest.spyOn(actionsHelper, 'createFileObject').mockResolvedValue({ filename: avatar.name, base64: 'base64encodedstring' }); + jest.spyOn(apiHelper, 'postAvatar').mockRejectedValue(error); + + await uploadAvatar(avatar)(dispatch); + + expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'uploadAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'uploadAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { message: { id: 'fileBrowser.uploadFileError', values: { errmsg: TypeError('[TypeError: Failed to execute \'readAsDataURL\' on \'FileReader\': parameter 1 is not of type \'Blob\'.]') } }, type: 'error' }, type: 'toasts/add-toast' }); + expect(dispatch).toHaveBeenCalledWith({ type: 'errors/add-errors', payload: { errors: TypeError('[TypeError: Failed to execute \'readAsDataURL\' on \'FileReader\': parameter 1 is not of type \'Blob\'.]') } }); + expect(dispatch).toHaveBeenCalledTimes(4); + }); +}); + + +describe('fetchAvatar', () => { + it('should retrieve the avatar successfully', async () => { + const dispatch = jest.fn(); + jest.spyOn(apiHelper, 'getAvatar').mockResolvedValue({ json: () => Promise.resolve({ payload: { filename: 'test.png' } }) }); + await fetchAvatar()(dispatch); + expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { filename: 'test.png' }, type: 'avatar/filename' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledTimes(3); + }); + + it('should handle avatar fetch error', async () => { + const dispatch = jest.fn(); + const error = new Error('Fetch failed'); + jest.spyOn(apiHelper, 'getAvatar').mockRejectedValue(error); + await fetchAvatar()(dispatch); + expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { message: 'Fetch failed', type: 'error' }, type: 'toasts/add-toast' }); + expect(dispatch).toHaveBeenCalledTimes(4); + }); +}); + diff --git a/test/state/avatar/reducer.test.js b/test/state/avatar/reducer.test.js new file mode 100644 index 000000000..c5eaeb895 --- /dev/null +++ b/test/state/avatar/reducer.test.js @@ -0,0 +1,26 @@ +import { createStore } from 'redux'; +import rootReducer from 'state/rootReducer'; +import { SET_AVATAR_FILE_NAME } from 'state/avatar/types'; + +describe('avatarReducer', () => { + it('should handle SET_AVATAR_FILE_NAME action', () => { + const store = createStore(rootReducer); + const setAvatarFileNameAction = { + type: SET_AVATAR_FILE_NAME, + payload: { filename: 'test.jpg' }, + }; + store.dispatch(setAvatarFileNameAction); + expect(store.getState().avatar.filename).toBe('test.jpg'); + }); + + it('should handle unknown action type', () => { + const store = createStore(rootReducer); + const unknownAction = { + type: 'UNKNOWN_ACTION', + payload: { filename: 'test.jpg' }, + }; + store.dispatch(unknownAction); + expect(store.getState().avatar.filename).toBe(''); + }); +}); + diff --git a/test/state/avatar/selectors.test.js b/test/state/avatar/selectors.test.js new file mode 100644 index 000000000..36bcd75b7 --- /dev/null +++ b/test/state/avatar/selectors.test.js @@ -0,0 +1,22 @@ +import { createStore } from 'redux'; +import { getAvatar, getAvatarFilename } from 'state/avatar/selectors'; +import rootReducer from 'state/rootReducer'; + +describe('getAvatar', () => { + it('should return the avatar state', () => { + const initialState = { avatar: { filename: 'test.jpg' } }; + const store = createStore(rootReducer, initialState); + const result = getAvatar(store.getState()); + expect(result).toEqual(initialState.avatar); + }); +}); + +describe('getAvatarFilename selector', () => { + it('should return the avatar filename', () => { + const initialState = { avatar: { filename: 'test.jpg' } }; + const store = createStore(rootReducer, initialState); + const result = getAvatarFilename(store.getState()); + expect(result).toBe('test.jpg'); + }); +}); + From 0c264ca425cd2acf5c34e664eac17156d7f4a7ca Mon Sep 17 00:00:00 2001 From: ryanjpburgos Date: Fri, 22 Dec 2023 15:53:22 +0100 Subject: [PATCH 011/211] ENG-5404 fix root page actions behaviour --- src/ui/pages/common/PageTreeActionMenu.js | 55 +++++++++++++++-------- 1 file changed, 37 insertions(+), 18 deletions(-) diff --git a/src/ui/pages/common/PageTreeActionMenu.js b/src/ui/pages/common/PageTreeActionMenu.js index ab1c36de4..0d40d9028 100644 --- a/src/ui/pages/common/PageTreeActionMenu.js +++ b/src/ui/pages/common/PageTreeActionMenu.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { DropdownKebab, MenuItem } from 'patternfly-react'; -import { PAGE_STATUS_DRAFT, PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED } from 'state/pages/const'; +import { PAGE_STATUS_DRAFT, PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED, HOMEPAGE_CODE } from 'state/pages/const'; class PageTreeActionMenu extends Component { constructor(props) { @@ -24,14 +24,13 @@ class PageTreeActionMenu extends Component { return () => handler && handler(this.props.page, this.props.domain); } - render() { + renderPublishOrUnpublishMenuItem(disableDueToLackOfGroupAccess) { const { - page, onClickAdd, onClickEdit, onClickConfigure, onClickDetails, - onClickClone, onClickDelete, onClickPublish, onClickUnpublish, - onClickViewPublishedPage, onClickPreview, myGroupIds, isSearchMode, + page, onClickPublish, onClickUnpublish, isSearchMode, } = this.props; - - const disableDueToLackOfGroupAccess = !myGroupIds.includes(page.ownerGroup); + const isUnpublishedPage = page.status === PAGE_STATUS_UNPUBLISHED; + const hasUnpublishedParent = page.parentStatus === PAGE_STATUS_UNPUBLISHED; + const isHomepage = page.code === HOMEPAGE_CODE; let disabled = false; if (!page.isEmpty && page.status === PAGE_STATUS_PUBLISHED && !isSearchMode) { @@ -41,10 +40,11 @@ class PageTreeActionMenu extends Component { disabled = page.hasPublishedChildren; } - const disablePublishAction = (page.status === PAGE_STATUS_UNPUBLISHED && - page.parentStatus === PAGE_STATUS_UNPUBLISHED && !isSearchMode) - || disableDueToLackOfGroupAccess; - const changePublishStatus = page.status === PAGE_STATUS_PUBLISHED ? + const disablePublishAction = ( + isUnpublishedPage && hasUnpublishedParent && !isSearchMode && !isHomepage + ) || disableDueToLackOfGroupAccess; + + return page.status === PAGE_STATUS_PUBLISHED ? ( ); + } - const viewPublishedPage = page.status === PAGE_STATUS_PUBLISHED ? + renderViewPublishedPageMenuItem() { + const { page, onClickViewPublishedPage } = this.props; + return page.status === PAGE_STATUS_PUBLISHED ? ( ); + } - const disableDelete = !page.isEmpty || page.status === PAGE_STATUS_PUBLISHED || - page.status === PAGE_STATUS_DRAFT || disableDueToLackOfGroupAccess; - const renderDeleteItem = () => ( + renderDeleteMenuItem(disableDueToLackOfGroupAccess) { + const { page, onClickDelete } = this.props; + const isPublished = page.status === PAGE_STATUS_PUBLISHED; + const isHomepage = page.code === HOMEPAGE_CODE; + const hasStatusDraft = page.status === PAGE_STATUS_DRAFT; + + const disableDelete = !page.isEmpty || isPublished || isHomepage || + hasStatusDraft || disableDueToLackOfGroupAccess; + return ( ); + } + + render() { + const { + page, onClickAdd, onClickEdit, onClickConfigure, onClickDetails, + onClickClone, onClickPreview, myGroupIds, + } = this.props; + + const disableDueToLackOfGroupAccess = !myGroupIds.includes(page.ownerGroup); return (
e.stopPropagation()} role="none" data-testid={`${page.code}-actions`}> @@ -130,7 +149,7 @@ class PageTreeActionMenu extends Component { > - {changePublishStatus} + {this.renderPublishOrUnpublishMenuItem(disableDueToLackOfGroupAccess)} {onClickDetails && ( )} - {renderDeleteItem()} + {this.renderDeleteMenuItem(disableDueToLackOfGroupAccess)} - {viewPublishedPage} + {this.renderViewPublishedPageMenuItem()}
); From 2115568acabdc3299038cf32416dabbc00dc2734 Mon Sep 17 00:00:00 2001 From: ryanjpburgos Date: Mon, 8 Jan 2024 14:36:20 +0100 Subject: [PATCH 012/211] ENG-5315 manage visibility of delete button on WidgetListTable --- src/ui/widgets/list/WidgetListTable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/widgets/list/WidgetListTable.js b/src/ui/widgets/list/WidgetListTable.js index e5341a596..11ea4e433 100644 --- a/src/ui/widgets/list/WidgetListTable.js +++ b/src/ui/widgets/list/WidgetListTable.js @@ -77,7 +77,7 @@ export const WidgetListTableBody = ({ className: 'text-center', }, Cell: (cellinfo) => { - const { values: { code }, original: { locked, hasConfig } } = cellinfo; + const { values: { code }, original: { locked, hasConfig, used } } = cellinfo; return (
@@ -95,7 +95,7 @@ export const WidgetListTableBody = ({ > - {!locked && ( + {!locked && used === 0 && ( onDelete(code)} From 01a415d3274a0ce45c3c527e4757bab3a9a74668 Mon Sep 17 00:00:00 2001 From: ryanjpburgos Date: Fri, 12 Jan 2024 17:05:57 +0100 Subject: [PATCH 013/211] ENG-5114 Separate Avatar Section from My Profile Edit Form --- src/state/avatar/actions.js | 21 +++++++++++++++++-- src/ui/users/common/ProfileImageUploader.js | 15 +++++++++++-- src/ui/users/my-profile/MyProfileEditForm.js | 4 +--- .../my-profile/MyProfileEditFormContainer.js | 10 ++++++--- 4 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/state/avatar/actions.js b/src/state/avatar/actions.js index d2f4f5483..3f3d463e0 100644 --- a/src/state/avatar/actions.js +++ b/src/state/avatar/actions.js @@ -1,10 +1,10 @@ -import { postAvatar, getAvatar } from 'api/avatar'; +import { postAvatar, getAvatar, deleteAvatar } from 'api/avatar'; import { getBase64 } from 'state/file-browser/actions'; import { toggleLoading } from 'state/loading/actions'; import { addToast, addErrors, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages'; import { SET_AVATAR_FILE_NAME } from './types'; -const setAvatarFilename = filename => ({ +export const setAvatarFilename = filename => ({ type: SET_AVATAR_FILE_NAME, payload: { filename, @@ -50,3 +50,20 @@ export const fetchAvatar = (loader = 'fetchAvatar') => async (dispatch) => { } }; + +export const removeAvatar = + (loader = 'removeAvatar') => + async (dispatch) => { + try { + dispatch(toggleLoading(loader)); + await deleteAvatar(); + dispatch(setAvatarFilename('')); + dispatch(toggleLoading(loader)); + dispatch(addToast({ id: 'fileBrowser.uploadFileComplete' }, TOAST_SUCCESS)); + } catch (error) { + dispatch(toggleLoading(loader)); + const message = { id: 'fileBrowser.uploadFileError', values: { errmsg: error } }; + dispatch(addErrors(error)); + dispatch(addToast(message, TOAST_ERROR)); + } + }; diff --git a/src/ui/users/common/ProfileImageUploader.js b/src/ui/users/common/ProfileImageUploader.js index 5d922038b..d3cf16da9 100644 --- a/src/ui/users/common/ProfileImageUploader.js +++ b/src/ui/users/common/ProfileImageUploader.js @@ -18,12 +18,23 @@ const ProfileImageUploader = ({ }) => { const [edit, setEdit] = useState(false); const inputFileRef = useRef(null); + const imageRef = useRef(null); const dispatch = useDispatch(); const imageProvider = useDynamicResourceUrl(FILE_BROWSER_PATH); const onFileChange = ({ target: { files } }) => { - dispatch(uploadAvatar(files[0])).then(() => onChange(files[0].name)); + const file = files[0]; + if (file) { + dispatch(uploadAvatar(files[0])).then(() => { + const fr = new FileReader(); + fr.onload = () => { + imageRef.current.src = fr.result; + onChange(file.name); + }; + fr.readAsDataURL(file); + }); + } }; const handleUploadClick = () => { @@ -51,7 +62,7 @@ const ProfileImageUploader = ({ className="ProfileImageUploader__file-upload" /> diff --git a/src/ui/users/my-profile/MyProfileEditForm.js b/src/ui/users/my-profile/MyProfileEditForm.js index ae4f91102..060e090f1 100644 --- a/src/ui/users/my-profile/MyProfileEditForm.js +++ b/src/ui/users/my-profile/MyProfileEditForm.js @@ -229,12 +229,11 @@ export class MyProfileEditFormBody extends Component { return ( -
@@ -320,7 +319,6 @@ MyProfileEditFormBody.propTypes = { id: PropTypes.string, typeCode: PropTypes.string, typeDescription: PropTypes.string, - profilepicture: PropTypes.string, }), onChangeProfilePicture: PropTypes.func.isRequired, avatar: PropTypes.string, diff --git a/src/ui/users/my-profile/MyProfileEditFormContainer.js b/src/ui/users/my-profile/MyProfileEditFormContainer.js index a7fe67a05..e1b1a8aef 100644 --- a/src/ui/users/my-profile/MyProfileEditFormContainer.js +++ b/src/ui/users/my-profile/MyProfileEditFormContainer.js @@ -1,10 +1,10 @@ import { connect } from 'react-redux'; -import { reset, change } from 'redux-form'; +import { reset } from 'redux-form'; import { getUsername } from '@entando/apimanager'; import { fetchMyUserProfile, updateMyUserProfile } from 'state/user-profile/actions'; import { fetchLanguages } from 'state/languages/actions'; -import { fetchAvatar } from 'state/avatar/actions'; +import { fetchAvatar, removeAvatar } from 'state/avatar/actions'; import { getDefaultLanguage, getActiveLanguages } from 'state/languages/selectors'; import { getSelectedProfileTypeAttributes } from 'state/profile-types/selectors'; import MyProfileEditForm from 'ui/users/my-profile/MyProfileEditForm'; @@ -41,7 +41,11 @@ export const mapDispatchToProps = dispatch => ({ onCancel: () => { dispatch(reset('UserProfile')); }, - onChangeProfilePicture: picture => dispatch(change('UserProfile', 'profilepicture', picture)), + onChangeProfilePicture: (picture) => { + if (picture === '') { + dispatch(removeAvatar()); + } + }, }); export default connect( From e3dc7852b0c1735eee7afff34f54000c820a889a Mon Sep 17 00:00:00 2001 From: ryanjpburgos Date: Mon, 15 Jan 2024 12:24:58 +0100 Subject: [PATCH 014/211] ENG-5114 fix rerendering behaviour of avatar image component --- src/state/avatar/actions.js | 4 ++-- test/state/avatar/actions.test.js | 11 +++++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/state/avatar/actions.js b/src/state/avatar/actions.js index 3f3d463e0..0e9ef0d58 100644 --- a/src/state/avatar/actions.js +++ b/src/state/avatar/actions.js @@ -25,7 +25,7 @@ export const uploadAvatar = const requestObject = await createFileObject(avatar); const response = await postAvatar(requestObject); const avatarCreated = await response.json(); - dispatch(setAvatarFilename(avatarCreated.payload.filename)); + dispatch(setAvatarFilename(`${avatarCreated.payload.filename}?${Date.now()}`)); dispatch(toggleLoading(loader)); dispatch(addToast({ id: 'fileBrowser.uploadFileComplete' }, TOAST_SUCCESS)); } catch (error) { @@ -41,7 +41,7 @@ export const fetchAvatar = (loader = 'fetchAvatar') => async (dispatch) => { dispatch(toggleLoading(loader)); const response = await getAvatar(); const avatar = await response.json(); - if (avatar.payload.filename) dispatch(setAvatarFilename(avatar.payload.filename)); + if (avatar.payload.filename) dispatch(setAvatarFilename(`${avatar.payload.filename}?${Date.now()}`)); dispatch(toggleLoading(loader)); } catch (error) { dispatch(toggleLoading(loader)); diff --git a/test/state/avatar/actions.test.js b/test/state/avatar/actions.test.js index 26ebaf138..84efca895 100644 --- a/test/state/avatar/actions.test.js +++ b/test/state/avatar/actions.test.js @@ -11,6 +11,9 @@ describe('createFileObject', () => { }); describe('uploadAvatar', () => { + beforeAll(() => { + global.Date.now = jest.fn(() => new Date('2019-04-07T10:20:30Z').getTime()); + }); it('should upload avatar successfully', async () => { const avatar = new File(['test data'], 'test.png', { type: 'image/png' }); const dispatch = jest.fn(); @@ -20,7 +23,7 @@ describe('uploadAvatar', () => { await uploadAvatar(avatar)(dispatch); expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'uploadAvatar' }, type: 'loading/toggle-loading' }); - expect(dispatch).toHaveBeenCalledWith({ payload: { filename: 'test.png' }, type: 'avatar/filename' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { filename: `test.png?${new Date('2019-04-07T10:20:30Z').getTime()}` }, type: 'avatar/filename' }); expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'uploadAvatar' }, type: 'loading/toggle-loading' }); expect(dispatch).toHaveBeenCalledWith({ payload: { message: { id: 'fileBrowser.uploadFileComplete' }, type: 'success' }, type: 'toasts/add-toast' }); expect(dispatch).toHaveBeenCalledTimes(4); @@ -45,12 +48,16 @@ describe('uploadAvatar', () => { describe('fetchAvatar', () => { + beforeAll(() => { + global.Date.now = jest.fn(() => new Date('2019-04-07T10:20:30Z').getTime()); + }); + it('should retrieve the avatar successfully', async () => { const dispatch = jest.fn(); jest.spyOn(apiHelper, 'getAvatar').mockResolvedValue({ json: () => Promise.resolve({ payload: { filename: 'test.png' } }) }); await fetchAvatar()(dispatch); expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); - expect(dispatch).toHaveBeenCalledWith({ payload: { filename: 'test.png' }, type: 'avatar/filename' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { filename: `test.png?${new Date('2019-04-07T10:20:30Z').getTime()}` }, type: 'avatar/filename' }); expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); expect(dispatch).toHaveBeenCalledTimes(3); }); From b8e4cb5fee27f705ecc78c91dae6d8eb947f3be7 Mon Sep 17 00:00:00 2001 From: ryanjpburgos Date: Wed, 17 Jan 2024 11:32:37 +0100 Subject: [PATCH 015/211] ENG-5427 Gravatar Management in My Profile --- src/state/avatar/actions.js | 46 +++++++++++++++++-- src/state/avatar/reducer.js | 14 +++++- src/state/avatar/selectors.js | 5 ++ src/state/avatar/types.js | 2 +- src/state/profile-types/selectors.js | 13 ++++++ src/ui/users/common/ProfileImageUploader.js | 9 ++-- src/ui/users/my-profile/MyProfileEditForm.js | 7 ++- .../my-profile/MyProfileEditFormContainer.js | 12 +++-- test/state/avatar/actions.test.js | 7 +-- test/state/avatar/selectors.test.js | 15 ++++-- 10 files changed, 108 insertions(+), 22 deletions(-) diff --git a/src/state/avatar/actions.js b/src/state/avatar/actions.js index 0e9ef0d58..3ea0cba4b 100644 --- a/src/state/avatar/actions.js +++ b/src/state/avatar/actions.js @@ -2,7 +2,7 @@ import { postAvatar, getAvatar, deleteAvatar } from 'api/avatar'; import { getBase64 } from 'state/file-browser/actions'; import { toggleLoading } from 'state/loading/actions'; import { addToast, addErrors, TOAST_SUCCESS, TOAST_ERROR } from '@entando/messages'; -import { SET_AVATAR_FILE_NAME } from './types'; +import { SET_AVATAR_FILE_NAME, SET_USE_GRAVATAR } from './types'; export const setAvatarFilename = filename => ({ type: SET_AVATAR_FILE_NAME, @@ -11,6 +11,13 @@ export const setAvatarFilename = filename => ({ }, }); +export const setUseGravatar = useGravatar => ({ + type: SET_USE_GRAVATAR, + payload: { + useGravatar, + }, +}); + export const createFileObject = async (avatar) => { const base64 = await getBase64(avatar); @@ -24,8 +31,10 @@ export const uploadAvatar = dispatch(toggleLoading(loader)); const requestObject = await createFileObject(avatar); const response = await postAvatar(requestObject); - const avatarCreated = await response.json(); - dispatch(setAvatarFilename(`${avatarCreated.payload.filename}?${Date.now()}`)); + const { payload } = await response.json(); + const { filename, useGravatar } = payload; + dispatch(setUseGravatar(useGravatar)); + dispatch(setAvatarFilename(`${filename}?${Date.now()}`)); dispatch(toggleLoading(loader)); dispatch(addToast({ id: 'fileBrowser.uploadFileComplete' }, TOAST_SUCCESS)); } catch (error) { @@ -36,12 +45,38 @@ export const uploadAvatar = } }; +export const setGravatar = (loader = 'useGravatar') => + async (dispatch) => { + try { + dispatch(toggleLoading(loader)); + const response = await postAvatar({ useGravatar: true }); + const { payload } = await response.json(); + const { useGravatar } = payload; + dispatch(setUseGravatar(useGravatar)); + dispatch(addToast({ id: 'fileBrowser.uploadFileComplete' }, TOAST_SUCCESS)); + dispatch(toggleLoading(loader)); + } catch (error) { + dispatch(toggleLoading(loader)); + const message = { id: 'fileBrowser.uploadFileError', values: { errmsg: error } }; + dispatch(addErrors(error)); + dispatch(addToast(message, TOAST_ERROR)); + } + }; + export const fetchAvatar = (loader = 'fetchAvatar') => async (dispatch) => { try { dispatch(toggleLoading(loader)); const response = await getAvatar(); - const avatar = await response.json(); - if (avatar.payload.filename) dispatch(setAvatarFilename(`${avatar.payload.filename}?${Date.now()}`)); + const { ok, status } = response; + if (ok) { + const { payload } = await response.json(); + const { filename, useGravatar } = payload; + dispatch(setUseGravatar(useGravatar)); + if (filename) dispatch(setAvatarFilename(`${filename}?${Date.now()}`)); + } else if (!ok && status === 404) { + dispatch(setUseGravatar(false)); + dispatch(setAvatarFilename('')); + } dispatch(toggleLoading(loader)); } catch (error) { dispatch(toggleLoading(loader)); @@ -58,6 +93,7 @@ export const removeAvatar = dispatch(toggleLoading(loader)); await deleteAvatar(); dispatch(setAvatarFilename('')); + dispatch(setUseGravatar(false)); dispatch(toggleLoading(loader)); dispatch(addToast({ id: 'fileBrowser.uploadFileComplete' }, TOAST_SUCCESS)); } catch (error) { diff --git a/src/state/avatar/reducer.js b/src/state/avatar/reducer.js index 02343f590..875bb1d72 100644 --- a/src/state/avatar/reducer.js +++ b/src/state/avatar/reducer.js @@ -1,8 +1,9 @@ import { combineReducers } from 'redux'; -import { SET_AVATAR_FILE_NAME } from './types'; +import { SET_AVATAR_FILE_NAME, SET_USE_GRAVATAR } from './types'; const initialState = { filename: '', + useGravatar: false, }; const filename = (state = initialState.filename, action = {}) => { @@ -15,7 +16,18 @@ const filename = (state = initialState.filename, action = {}) => { } }; +const useGravatar = (state = initialState.useGravatar, action = {}) => { + switch (action.type) { + case SET_USE_GRAVATAR: { + return action.payload.useGravatar; + } + default: + return state; + } +}; + export default combineReducers({ filename, + useGravatar, }); diff --git a/src/state/avatar/selectors.js b/src/state/avatar/selectors.js index 7584b10f1..5ec68cb1b 100644 --- a/src/state/avatar/selectors.js +++ b/src/state/avatar/selectors.js @@ -7,3 +7,8 @@ export const getAvatarFilename = createSelector( avatar => avatar.filename, ); +export const getUseGravatar = createSelector( + getAvatar, + avatar => avatar.useGravatar, +); + diff --git a/src/state/avatar/types.js b/src/state/avatar/types.js index 28e912b5c..4262e955f 100644 --- a/src/state/avatar/types.js +++ b/src/state/avatar/types.js @@ -1,3 +1,3 @@ -// eslint-disable-next-line import/prefer-default-export export const SET_AVATAR_FILE_NAME = 'avatar/filename'; +export const SET_USE_GRAVATAR = 'avatar/useGravatar'; diff --git a/src/state/profile-types/selectors.js b/src/state/profile-types/selectors.js index bcee9571a..f24e777cb 100644 --- a/src/state/profile-types/selectors.js +++ b/src/state/profile-types/selectors.js @@ -6,6 +6,7 @@ import { TYPE_LIST, TYPE_COMPOSITE, } from 'state/profile-types/const'; +import { getUserProfile } from 'state/user-profile/selectors'; const NO_ATTRIBUTE_FOR_TYPE_MONOLIST = [TYPE_LIST, TYPE_MONOLIST]; @@ -180,3 +181,15 @@ export const getProfileTypeReferencesStatus = createSelector([getProfileTypeRefe } return { type: 'success', status: 'ready', profileTypesCode: [] }; }); + +export const getUserProfileEmail = createSelector( + [getSelectedProfileTypeAttributes, getUserProfile], + (selectedUserProfileAttributes, userProfile) => { + const emailAttribute = selectedUserProfileAttributes + && selectedUserProfileAttributes.find(attribute => attribute.roles && attribute.roles.find(role => role.code === 'userprofile:email')); + const { attributes } = userProfile; + const userProfileEmailAttribute = + attributes.find(attr => emailAttribute && attr.code === emailAttribute.code); + return userProfileEmailAttribute && userProfileEmailAttribute.value; + }, +); diff --git a/src/ui/users/common/ProfileImageUploader.js b/src/ui/users/common/ProfileImageUploader.js index d3cf16da9..87391d2dd 100644 --- a/src/ui/users/common/ProfileImageUploader.js +++ b/src/ui/users/common/ProfileImageUploader.js @@ -14,7 +14,7 @@ const publicUrl = process.env.PUBLIC_URL; const toMd5 = string => md5(string.trim().toLowerCase()); const ProfileImageUploader = ({ - image, onChange, gravatarEmail, editable, + image, onChange, gravatarEmail, editable, useGravatar, onSetGravatar, }) => { const [edit, setEdit] = useState(false); const inputFileRef = useRef(null); @@ -44,7 +44,7 @@ const ProfileImageUploader = ({ let userPicture = `${publicUrl}/images/user-icon.svg`; if (edit) { userPicture = `${publicUrl}/images/user-edit.svg`; - } else if (image === GRAVATAR && gravatarEmail) { + } else if (useGravatar && gravatarEmail) { userPicture = `${GRAVATAR_URL}/${toMd5(gravatarEmail)}`; } else if (image) { userPicture = `${imageProvider}/${image}`; @@ -67,7 +67,7 @@ const ProfileImageUploader = ({ Upload Image - { gravatarEmail && onChange(GRAVATAR)}>Use Gravatar} + { gravatarEmail && onSetGravatar(GRAVATAR)}>Use Gravatar} onChange('')}>Remove Image @@ -79,13 +79,16 @@ ProfileImageUploader.propTypes = { image: PropTypes.string, gravatarEmail: PropTypes.string, onChange: PropTypes.func.isRequired, + onSetGravatar: PropTypes.func.isRequired, editable: PropTypes.bool, + useGravatar: PropTypes.bool, }; ProfileImageUploader.defaultProps = { image: '', gravatarEmail: '', editable: false, + useGravatar: false, }; export default ProfileImageUploader; diff --git a/src/ui/users/my-profile/MyProfileEditForm.js b/src/ui/users/my-profile/MyProfileEditForm.js index 060e090f1..7077281c7 100644 --- a/src/ui/users/my-profile/MyProfileEditForm.js +++ b/src/ui/users/my-profile/MyProfileEditForm.js @@ -151,7 +151,7 @@ export class MyProfileEditFormBody extends Component { render() { const { profileTypesAttributes, defaultLanguage, languages, intl, userEmail, onChangeProfilePicture, - avatar, + avatar, useGravatar, onSetGravatar, } = this.props; const { editMode } = this.state; @@ -233,6 +233,8 @@ export class MyProfileEditFormBody extends Component { image={avatar} onChange={onChangeProfilePicture} gravatarEmail={userEmail} + onSetGravatar={onSetGravatar} + useGravatar={useGravatar} editable /> @@ -281,6 +283,7 @@ MyProfileEditFormBody.propTypes = { onSubmit: PropTypes.func.isRequired, onCancel: PropTypes.func.isRequired, username: PropTypes.string.isRequired, + onSetGravatar: PropTypes.string.isRequired, profileTypesAttributes: PropTypes.arrayOf(PropTypes.shape({ type: PropTypes.string, code: PropTypes.string, @@ -322,6 +325,7 @@ MyProfileEditFormBody.propTypes = { }), onChangeProfilePicture: PropTypes.func.isRequired, avatar: PropTypes.string, + useGravatar: PropTypes.bool, }; MyProfileEditFormBody.defaultProps = { @@ -329,6 +333,7 @@ MyProfileEditFormBody.defaultProps = { userEmail: undefined, userProfileForm: {}, avatar: '', + useGravatar: false, }; const MyProfileEditForm = reduxForm({ diff --git a/src/ui/users/my-profile/MyProfileEditFormContainer.js b/src/ui/users/my-profile/MyProfileEditFormContainer.js index e1b1a8aef..1731b466a 100644 --- a/src/ui/users/my-profile/MyProfileEditFormContainer.js +++ b/src/ui/users/my-profile/MyProfileEditFormContainer.js @@ -4,14 +4,14 @@ import { getUsername } from '@entando/apimanager'; import { fetchMyUserProfile, updateMyUserProfile } from 'state/user-profile/actions'; import { fetchLanguages } from 'state/languages/actions'; -import { fetchAvatar, removeAvatar } from 'state/avatar/actions'; +import { fetchAvatar, removeAvatar, setGravatar } from 'state/avatar/actions'; import { getDefaultLanguage, getActiveLanguages } from 'state/languages/selectors'; -import { getSelectedProfileTypeAttributes } from 'state/profile-types/selectors'; +import { getSelectedProfileTypeAttributes, getUserProfileEmail } from 'state/profile-types/selectors'; import MyProfileEditForm from 'ui/users/my-profile/MyProfileEditForm'; import { getPayloadForForm } from 'helpers/entities'; -import { getUserProfile, getUserEmail } from 'state/user-profile/selectors'; +import { getUserProfile } from 'state/user-profile/selectors'; import { getUserProfileForm } from 'state/forms/selectors'; -import { getAvatarFilename } from 'state/avatar/selectors'; +import { getAvatarFilename, getUseGravatar } from 'state/avatar/selectors'; export const mapStateToProps = state => ({ username: getUsername(state), @@ -24,9 +24,10 @@ export const mapStateToProps = state => ({ getDefaultLanguage(state), getActiveLanguages(state), ), - userEmail: getUserEmail(state), + userEmail: getUserProfileEmail(state), userProfileForm: getUserProfileForm(state), avatar: getAvatarFilename(state), + useGravatar: getUseGravatar(state), }); export const mapDispatchToProps = dispatch => ({ @@ -46,6 +47,7 @@ export const mapDispatchToProps = dispatch => ({ dispatch(removeAvatar()); } }, + onSetGravatar: () => dispatch(setGravatar()), }); export default connect( diff --git a/test/state/avatar/actions.test.js b/test/state/avatar/actions.test.js index 84efca895..bc1de5e28 100644 --- a/test/state/avatar/actions.test.js +++ b/test/state/avatar/actions.test.js @@ -26,7 +26,7 @@ describe('uploadAvatar', () => { expect(dispatch).toHaveBeenCalledWith({ payload: { filename: `test.png?${new Date('2019-04-07T10:20:30Z').getTime()}` }, type: 'avatar/filename' }); expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'uploadAvatar' }, type: 'loading/toggle-loading' }); expect(dispatch).toHaveBeenCalledWith({ payload: { message: { id: 'fileBrowser.uploadFileComplete' }, type: 'success' }, type: 'toasts/add-toast' }); - expect(dispatch).toHaveBeenCalledTimes(4); + expect(dispatch).toHaveBeenCalledTimes(5); }); it('should handle avatar upload error', async () => { @@ -54,12 +54,13 @@ describe('fetchAvatar', () => { it('should retrieve the avatar successfully', async () => { const dispatch = jest.fn(); - jest.spyOn(apiHelper, 'getAvatar').mockResolvedValue({ json: () => Promise.resolve({ payload: { filename: 'test.png' } }) }); + jest.spyOn(apiHelper, 'getAvatar').mockResolvedValue({ ok: true, json: () => Promise.resolve({ payload: { filename: 'test.png' } }) }); await fetchAvatar()(dispatch); expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); + expect(dispatch).toHaveBeenCalledWith({ payload: { useGravatar: false }, type: 'avatar/useGravatar' }); expect(dispatch).toHaveBeenCalledWith({ payload: { filename: `test.png?${new Date('2019-04-07T10:20:30Z').getTime()}` }, type: 'avatar/filename' }); expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); - expect(dispatch).toHaveBeenCalledTimes(3); + expect(dispatch).toHaveBeenCalledTimes(4); }); it('should handle avatar fetch error', async () => { diff --git a/test/state/avatar/selectors.test.js b/test/state/avatar/selectors.test.js index 36bcd75b7..a00157edb 100644 --- a/test/state/avatar/selectors.test.js +++ b/test/state/avatar/selectors.test.js @@ -1,10 +1,10 @@ import { createStore } from 'redux'; -import { getAvatar, getAvatarFilename } from 'state/avatar/selectors'; +import { getAvatar, getAvatarFilename, getUseGravatar } from 'state/avatar/selectors'; import rootReducer from 'state/rootReducer'; describe('getAvatar', () => { it('should return the avatar state', () => { - const initialState = { avatar: { filename: 'test.jpg' } }; + const initialState = { avatar: { filename: 'test.jpg', useGravatar: false } }; const store = createStore(rootReducer, initialState); const result = getAvatar(store.getState()); expect(result).toEqual(initialState.avatar); @@ -13,10 +13,19 @@ describe('getAvatar', () => { describe('getAvatarFilename selector', () => { it('should return the avatar filename', () => { - const initialState = { avatar: { filename: 'test.jpg' } }; + const initialState = { avatar: { filename: 'test.jpg', useGravatar: false } }; const store = createStore(rootReducer, initialState); const result = getAvatarFilename(store.getState()); expect(result).toBe('test.jpg'); }); }); +describe('getUseGravatar selector', () => { + it('should return the useGravatar value', () => { + const initialState = { avatar: { filename: 'test.jpg', useGravatar: false } }; + const store = createStore(rootReducer, initialState); + const result = getUseGravatar(store.getState()); + expect(result).toBeFalsy(); + }); +}); + From 77acd209e95a3009b424575ef9a4f68b98861858 Mon Sep 17 00:00:00 2001 From: ryanjpburgos Date: Wed, 17 Jan 2024 11:37:53 +0100 Subject: [PATCH 016/211] ENG-5427 fix actions test --- test/state/avatar/actions.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/state/avatar/actions.test.js b/test/state/avatar/actions.test.js index bc1de5e28..736ac0b6f 100644 --- a/test/state/avatar/actions.test.js +++ b/test/state/avatar/actions.test.js @@ -54,7 +54,7 @@ describe('fetchAvatar', () => { it('should retrieve the avatar successfully', async () => { const dispatch = jest.fn(); - jest.spyOn(apiHelper, 'getAvatar').mockResolvedValue({ ok: true, json: () => Promise.resolve({ payload: { filename: 'test.png' } }) }); + jest.spyOn(apiHelper, 'getAvatar').mockResolvedValue({ ok: true, json: () => Promise.resolve({ payload: { filename: 'test.png', useGravatar: false } }) }); await fetchAvatar()(dispatch); expect(dispatch).toHaveBeenCalledWith({ payload: { id: 'fetchAvatar' }, type: 'loading/toggle-loading' }); expect(dispatch).toHaveBeenCalledWith({ payload: { useGravatar: false }, type: 'avatar/useGravatar' }); From f8475cfa101202767632b55188a521533cfb3cda Mon Sep 17 00:00:00 2001 From: ryanjpburgos Date: Wed, 17 Jan 2024 14:30:27 +0100 Subject: [PATCH 017/211] ENG-5427 add unit tests for getUserProfileEmail selectors and translations --- src/locales/en.js | 1 + src/locales/it.js | 1 + src/locales/pt.js | 1 + src/state/avatar/actions.js | 6 +-- src/state/user-profile/selectors.js | 2 +- test/state/profile-types/selectors.test.js | 43 ++++++++++++++++++++++ 6 files changed, 50 insertions(+), 4 deletions(-) diff --git a/src/locales/en.js b/src/locales/en.js index 1b28feb5a..11a061038 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -472,6 +472,7 @@ export default { 'fileBrowser.createFolder': 'Create folder', 'fileBrowser.uploadFiles': 'Upload files', 'fileBrowser.uploadFileComplete': 'Upload file complete', + 'fileBrowser.removeFileComplete': 'Remove file complete', 'fileBrowser.uploadFileError': 'Error uploading file - {errmsg}', 'fileBrowser.downloadFile': 'Download', 'fileBrowser.newFolder': 'New folder name', diff --git a/src/locales/it.js b/src/locales/it.js index 3e0ddd6b6..66c854721 100644 --- a/src/locales/it.js +++ b/src/locales/it.js @@ -472,6 +472,7 @@ export default { 'fileBrowser.createFolder': 'Crea cartella', 'fileBrowser.uploadFiles': 'Upload File', 'fileBrowser.uploadFileComplete': 'Upload del file completato', + 'fileBrowser.removeFileComplete': 'Rimozione file completata', 'fileBrowser.uploadFileError': 'Errore nell\'upload del file - {errmsg}', 'fileBrowser.downloadFile': 'Download', 'fileBrowser.newFolder': 'Nome nuova cartella', diff --git a/src/locales/pt.js b/src/locales/pt.js index 5c9fd69bb..572c6c6a2 100644 --- a/src/locales/pt.js +++ b/src/locales/pt.js @@ -450,6 +450,7 @@ export default { 'fileBrowser.createFolder': 'Criar pasta', 'fileBrowser.uploadFiles': 'Upload Files', 'fileBrowser.uploadFileComplete': 'Upload de arquivo concluído', + 'fileBrowser.removeFileComplete': 'Remover arquivo concluído', 'fileBrowser.uploadFileError': 'Erro no upload de arquivo - {errmsg}', 'fileBrowser.downloadFile': 'Download', 'fileBrowser.newFolder': 'Nova da Nova Pasta', diff --git a/src/state/avatar/actions.js b/src/state/avatar/actions.js index 3ea0cba4b..f332e7cb2 100644 --- a/src/state/avatar/actions.js +++ b/src/state/avatar/actions.js @@ -32,8 +32,8 @@ export const uploadAvatar = const requestObject = await createFileObject(avatar); const response = await postAvatar(requestObject); const { payload } = await response.json(); - const { filename, useGravatar } = payload; - dispatch(setUseGravatar(useGravatar)); + const { filename } = payload; + dispatch(setUseGravatar(false)); dispatch(setAvatarFilename(`${filename}?${Date.now()}`)); dispatch(toggleLoading(loader)); dispatch(addToast({ id: 'fileBrowser.uploadFileComplete' }, TOAST_SUCCESS)); @@ -95,7 +95,7 @@ export const removeAvatar = dispatch(setAvatarFilename('')); dispatch(setUseGravatar(false)); dispatch(toggleLoading(loader)); - dispatch(addToast({ id: 'fileBrowser.uploadFileComplete' }, TOAST_SUCCESS)); + dispatch(addToast({ id: 'fileBrowser.removeFileComplete' }, TOAST_SUCCESS)); } catch (error) { dispatch(toggleLoading(loader)); const message = { id: 'fileBrowser.uploadFileError', values: { errmsg: error } }; diff --git a/src/state/user-profile/selectors.js b/src/state/user-profile/selectors.js index f9480c93a..26c0a83fd 100644 --- a/src/state/user-profile/selectors.js +++ b/src/state/user-profile/selectors.js @@ -2,6 +2,6 @@ export const getUserProfile = state => state.userProfile; export const getUserEmail = (state) => { const { attributes } = state.userProfile; - const emailAttribute = attributes.find(attr => attr.code === 'email'); + const emailAttribute = attributes && attributes.find(attr => attr.code === 'email'); return emailAttribute && emailAttribute.value; }; diff --git a/test/state/profile-types/selectors.test.js b/test/state/profile-types/selectors.test.js index 17e2ea87b..fd9e79205 100644 --- a/test/state/profile-types/selectors.test.js +++ b/test/state/profile-types/selectors.test.js @@ -22,6 +22,7 @@ import { getMonolistAttributeType, getIsMonolistCompositeAttributeType, getNewAttributeComposite, + getUserProfileEmail, } from 'state/profile-types/selectors'; const TEST_STATE = { @@ -235,4 +236,46 @@ describe('state/users/selectors', () => { const res = getNewAttributeComposite(LIST_SELECTED4); expect(res).toEqual('boi'); }); + + describe('getUserProfileEmail selector', () => { + it('should return undefined if selectedUserProfileAttributes is falsy', () => { + const result = getUserProfileEmail({ + profileTypes: { selected: null }, userProfile: { attributes: [] }, + }); + expect(result).toBeUndefined(); + }); + + it('should return undefined if userProfile is falsy', () => { + const result = getUserProfileEmail({ profileTypes: { selected: [{ roles: [{ code: 'userprofile:email' }] }] }, userProfile: { attributes: [] } }); + expect(result).toBeUndefined(); + }); + + it('should return undefined if emailAttribute is not found', () => { + const result = getUserProfileEmail({ + profileTypes: { selected: [] }, userProfile: { attributes: [] }, + }); + expect(result).toBeUndefined(); + }); + + it('should return undefined if userProfileEmailAttribute is not found', () => { + const result = getUserProfileEmail({ profileTypes: { selected: { attributes: [{ roles: [{ code: 'invalid-role-code' }] }] } }, userProfile: { attributes: [] } }); + expect(result).toBeUndefined(); + }); + + it('should return userProfileEmailAttribute.value if all conditions are met', () => { + const selectedUserProfileAttributes = [{ code: 'email', roles: [{ code: 'userprofile:email' }] }]; + const userProfile = { + attributes: [ + { code: 'email', value: 'test@example.com' }, + { code: 'other-attribute', value: 'other-value' }, + ], + }; + + const result = getUserProfileEmail({ + profileTypes: { selected: { attributes: selectedUserProfileAttributes } }, userProfile, + }); + expect(result).toBe('test@example.com'); + }); + }); }); + From f6c33d48da9c27bac8a99ddc3792098fac27d32d Mon Sep 17 00:00:00 2001 From: Irakli Chalagashvili Date: Thu, 2 May 2024 13:49:49 +0400 Subject: [PATCH 018/211] ENG-11111 fix mfe api failure --- src/api/mfe.js | 8 ++++---- test/api/mfe.test.js | 10 +++++----- test/test/mocks/mfe.js | 25 +++++++++++++++++++++++++ 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/src/api/mfe.js b/src/api/mfe.js index 42edf17ec..24e067f38 100644 --- a/src/api/mfe.js +++ b/src/api/mfe.js @@ -1,13 +1,13 @@ -import { makeRequest, METHODS } from '@entando/apimanager'; -import { LIST_MFE_RESPONSE_OK } from 'test/mocks/mfe'; +import { makeMockRequest, METHODS } from '@entando/apimanager'; +import { LIST_MFE_MENU } from 'test/mocks/mfe'; // eslint-disable-next-line import/prefer-default-export export const getMfeConfigList = (params = '') => ( - makeRequest({ + makeMockRequest({ uri: `/bundles/all/widgets?filters[0].value=app-builder&filters[0].attribute=widgetType&filters[0].operator=eq${params}`, domain: '/digital-exchange', method: METHODS.GET, - mockResponse: LIST_MFE_RESPONSE_OK, + mockResponse: LIST_MFE_MENU, useAuthentication: true, }) ); diff --git a/test/api/mfe.test.js b/test/api/mfe.test.js index 778166a45..920237bc9 100644 --- a/test/api/mfe.test.js +++ b/test/api/mfe.test.js @@ -1,10 +1,10 @@ import 'test/enzyme-init'; import { getMfeConfigList } from 'api/mfe'; -import { makeRequest, METHODS } from '@entando/apimanager'; -import { LIST_MFE_RESPONSE_OK } from 'test/mocks/mfe'; +import { makeMockRequest, METHODS } from '@entando/apimanager'; +import { LIST_MFE_MENU } from 'test/mocks/mfe'; jest.mock('@entando/apimanager', () => ({ - makeRequest: jest.fn(() => new Promise(resolve => resolve({}))), + makeMockRequest: jest.fn(() => new Promise(resolve => resolve({}))), METHODS: require.requireActual('@entando/apimanager').METHODS, })); @@ -20,11 +20,11 @@ describe('api/mfe', () => { it('makes the correct request', () => { getMfeConfigList(); - expect(makeRequest).toHaveBeenCalledWith({ + expect(makeMockRequest).toHaveBeenCalledWith({ uri: '/bundles/all/widgets?filters[0].value=app-builder&filters[0].attribute=widgetType&filters[0].operator=eq', domain: '/digital-exchange', method: METHODS.GET, - mockResponse: LIST_MFE_RESPONSE_OK, + mockResponse: LIST_MFE_MENU, useAuthentication: true, }); }); diff --git a/test/test/mocks/mfe.js b/test/test/mocks/mfe.js index 383ea5ca1..b6d43e64c 100644 --- a/test/test/mocks/mfe.js +++ b/test/test/mocks/mfe.js @@ -175,3 +175,28 @@ export const UPDATE_MFE_OK = { }, }, }; + +export const LIST_MFE_MENU = [ + { + id: '9e343527-37bf-472e-aadc-a780613ceb88', + bundleId: '64c57c33', + bundleCode: 'layout-core-bundle-id', + bundleGroup: 'layout-core-bundle', + widgetName: 'app-builder-menu', + widgetCode: '6e3e752a-f796-11ec-b939-0242ac120002', + assets: ['http://localhost:4173/app-builder-menu.umd.js'], + customElement: 'app-builder-menu', + descriptorExt: { + slot: 'primary-menu', + nav: [], + paths: [], + }, + systemParams: { + api: { + navigation: { + url: 'http://localhost:8080', + }, + }, + }, + }, +]; From cf13edfde2782f242bb492ac3de320308063e94d Mon Sep 17 00:00:00 2001 From: firegloves Date: Fri, 3 May 2024 10:47:05 +0200 Subject: [PATCH 019/211] ENG-11111 mfe mock fix --- test/test/mocks/mfe.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/test/mocks/mfe.js b/test/test/mocks/mfe.js index b6d43e64c..82c3da15e 100644 --- a/test/test/mocks/mfe.js +++ b/test/test/mocks/mfe.js @@ -184,7 +184,7 @@ export const LIST_MFE_MENU = [ bundleGroup: 'layout-core-bundle', widgetName: 'app-builder-menu', widgetCode: '6e3e752a-f796-11ec-b939-0242ac120002', - assets: ['http://localhost:4173/app-builder-menu.umd.js'], + assets: [], customElement: 'app-builder-menu', descriptorExt: { slot: 'primary-menu', From cc3dc8c7ecea0a9260a46214ee175e57c6ee1567 Mon Sep 17 00:00:00 2001 From: firegloves Date: Fri, 3 May 2024 11:40:57 +0200 Subject: [PATCH 020/211] ENG-11111 mfe mock fix --- test/test/mocks/mfe.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/test/mocks/mfe.js b/test/test/mocks/mfe.js index 82c3da15e..1f15147ef 100644 --- a/test/test/mocks/mfe.js +++ b/test/test/mocks/mfe.js @@ -184,7 +184,7 @@ export const LIST_MFE_MENU = [ bundleGroup: 'layout-core-bundle', widgetName: 'app-builder-menu', widgetCode: '6e3e752a-f796-11ec-b939-0242ac120002', - assets: [], + assets: ['menu/app-builder-menu.umd.js'], customElement: 'app-builder-menu', descriptorExt: { slot: 'primary-menu', From a290c1b416d3460a1eb70678869c0153a9db8c7e Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 29 Nov 2024 09:19:04 +0100 Subject: [PATCH 021/211] refactor dashboard upper cards --- sass/common/Icon.scss | 12 ++++++++++++ sass/dashboard/Cards.scss | 31 +++++++++++++++++++++++------- sass/index.scss | 1 + sass/patternfly.scss | 11 ++++++++++- sass/variables.scss | 9 +++++++++ src/ui/common/Icon.js | 9 +++++++++ src/ui/dashboard/Languages.js | 12 ++++++------ src/ui/dashboard/UserManagement.js | 13 +++++++------ src/ui/dashboard/UxPatterns.js | 14 ++++++++------ 9 files changed, 86 insertions(+), 26 deletions(-) create mode 100644 sass/common/Icon.scss create mode 100644 src/ui/common/Icon.js diff --git a/sass/common/Icon.scss b/sass/common/Icon.scss new file mode 100644 index 000000000..fad9b75be --- /dev/null +++ b/sass/common/Icon.scss @@ -0,0 +1,12 @@ +// sass-lint:disable class-name-format nesting-depth +.icon__colored-bg { + &::before { + display: flex; + width: 32px; + align-items: center; + height: 32px; + justify-content: center; + background-color: $color-dark-blue; + border-radius: 50%; + } +} \ No newline at end of file diff --git a/sass/dashboard/Cards.scss b/sass/dashboard/Cards.scss index c7d6b2f2f..2fa082e9a 100644 --- a/sass/dashboard/Cards.scss +++ b/sass/dashboard/Cards.scss @@ -1,24 +1,41 @@ // sass-lint:disable class-name-format nesting-depth .DashboardPage { + + .card-pf-title { + font-size: 18px; + + .fa { + color: $color-brand-primary; + } + } + + .card-pf-body { + a { + color: $color-text-tertiary; + } + } + .card-pf { + border: 1px solid $color-neutral-grey; + border-radius: $spacing-4; + box-shadow: none; + .fa { margin-right: 5px; - color: $color-icon-gray; &:not(:first-child) { margin-left: 15px; } } - .btn { - &.pull-right { - margin-top: -5px; - } - } .separator { margin-right: 5px; margin-left: 15px; } } -} + + .card-pf-aggregate-status-count { + font-size: 14px; + } +} \ No newline at end of file diff --git a/sass/index.scss b/sass/index.scss index 3719b1941..773b85b07 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -88,6 +88,7 @@ @import "common/CMSShell"; @import "common/CMSPageTitle"; @import "common/cross-browser"; +@import "common/Icon"; @import "common/SectionTitle"; @import "common/CollapsibleSectionTitle"; @import "common/attributes/AttributesDateSettings"; diff --git a/sass/patternfly.scss b/sass/patternfly.scss index 9e11199cd..3491697b6 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -135,8 +135,17 @@ $fa-square-o: "\f096"; background-color: $color-primary-dark !important; // sass-lint:disable-line no-important } +.btn-link { + color: $color-brand-primary; + font-size: 16px; + + .fa { + color: $color-brand-primary; + } +} + .CodeMirror { - border: 1px solid $color-pf-black-400; + border: 1px $color-pf-black-400 solid; } .has-error { diff --git a/sass/variables.scss b/sass/variables.scss index 8848dd85a..fd3868048 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -14,3 +14,12 @@ $color-unpublish: #A6A6A6; $color-inactive-dark: #363636; $color-border-blue: #40A6DA; $color-dim-grey: #72767B; + +$color-background-primary: #FFFFFF; +$color-brand-primary: #1A75FF; +$color-brand-secondary: #0041CC; +$color-neutral-grey: #E4E7EC; +$color-text-tertiary: #637083; +$color-dark-blue: #E5EEFF; + +$spacing-4: 4px; \ No newline at end of file diff --git a/src/ui/common/Icon.js b/src/ui/common/Icon.js new file mode 100644 index 000000000..027c42996 --- /dev/null +++ b/src/ui/common/Icon.js @@ -0,0 +1,9 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import { Icon as PFIcon } from 'patternfly-react'; + +const Icon = ({ background, ...rest }) => ( + +); + +export default Icon; diff --git a/src/ui/dashboard/Languages.js b/src/ui/dashboard/Languages.js index 008d9bdf1..a9d24410d 100644 --- a/src/ui/dashboard/Languages.js +++ b/src/ui/dashboard/Languages.js @@ -5,9 +5,9 @@ import { CardTitle, CardBody, AggregateStatusCount, - Icon, Button, } from 'patternfly-react'; +import Icon from 'ui/common/Icon'; import { FormattedMessage } from 'react-intl'; import { Clearfix } from 'react-bootstrap'; @@ -31,22 +31,22 @@ class Languages extends Component { - - + + - - {this.props.activeLanguages}  + {this.props.activeLanguages}  diff --git a/src/ui/dashboard/UserManagement.js b/src/ui/dashboard/UserManagement.js index b994ae827..cd380c030 100644 --- a/src/ui/dashboard/UserManagement.js +++ b/src/ui/dashboard/UserManagement.js @@ -5,9 +5,9 @@ import { CardTitle, CardBody, AggregateStatusCount, - Icon, Button, } from 'patternfly-react'; +import Icon from 'ui/common/Icon'; import { PermissionCheck, hasAccess } from '@entando/utils'; import { Clearfix } from 'react-bootstrap'; import { Link } from 'react-router-dom'; @@ -48,8 +48,8 @@ class UserManagement extends Component { - - + + + @@ -68,7 +69,7 @@ class UserManagement extends Component { - {users}  + {users}  @@ -77,7 +78,7 @@ class UserManagement extends Component { - {groups}  + {groups}  diff --git a/src/ui/dashboard/UxPatterns.js b/src/ui/dashboard/UxPatterns.js index 7f11d03ef..0901adadf 100644 --- a/src/ui/dashboard/UxPatterns.js +++ b/src/ui/dashboard/UxPatterns.js @@ -5,9 +5,9 @@ import { CardTitle, CardBody, AggregateStatusCount, - Icon, Button, } from 'patternfly-react'; +import Icon from 'ui/common/Icon'; import { hasAccess } from '@entando/utils'; import { Clearfix } from 'react-bootstrap'; import { Link } from 'react-router-dom'; @@ -34,15 +34,16 @@ class UxPatterns extends Component { - - + + {isSuperuser && ( )} @@ -51,14 +52,15 @@ class UxPatterns extends Component { - {this.props.widgets}  + {this.props.widgets}  + - {this.props.pageTemplates}  + {this.props.pageTemplates}  From efc4ef3807427393eff9a82863df30d7f970f53d Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 29 Nov 2024 15:17:34 +0100 Subject: [PATCH 022/211] edit icon on title cards --- sass/common/Icon.scss | 6 +++--- sass/dashboard/Cards.scss | 8 -------- sass/dashboard/DashboardPage.scss | 11 +++++++++++ src/ui/contents/list-card/ContentListCard.js | 8 +++++--- src/ui/dashboard/PagesList.js | 9 ++++++--- 5 files changed, 25 insertions(+), 17 deletions(-) diff --git a/sass/common/Icon.scss b/sass/common/Icon.scss index fad9b75be..acab49f3b 100644 --- a/sass/common/Icon.scss +++ b/sass/common/Icon.scss @@ -2,11 +2,11 @@ .icon__colored-bg { &::before { display: flex; - width: 32px; align-items: center; - height: 32px; justify-content: center; - background-color: $color-dark-blue; + width: 32px; + height: 32px; border-radius: 50%; + background-color: $color-dark-blue; } } \ No newline at end of file diff --git a/sass/dashboard/Cards.scss b/sass/dashboard/Cards.scss index 2fa082e9a..9ea7b9129 100644 --- a/sass/dashboard/Cards.scss +++ b/sass/dashboard/Cards.scss @@ -1,14 +1,6 @@ // sass-lint:disable class-name-format nesting-depth .DashboardPage { - .card-pf-title { - font-size: 18px; - - .fa { - color: $color-brand-primary; - } - } - .card-pf-body { a { color: $color-text-tertiary; diff --git a/sass/dashboard/DashboardPage.scss b/sass/dashboard/DashboardPage.scss index 3e016b8dc..6200b08ad 100644 --- a/sass/dashboard/DashboardPage.scss +++ b/sass/dashboard/DashboardPage.scss @@ -1,4 +1,15 @@ +// sass-lint:disable class-name-format nesting-depth + .DashboardPage { + + .card-pf-title { + font-size: 18px; + + .fa { + color: $color-brand-primary; + } + } + .container-fluid { // sass-lint:disable-line class-name-format @media (max-width: 426px) { padding-right: 8px; diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index 41ab44134..df0120953 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -17,6 +17,7 @@ import { import ViewPermissionNoticeOverlay from 'ui/dashboard/ViewPermissionNoticeOverlay'; import paginatorMessages from 'ui/common/paginatorMessages'; +import Icon from 'ui/common/Icon'; class ContentListCard extends Component { constructor(props) { @@ -122,7 +123,7 @@ class ContentListCard extends Component { userPermissions, ) && ( -

- +

+ + {renderAddContentButton}

diff --git a/src/ui/dashboard/PagesList.js b/src/ui/dashboard/PagesList.js index 70e588264..b42d3f04a 100644 --- a/src/ui/dashboard/PagesList.js +++ b/src/ui/dashboard/PagesList.js @@ -14,6 +14,7 @@ import paginatorMessages from 'ui/paginatorMessages'; import { MANAGE_PAGES_PERMISSION } from 'state/permissions/const'; import ViewPermissionNoticeOverlay from 'ui/dashboard/ViewPermissionNoticeOverlay'; +import Icon from 'ui/common/Icon'; class PagesList extends Component { constructor(props) { @@ -138,14 +139,16 @@ class PagesList extends Component { return (
-

- +

+ +

From 57f53a2ddd44454935b8b3197929d8784701c6ee Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 29 Nov 2024 15:32:19 +0100 Subject: [PATCH 023/211] edit title-card text --- sass/dashboard/DashboardPage.scss | 1 + src/ui/contents/list-card/ContentListCard.js | 2 +- src/ui/dashboard/Languages.js | 2 +- src/ui/dashboard/PagesList.js | 2 +- src/ui/dashboard/UserManagement.js | 2 +- src/ui/dashboard/UxPatterns.js | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/sass/dashboard/DashboardPage.scss b/sass/dashboard/DashboardPage.scss index 6200b08ad..a313393c6 100644 --- a/sass/dashboard/DashboardPage.scss +++ b/sass/dashboard/DashboardPage.scss @@ -4,6 +4,7 @@ .card-pf-title { font-size: 18px; + font-weight: 600; .fa { color: $color-brand-primary; diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index df0120953..ec975a948 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -155,7 +155,7 @@ class ContentListCard extends Component {

- + {renderAddContentButton}

diff --git a/src/ui/dashboard/Languages.js b/src/ui/dashboard/Languages.js index a9d24410d..5c9ca2a2f 100644 --- a/src/ui/dashboard/Languages.js +++ b/src/ui/dashboard/Languages.js @@ -32,7 +32,7 @@ class Languages extends Component { - +
); @@ -180,16 +160,14 @@ PagesList.propTypes = { intl: intlShape.isRequired, onWillMount: PropTypes.func.isRequired, userPermissions: PropTypes.arrayOf(PropTypes.string), - pages: PropTypes.arrayOf(PropTypes.shape({ - code: PropTypes.string, - fullTitles: PropTypes.shape({ - en: PropTypes.string, - it: PropTypes.string, + pages: PropTypes.arrayOf( + PropTypes.shape({ + code: PropTypes.string, + status: PropTypes.string, + numWidget: PropTypes.number, + lastModified: PropTypes.string, }), - status: PropTypes.string, - numWidget: PropTypes.number, - lastModified: PropTypes.string, - })), + ), page: PropTypes.number.isRequired, pageSize: PropTypes.number.isRequired, totalItems: PropTypes.number.isRequired, @@ -201,7 +179,7 @@ PagesList.propTypes = { PagesList.defaultProps = { pages: [], userPermissions: [], - columnOrder: ['fullTitles', 'pageModel', 'numWidget', 'status', 'lastModified'], + columnOrder: ['pageModel', 'numWidget', 'status', 'lastModified'], onSetColumnOrder: () => {}, }; diff --git a/src/ui/pages/common/PageStatusIcon.js b/src/ui/pages/common/PageStatusIcon.js index e3f15843c..732329939 100644 --- a/src/ui/pages/common/PageStatusIcon.js +++ b/src/ui/pages/common/PageStatusIcon.js @@ -1,7 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, intlShape } from 'react-intl'; -import { PAGE_STATUS_DRAFT, PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED } from 'state/pages/const'; +import { + PAGE_STATUS_DRAFT, + PAGE_STATUS_PUBLISHED, + PAGE_STATUS_UNPUBLISHED, +} from 'state/pages/const'; const PageStatusIcon = ({ intl, status }) => { const msgs = defineMessages({ @@ -11,7 +15,10 @@ const PageStatusIcon = ({ intl, status }) => { }, }); const iconTitle = intl.formatMessage(msgs.pageStatus, {}); - const classNameAr = ['fa fa-circle PageStatusIcon', `PageStatusIcon--${status}`]; + const classNameAr = [ + 'fa fa-circle PageStatusIcon', + `PageStatusIcon--${status}`, + ]; return ; }; @@ -20,7 +27,8 @@ PageStatusIcon.propTypes = { status: PropTypes.oneOf([ PAGE_STATUS_DRAFT, PAGE_STATUS_PUBLISHED, - PAGE_STATUS_UNPUBLISHED]).isRequired, + PAGE_STATUS_UNPUBLISHED, + ]).isRequired, }; export default injectIntl(PageStatusIcon); diff --git a/src/ui/pages/common/StatusBadge.js b/src/ui/pages/common/StatusBadge.js new file mode 100644 index 000000000..b0b4b9e8f --- /dev/null +++ b/src/ui/pages/common/StatusBadge.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { defineMessages, injectIntl, intlShape } from 'react-intl'; +import { + PAGE_STATUS_DRAFT, + PAGE_STATUS_PUBLISHED, + PAGE_STATUS_UNPUBLISHED, +} from 'state/pages/const'; + +const StatusBadge = ({ intl, status }) => { + const msgs = defineMessages({ + pageStatus: { + id: `pages.status.${status}`, + defaultMessage: status, + }, + }); + const iconTitle = intl.formatMessage(msgs.pageStatus, {}); + const classNameAr = ['fa fa-circle StatusBadge', `StatusBadge--${status}`]; + + return ( +
+ + {status} +
+ ); +}; + +StatusBadge.propTypes = { + intl: intlShape.isRequired, + status: PropTypes.oneOf([ + PAGE_STATUS_DRAFT, + PAGE_STATUS_PUBLISHED, + PAGE_STATUS_UNPUBLISHED, + ]).isRequired, +}; + +export default injectIntl(StatusBadge); From 74c4df57019f81e7767c9ddb6403b73208e3d52a Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 3 Dec 2024 10:43:55 +0100 Subject: [PATCH 027/211] fix style Content Status card --- sass/contents/ContentsStatusCard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/contents/ContentsStatusCard.scss b/sass/contents/ContentsStatusCard.scss index 575a1b946..788a49b66 100644 --- a/sass/contents/ContentsStatusCard.scss +++ b/sass/contents/ContentsStatusCard.scss @@ -4,7 +4,7 @@ @extend .div__border--solid-grey; position: relative; margin: 0 -10px 20px; - padding: 0 20px 5px; + padding: 20px; border-radius: $spacing-4; border: $color-border-grey solid 1px; From 73a76f47b4e89500ee14d27d9436df84cbef0a52 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 3 Dec 2024 14:54:13 +0100 Subject: [PATCH 028/211] minor style change Dashboard button --- sass/dashboard/DashboardPage.scss | 6 ++++ sass/patternfly.scss | 9 ++++-- sass/variables.scss | 10 ++++-- src/ui/contents/list-card/ContentListCard.js | 32 +++++++++---------- .../status-card/ContentsStatusCard.js | 14 ++++---- src/ui/dashboard/Languages.js | 2 +- src/ui/dashboard/PageStatus.js | 26 +++++++-------- src/ui/dashboard/PagesList.js | 2 +- src/ui/dashboard/UserManagement.js | 2 +- src/ui/dashboard/UxPatterns.js | 2 +- 10 files changed, 60 insertions(+), 45 deletions(-) diff --git a/sass/dashboard/DashboardPage.scss b/sass/dashboard/DashboardPage.scss index ee17f19f2..a3807b14f 100644 --- a/sass/dashboard/DashboardPage.scss +++ b/sass/dashboard/DashboardPage.scss @@ -27,4 +27,10 @@ padding-right: 8px; } } + + a { + font-size: 16px; + color: $color-brand-primary; + font-weight: 400; + } } \ No newline at end of file diff --git a/sass/patternfly.scss b/sass/patternfly.scss index 9e823d771..3a17a832b 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -143,12 +143,17 @@ $fa-square-o: '\f096'; } .btn-link { - color: $color-brand-primary; font-size: 16px; - .fa { + &.primary { color: $color-brand-primary; } + + &.secondary { + color: $color-content-3; + } + + } .CodeMirror { diff --git a/sass/variables.scss b/sass/variables.scss index 4eb5c067c..1a2aa80d4 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -21,10 +21,14 @@ $color-brand-secondary: #0041cc; $color-neutral-grey: #e4e7ec; $color-text-tertiary: #637083; $color-dark-blue: #e5eeff; +$color-border-blue: #40a6da; +$color-dim-grey: #72767b; +$color-border-grey: #e4e7ec; +$color-content-3: #344051; +$color-content-07: #ced2da; $spacing-2: 2px; $spacing-4: 4px; $spacing-8: 8px; -$color-border-blue: #40a6da; -$color-dim-grey: #72767b; -$color-border-grey: #e4e7ec; + +$radius-xxs: 4px; \ No newline at end of file diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index dde544ad0..9e28142ab 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -144,28 +144,28 @@ class ContentListCard extends Component { ], userPermissions, ) && ( - - {contentTypes.map(contentType => ( - + + {contentTypes.map(contentType => ( + onClickAddContent({ typeCode: contentType.code, typeDescription: contentType.name, }) } - > - {contentType.name} - + > + {contentType.name} + ))} - - ); + + ); const messages = Object.keys(paginatorMessages).reduce( (acc, curr) => ({ diff --git a/src/ui/contents/status-card/ContentsStatusCard.js b/src/ui/contents/status-card/ContentsStatusCard.js index 67e05fc87..1771270d1 100644 --- a/src/ui/contents/status-card/ContentsStatusCard.js +++ b/src/ui/contents/status-card/ContentsStatusCard.js @@ -54,7 +54,9 @@ class ContentsStatusCard extends Component { contentsStatus, onClickContentList, } = this.props; - const { unpublished, ready, published, total, latestModificationDate } = + const { + unpublished, ready, published, total, latestModificationDate, + } = contentsStatus; const msgs = { @@ -255,12 +257,10 @@ class ContentsStatusCard extends Component { userPermissions, ) && ( - - - + )}

diff --git a/src/ui/dashboard/Languages.js b/src/ui/dashboard/Languages.js index 5c9ca2a2f..cbce6234e 100644 --- a/src/ui/dashboard/Languages.js +++ b/src/ui/dashboard/Languages.js @@ -35,7 +35,7 @@ class Languages extends Component {
- a.id === msgs.published || b.id === msgs.published - ? a - b - : b - a, + (a.id === msgs.published || b.id === msgs.published + ? a - b + : b - a), groups: [[msgs.published, msgs.draft, msgs.unpublished]], colors: { [msgs.published]: '#39AC73', diff --git a/src/ui/dashboard/PagesList.js b/src/ui/dashboard/PagesList.js index 22ba1a70f..5ea65a868 100644 --- a/src/ui/dashboard/PagesList.js +++ b/src/ui/dashboard/PagesList.js @@ -127,7 +127,7 @@ class PagesList extends Component { From 3552e89f716e9f1c1521daa6cc98caf25f36f29a Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Wed, 4 Dec 2024 10:50:15 +0100 Subject: [PATCH 032/211] fix: Dashboard ContentListCard margin removed --- sass/contents/ContentListCard.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/sass/contents/ContentListCard.scss b/sass/contents/ContentListCard.scss index 3597f0eef..6ab286bd6 100644 --- a/sass/contents/ContentListCard.scss +++ b/sass/contents/ContentListCard.scss @@ -29,10 +29,6 @@ overflow-x: auto; } } - - &__table { - margin: 2em 0 0 0; - } } .ContentListCardTable__wrapper { From 7a495e1a821cc76ed3c59b3e64b35ac9d66e108a Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Wed, 4 Dec 2024 10:51:09 +0100 Subject: [PATCH 033/211] fix: Dashboard ContentListCard margin removed --- sass/contents/ContentListCard.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/sass/contents/ContentListCard.scss b/sass/contents/ContentListCard.scss index 6ab286bd6..0e737d87c 100644 --- a/sass/contents/ContentListCard.scss +++ b/sass/contents/ContentListCard.scss @@ -38,6 +38,7 @@ .table-bordered { border: $color-border-grey solid 1px; + margin: 0; } .table-header { From 56c1b801f34708e27351183338515b4b5cc313ea Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Wed, 4 Dec 2024 10:53:34 +0100 Subject: [PATCH 034/211] chore: Dashboard ContentListCard and PagesList borders removed --- sass/contents/ContentListCard.scss | 1 - sass/dashboard/PagesList.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/sass/contents/ContentListCard.scss b/sass/contents/ContentListCard.scss index 0e737d87c..d28a7cae1 100644 --- a/sass/contents/ContentListCard.scss +++ b/sass/contents/ContentListCard.scss @@ -4,7 +4,6 @@ min-height: 275px; margin: 0 -10px; padding: 0 20px 20px; - border: $color-border-grey solid 1px; @media (max-width: 1499px) { height: auto; diff --git a/sass/dashboard/PagesList.scss b/sass/dashboard/PagesList.scss index be5cc79a2..6c83438df 100644 --- a/sass/dashboard/PagesList.scss +++ b/sass/dashboard/PagesList.scss @@ -5,7 +5,6 @@ margin: 0 -10px; margin-bottom: 20px; padding: 0 20px 20px 20px; - border: $color-border-grey solid 1px; @media (max-width: 1499px) { height: auto; From 0f5d7f9aaadd60d7e74a60262bd3c69277840343 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Wed, 4 Dec 2024 15:37:08 +0100 Subject: [PATCH 035/211] status badge and 1 line table --- sass/contents/ContentListCard.scss | 12 +-- sass/dashboard/PagesList.scss | 10 ++- sass/pages/common/StatusBadge.scss | 20 ++++- sass/patternfly.scss | 19 ++--- src/ui/contents/list-card/ContentListCard.js | 87 +++++++------------- src/ui/dashboard/PageStatus.js | 33 ++------ src/ui/pages/common/StatusBadge.js | 2 +- 7 files changed, 82 insertions(+), 101 deletions(-) diff --git a/sass/contents/ContentListCard.scss b/sass/contents/ContentListCard.scss index 3597f0eef..a56c7ea05 100644 --- a/sass/contents/ContentListCard.scss +++ b/sass/contents/ContentListCard.scss @@ -3,8 +3,7 @@ position: relative; min-height: 275px; margin: 0 -10px; - padding: 0 20px 20px; - border: $color-border-grey solid 1px; + padding: 0 0px 0px; @media (max-width: 1499px) { height: auto; @@ -31,7 +30,7 @@ } &__table { - margin: 2em 0 0 0; + margin: 0 0 0 0; } } @@ -69,7 +68,10 @@ border: 1px solid $color-border-grey; border-left: 0; border-right: 0; - + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 10px; } .colForResize { @@ -83,4 +85,4 @@ font-size: 14px; padding: 16px; } -} \ No newline at end of file +} diff --git a/sass/dashboard/PagesList.scss b/sass/dashboard/PagesList.scss index be5cc79a2..04b0cbdef 100644 --- a/sass/dashboard/PagesList.scss +++ b/sass/dashboard/PagesList.scss @@ -4,8 +4,7 @@ height: auto; margin: 0 -10px; margin-bottom: 20px; - padding: 0 20px 20px 20px; - border: $color-border-grey solid 1px; + padding: 0px 0px 20px 0px; @media (max-width: 1499px) { height: auto; @@ -68,7 +67,10 @@ border: 1px solid $color-border-grey; border-left: 0; border-right: 0; - + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 10px; } .colForResize { @@ -82,4 +84,4 @@ font-size: 14px; padding: 16px; } -} \ No newline at end of file +} diff --git a/sass/pages/common/StatusBadge.scss b/sass/pages/common/StatusBadge.scss index 9c2193e76..180f340fb 100644 --- a/sass/pages/common/StatusBadge.scss +++ b/sass/pages/common/StatusBadge.scss @@ -13,15 +13,33 @@ .StatusBadge { align-items: center; gap: $spacing-4; - padding: 4px 12px 4px 12px; + padding: 2px 10px 2px 10px; border-radius: 30px; font-size: 12px; + width: fit-content; + text-transform: capitalize; } .StatusBadge-container--published { background-color: $color-green-light-new; + color: $color-published-600; } .StatusBadge-container--unpublished { } .StatusBadge-container--draft { + background-color: $color-draft-200; + color: $color-draft-500; +} + +.StatusBadge-circle { + width: 6.67px; + height: 6.67px; + border-radius: 50%; +} + +.StatusBadge-circle--published { + background-color: $color-published-600; +} +.StatusBadge-circle--draft { + background-color: $color-draft-500; } diff --git a/sass/patternfly.scss b/sass/patternfly.scss index 3a17a832b..416ad30c9 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -55,7 +55,7 @@ $color-tour-primary: #00a0df; $color-border-gray: #bbbbbb; $color-sidebar-dark-bg: #393f44; $color-dragitem-bg: #292e34; -$color-transparent-black: rgba(0, 0, 0, .1); +$color-transparent-black: rgba(0, 0, 0, 0.1); $color-grey-background: #f5f5f5; $color-grey-border: #dadada; $color-light-grey-border: #e3e3e3; @@ -65,12 +65,13 @@ $color-extra-dark-grey: #1d1d1d; $color-grey-description: #72767b; $color-dump-table-code: #f4f5f7; -$color-published-new: #39ac73; -$color-draft-new: #ffb21a; -$color-unpublished-new: #637083; - +$color-published-600: #39ac73; $color-green-new: #39c67b; $color-green-light-new: #ebf9f2; +$color-draft-500: #ffb21a; +$color-draft-400: #fbd26a; +$color-draft-200: #faf1d9; +$color-unpublished-new: #637083; //FontAwesome icons $fa-check: '\f00c'; @@ -152,8 +153,6 @@ $fa-square-o: '\f096'; &.secondary { color: $color-content-3; } - - } .CodeMirror { @@ -161,7 +160,6 @@ $fa-square-o: '\f096'; } .has-error { - .CodeMirror, &.CodeMirror { border: 1px solid $color-pf-red; @@ -174,7 +172,7 @@ $fa-square-o: '\f096'; margin-left: 0; } -.no-gutter>[class*="col-"] { +.no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0; } @@ -218,5 +216,4 @@ $fa-square-o: '\f096'; box-shadow: 0 1px 2px rgba(28, 39, 49, 0.08); // sass-lint:disable-line leading-zero } - -// sass-lint:enable class-name-format \ No newline at end of file +// sass-lint:enable class-name-format diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index 9e28142ab..eaedfe8e7 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -18,6 +18,7 @@ import ViewPermissionNoticeOverlay from 'ui/dashboard/ViewPermissionNoticeOverla import paginatorMessages from 'ui/common/paginatorMessages'; import Icon from 'ui/common/Icon'; +import StatusBadge from 'ui/pages/common/StatusBadge'; class ContentListCard extends Component { constructor(props) { @@ -27,18 +28,9 @@ class ContentListCard extends Component { } componentDidMount() { - const { - onDidMount, columnOrder, onSetColumnOrder, userPermissions, - } = - this.props; + const { onDidMount, columnOrder, onSetColumnOrder, userPermissions } = this.props; if (!columnOrder.length) { - onSetColumnOrder([ - 'description', - 'lastEditor', - 'typeDescription', - 'status', - 'lastModified', - ]); + onSetColumnOrder(['description', 'typeDescription', 'status', 'lastModified']); } if (hasAccess(ADMINISTRATION_AREA_PERMISSION, userPermissions)) { onDidMount(); @@ -52,29 +44,24 @@ class ContentListCard extends Component { description: { Header: , attributes: { - style: { width: '35%' }, + style: { width: '25%' }, }, cellAttributes: { className: 'SingleContentCurrentVersion__description', }, }, - lastEditor: { - Header: , - attributes: { - style: { width: '13%' }, - }, - }, + typeDescription: { Header: , attributes: { - style: { width: '15%' }, + style: { width: '25%' }, }, }, status: { Header: , attributes: { className: 'text-center', - style: { width: '12%' }, + style: { width: '25%' }, }, Cell: (cellInfo) => { const { @@ -105,7 +92,7 @@ class ContentListCard extends Component { }, }; - return columnOrder.map(column => ({ + return columnOrder.map((column) => ({ ...columnDefs[column], accessor: column, })); @@ -137,34 +124,30 @@ class ContentListCard extends Component { perPageOptions: [5, 10, 15], }; const renderAddContentButton = hasAccess( - [ - SUPERUSER_PERMISSION, - CRUD_CONTENTS_PERMISSION, - VALIDATE_CONTENTS_PERMISSION, - ], + [SUPERUSER_PERMISSION, CRUD_CONTENTS_PERMISSION, VALIDATE_CONTENTS_PERMISSION], userPermissions, ) && ( - - {contentTypes.map(contentType => ( - - onClickAddContent({ - typeCode: contentType.code, - typeDescription: contentType.name, - }) - } - > - {contentType.name} - - ))} - + + {contentTypes.map((contentType) => ( + + onClickAddContent({ + typeCode: contentType.code, + typeDescription: contentType.name, + }) + } + > + {contentType.name} + + ))} + ); const messages = Object.keys(paginatorMessages).reduce( @@ -238,14 +221,8 @@ ContentListCard.defaultProps = { page: 1, totalItems: 0, }, - onSetColumnOrder: () => { }, - columnOrder: [ - 'description', - 'lastEditor', - 'typeDescription', - 'status', - 'lastModified', - ], + onSetColumnOrder: () => {}, + columnOrder: ['description', 'typeDescription', 'status', 'lastModified'], }; export default injectIntl(ContentListCard); diff --git a/src/ui/dashboard/PageStatus.js b/src/ui/dashboard/PageStatus.js index 55d14448a..d3d50b5e3 100644 --- a/src/ui/dashboard/PageStatus.js +++ b/src/ui/dashboard/PageStatus.js @@ -3,17 +3,9 @@ import PropTypes from 'prop-types'; import { StackedBarChart } from 'patternfly-react'; import { hasAccess } from '@entando/utils'; import { Link } from 'react-router-dom'; -import { - defineMessages, - FormattedMessage, - injectIntl, - intlShape, -} from 'react-intl'; +import { defineMessages, FormattedMessage, injectIntl, intlShape } from 'react-intl'; import { ROUTE_PAGE_TREE } from 'app-init/router'; -import { - SUPERUSER_PERMISSION, - MANAGE_PAGES_PERMISSION, -} from 'state/permissions/const'; +import { SUPERUSER_PERMISSION, MANAGE_PAGES_PERMISSION } from 'state/permissions/const'; import ViewPermissionNoticeOverlay from 'ui/dashboard/ViewPermissionNoticeOverlay'; const pageStatusMsgs = defineMessages({ @@ -42,9 +34,7 @@ class PageStatus extends Component { language, userPermissions, intl, - pageStatus: { - draft, unpublished, published, lastUpdate, - }, + pageStatus: { draft, unpublished, published, lastUpdate }, } = this.props; const msgs = Object.keys(pageStatusMsgs).reduce( @@ -78,13 +68,10 @@ class PageStatus extends Component { [SUPERUSER_PERMISSION, MANAGE_PAGES_PERMISSION], userPermissions, ) && ( - - - - )} + + + + )}

- (a.id === msgs.published || b.id === msgs.published - ? a - b - : b - a), + a.id === msgs.published || b.id === msgs.published ? a - b : b - a, groups: [[msgs.published, msgs.draft, msgs.unpublished]], colors: { [msgs.published]: '#39AC73', @@ -113,7 +98,7 @@ class PageStatus extends Component { tooltip={{ tooltip: { show: true }, format: { - value: v => + value: (v) => `${v} ${intl.formatMessage({ id: `app.page${v !== 1 ? 's' : ''}`, defaultMessage: v !== 1 ? 'Pages' : 'Page', diff --git a/src/ui/pages/common/StatusBadge.js b/src/ui/pages/common/StatusBadge.js index b0b4b9e8f..14b9e60d5 100644 --- a/src/ui/pages/common/StatusBadge.js +++ b/src/ui/pages/common/StatusBadge.js @@ -15,7 +15,7 @@ const StatusBadge = ({ intl, status }) => { }, }); const iconTitle = intl.formatMessage(msgs.pageStatus, {}); - const classNameAr = ['fa fa-circle StatusBadge', `StatusBadge--${status}`]; + const classNameAr = ['StatusBadge-circle', `StatusBadge-circle--${status}`]; return (
Date: Wed, 4 Dec 2024 16:15:36 +0100 Subject: [PATCH 036/211] add DropdownButton component --- sass/common/DropdownButton.scss | 11 ++++++++ sass/index.scss | 1 + sass/patternfly.scss | 2 +- .../common/DropdownButton/DropdownButton.js | 27 +++++++++++++++++++ .../pages/common/DropdownButton/MenuItem.js | 20 ++++++++++++++ 5 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 sass/common/DropdownButton.scss create mode 100644 src/ui/pages/common/DropdownButton/DropdownButton.js create mode 100644 src/ui/pages/common/DropdownButton/MenuItem.js diff --git a/sass/common/DropdownButton.scss b/sass/common/DropdownButton.scss new file mode 100644 index 000000000..790d5c785 --- /dev/null +++ b/sass/common/DropdownButton.scss @@ -0,0 +1,11 @@ +.Dropdown-btn { + width: 100%; + border-radius: $radius-xxs; + border: 1px solid $color-content-07; + color: $color-text-tertiary; + background-color: transparent; + box-shadow: none; + display: flex; + justify-content: space-between; + align-items: center; +} \ No newline at end of file diff --git a/sass/index.scss b/sass/index.scss index 62ca1f330..c8ad8858d 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -89,6 +89,7 @@ @import 'common/CMSPageTitle'; @import 'common/cross-browser'; @import 'common/Icon'; +@import 'common/DropdownButton'; @import 'common/SectionTitle'; @import 'common/Search'; @import 'common/CollapsibleSectionTitle'; diff --git a/sass/patternfly.scss b/sass/patternfly.scss index 3a17a832b..a265fffb7 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -124,7 +124,7 @@ $fa-square-o: '\f096'; .btn { padding: 2px 12px; - border: 0 !important; // sass-lint:disable-line no-important + // border: 0 !important; // sass-lint:disable-line no-important background-image: none; } diff --git a/src/ui/pages/common/DropdownButton/DropdownButton.js b/src/ui/pages/common/DropdownButton/DropdownButton.js new file mode 100644 index 000000000..176214f4d --- /dev/null +++ b/src/ui/pages/common/DropdownButton/DropdownButton.js @@ -0,0 +1,27 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { intlShape } from 'react-intl'; +import { DropdownButton as PatternflyDropButton } from 'patternfly-react'; +import MenuItem from './MenuItem'; + +const DropdownButton = ({ + options, intl, onSelect, ...rest +}) => ( + + {options.map(option => ( + ))} + ); + +DropdownButton.propTypes = { + options: PropTypes.arrayOf([]).isRequired, + intl: intlShape.isRequired, + onSelect: PropTypes.func.isRequired, +}; + +export default DropdownButton; diff --git a/src/ui/pages/common/DropdownButton/MenuItem.js b/src/ui/pages/common/DropdownButton/MenuItem.js new file mode 100644 index 000000000..58a409dcd --- /dev/null +++ b/src/ui/pages/common/DropdownButton/MenuItem.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { MenuItem as PatternflyMenuItem } from 'patternfly-react'; +import PropTypes from 'prop-types'; + +const MenuItem = ({ label, ...rest }) => ( + + {label} + +); + +MenuItem.propTypes = { + label: PropTypes.string, +}; + +MenuItem.defaultProps = { + label: 'search', +}; + + +export default MenuItem; From d8d768509178bcc43067e2e2bc2b404070ea80c0 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Wed, 4 Dec 2024 17:06:08 +0100 Subject: [PATCH 037/211] move dropdownButton --- .../DropdownButton => common/dropdown-button}/DropdownButton.js | 0 .../common/DropdownButton => common/dropdown-button}/MenuItem.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/ui/{pages/common/DropdownButton => common/dropdown-button}/DropdownButton.js (100%) rename src/ui/{pages/common/DropdownButton => common/dropdown-button}/MenuItem.js (100%) diff --git a/src/ui/pages/common/DropdownButton/DropdownButton.js b/src/ui/common/dropdown-button/DropdownButton.js similarity index 100% rename from src/ui/pages/common/DropdownButton/DropdownButton.js rename to src/ui/common/dropdown-button/DropdownButton.js diff --git a/src/ui/pages/common/DropdownButton/MenuItem.js b/src/ui/common/dropdown-button/MenuItem.js similarity index 100% rename from src/ui/pages/common/DropdownButton/MenuItem.js rename to src/ui/common/dropdown-button/MenuItem.js From a06da35d8ef9f3d11944deb82954ab85b08c642c Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Thu, 5 Dec 2024 09:28:42 +0100 Subject: [PATCH 038/211] refactor: PageListSearchTable style updated --- sass/pages/list/PageListSearchTable.scss | 47 ++++++++++++++++++------ src/ui/pages/list/PageListSearchTable.js | 16 ++++---- 2 files changed, 43 insertions(+), 20 deletions(-) diff --git a/sass/pages/list/PageListSearchTable.scss b/sass/pages/list/PageListSearchTable.scss index c8dca5b32..4f4efdd82 100644 --- a/sass/pages/list/PageListSearchTable.scss +++ b/sass/pages/list/PageListSearchTable.scss @@ -1,21 +1,46 @@ .PageListSearchTable { - &__table { - margin: 2em 0 0 0; + .table-bordered { + border: $color-border-grey solid 1px; + margin: 0; } - &__th-lg { - width: 45%; - } + .table-header { + background-color: #fff; + + td { + border-left: 0; + border-right: 0; + } - &__th-md { - width: 25%; + .columnResizer { + border-bottom: 1px solid $color-border-grey; + } + + th { + padding: 16px; + border-left: 0; + border-right: 0; + border-color: $color-border-grey; + } } - &__th-sm { - width: 10%; + .table-row { + td { + border: 1px solid $color-border-grey; + border-left: 0; + border-right: 0; + + } + + .colForResize { + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-bottom: 1px solid $color-border-grey; + } } - &__th-xs { - width: 5%; + .table-cell { + font-size: 14px; + padding: 16px; } } diff --git a/src/ui/pages/list/PageListSearchTable.js b/src/ui/pages/list/PageListSearchTable.js index 1af4208d9..905f9d8ba 100644 --- a/src/ui/pages/list/PageListSearchTable.js +++ b/src/ui/pages/list/PageListSearchTable.js @@ -60,7 +60,6 @@ class PageListSearchTable extends Component { page, pageSize, intl, - striped, selectedPage, rowAction, onRowClick, @@ -102,9 +101,10 @@ class PageListSearchTable extends Component { onColumnReorder={onSetColumnOrderPageSearch} rowAttributes={getRowAttributes} classNames={{ - table: `PageListSearchTable__table ${striped ? 'table-striped' : ''}`, - row: 'PageListSearchTable__row', - cell: 'PageListSearchRow__td', + table: 'PageListSearchTable__table table-bordered', + headerGroup: 'table-header', + row: 'table-row', + cell: 'table-cell', }} /> {}, + onWillMount: () => { }, loading: false, searchPages: [], selectedPage: {}, className: '', - striped: true, - onRowClick: () => {}, - onSetColumnOrderPageSearch: () => {}, + onRowClick: () => { }, + onSetColumnOrderPageSearch: () => { }, pageSearchColumnOrder: ['code', 'fullTitles'], rowAction: null, }; From 569574144e04451435b467c7733e88f7103ec35c Mon Sep 17 00:00:00 2001 From: Virgilio Date: Thu, 5 Dec 2024 11:21:41 +0100 Subject: [PATCH 039/211] Table scroll and resize some icons --- sass/contents/ContentListCard.scss | 2 ++ sass/dashboard/PagesList.scss | 11 ++++++++++- sass/pages/common/StatusBadge.scss | 5 +++++ sass/patternfly.scss | 2 ++ src/ui/contents/list-card/ContentListCard.js | 15 ++++++--------- src/ui/dashboard/Languages.js | 2 +- src/ui/dashboard/PagesList.js | 8 +++----- src/ui/dashboard/PagesListContainer.js | 4 ++-- src/ui/dashboard/UserManagement.js | 4 ++-- src/ui/dashboard/UxPatterns.js | 2 +- 10 files changed, 34 insertions(+), 21 deletions(-) diff --git a/sass/contents/ContentListCard.scss b/sass/contents/ContentListCard.scss index c19d81580..300d9558c 100644 --- a/sass/contents/ContentListCard.scss +++ b/sass/contents/ContentListCard.scss @@ -37,6 +37,8 @@ .ContentListCardTable__wrapper { width: 100%; overflow-x: auto; + overflow-y: scroll; + max-height: 390px; } .table-bordered { diff --git a/sass/dashboard/PagesList.scss b/sass/dashboard/PagesList.scss index 04b0cbdef..27cc51ba0 100644 --- a/sass/dashboard/PagesList.scss +++ b/sass/dashboard/PagesList.scss @@ -16,7 +16,14 @@ .PagesList__wrapper { width: 100%; - overflow-x: auto; + overflow-x: hidden; + height: 390px; + border-bottom: 1px solid $color-border-grey; + border-top: 1px solid $color-border-grey; + + .tbody{ + overflow-y: scroll; + } } h2 { @@ -44,6 +51,8 @@ .table-header { background-color: #fff; + border-right: 1px solid $color-border-grey; + td { border-left: 0; diff --git a/sass/pages/common/StatusBadge.scss b/sass/pages/common/StatusBadge.scss index 180f340fb..f033c1ca0 100644 --- a/sass/pages/common/StatusBadge.scss +++ b/sass/pages/common/StatusBadge.scss @@ -25,6 +25,8 @@ color: $color-published-600; } .StatusBadge-container--unpublished { + background-color: $color-unpublished-light; + color: $color-unpublished-new; } .StatusBadge-container--draft { background-color: $color-draft-200; @@ -43,3 +45,6 @@ .StatusBadge-circle--draft { background-color: $color-draft-500; } +.StatusBadge-circle--unpublished { + background-color: $color-unpublished-new; +} diff --git a/sass/patternfly.scss b/sass/patternfly.scss index 416ad30c9..a80847106 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -72,6 +72,8 @@ $color-draft-500: #ffb21a; $color-draft-400: #fbd26a; $color-draft-200: #faf1d9; $color-unpublished-new: #637083; +$color-unpublished-light: #d8d8d8; + //FontAwesome icons $fa-check: '\f00c'; diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index eaedfe8e7..99ee81b79 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -44,7 +44,7 @@ class ContentListCard extends Component { description: { Header: , attributes: { - style: { width: '25%' }, + style: { width: '35%' }, }, cellAttributes: { className: 'SingleContentCurrentVersion__description', @@ -54,13 +54,13 @@ class ContentListCard extends Component { typeDescription: { Header: , attributes: { - style: { width: '25%' }, + style: { width: '15%' }, }, }, status: { Header: , attributes: { - className: 'text-center', + style: { width: '25%' }, }, Cell: (cellInfo) => { @@ -73,10 +73,7 @@ class ContentListCard extends Component { intl, ); return ( - + ); }, cellAttributes: { @@ -182,14 +179,14 @@ class ContentListCard extends Component { }} />
- + /> */}
diff --git a/src/ui/dashboard/Languages.js b/src/ui/dashboard/Languages.js index cbce6234e..5147f0e1a 100644 --- a/src/ui/dashboard/Languages.js +++ b/src/ui/dashboard/Languages.js @@ -31,7 +31,7 @@ class Languages extends Component { - +
- + /> */}
); diff --git a/src/ui/dashboard/PagesListContainer.js b/src/ui/dashboard/PagesListContainer.js index 5802dc17c..fa6250c12 100644 --- a/src/ui/dashboard/PagesListContainer.js +++ b/src/ui/dashboard/PagesListContainer.js @@ -14,14 +14,14 @@ import { withPermissionValues } from 'ui/auth/withPermissions'; const namespace = 'dashboardPages'; export const mapDispatchToProps = dispatch => ({ - onWillMount: (page = 1, pageSize = 5) => { + onWillMount: () => { const queryString = convertToQueryString({ sorting: { attribute: 'lastModified', direction: 'DESC', }, }); - dispatch(fetchDashboardPages({ page, pageSize }, queryString, namespace)); + dispatch(fetchDashboardPages({ page: 1, pageSize: 500 }, queryString, namespace)); }, onSetColumnOrder: columnOrder => dispatch(setColumnOrder(columnOrder, 'dashboardPageList')), }); diff --git a/src/ui/dashboard/UserManagement.js b/src/ui/dashboard/UserManagement.js index 6376c80ec..a23159946 100644 --- a/src/ui/dashboard/UserManagement.js +++ b/src/ui/dashboard/UserManagement.js @@ -48,7 +48,7 @@ class UserManagement extends Component { - + - + {users}  diff --git a/src/ui/dashboard/UxPatterns.js b/src/ui/dashboard/UxPatterns.js index 80e0878ec..5ee4cda42 100644 --- a/src/ui/dashboard/UxPatterns.js +++ b/src/ui/dashboard/UxPatterns.js @@ -34,7 +34,7 @@ class UxPatterns extends Component { - + {isSuperuser && ( - - - - - - - - + ); }; diff --git a/src/ui/pages/list/PageTreePage.js b/src/ui/pages/list/PageTreePage.js index 6204b2d07..8eef50a21 100644 --- a/src/ui/pages/list/PageTreePage.js +++ b/src/ui/pages/list/PageTreePage.js @@ -13,6 +13,7 @@ import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; import AppTourContainer from 'ui/app-tour/AppTourContainer'; import { ROUTE_PAGE_ADD } from 'app-init/router'; import { withPermissionValues } from 'ui/auth/withPermissions'; +import Icon from 'ui/common/Icon'; class PageTreePage extends Component { componentWillMount() { @@ -57,8 +58,19 @@ class PageTreePage extends Component { - + + {this.props.search && ( @@ -116,7 +128,7 @@ PageTreePage.propTypes = { PageTreePage.defaultProps = { search: null, loading: false, - onNextStep: () => {}, + onNextStep: () => { }, searchPageCodeToken: '', }; From 2e0c4155de48095631675090fe8afee6c7200340 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 5 Dec 2024 13:58:51 +0100 Subject: [PATCH 043/211] hide PageSearchForm search button --- src/ui/pages/list/PageSearchForm.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/pages/list/PageSearchForm.js b/src/ui/pages/list/PageSearchForm.js index 30cbd38f2..1595acc1d 100644 --- a/src/ui/pages/list/PageSearchForm.js +++ b/src/ui/pages/list/PageSearchForm.js @@ -56,13 +56,13 @@ export const PageSearchFormBody = ({ intl, handleSubmit, onSubmit }) => { name="pageCodeToken" placeholder={intl.formatMessage(msgs[searchType])} /> - + */} From 4b5ba0a58190b722d771bafe495914c374fc9cb9 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Thu, 5 Dec 2024 15:39:59 +0100 Subject: [PATCH 044/211] refactor: PageTemplateList updated --- .../list/PageTemplateListTable.scss | 65 ++++++++++- src/state/page-templates/helpers.js | 7 +- .../list/PageTemplateListTable.js | 102 +++--------------- .../list/PageTemplatePreview.js | 57 ++++++++++ src/ui/pages/config/PageConfigGrid.js | 2 +- 5 files changed, 142 insertions(+), 91 deletions(-) create mode 100644 src/ui/page-templates/list/PageTemplatePreview.js diff --git a/sass/page-templates/list/PageTemplateListTable.scss b/sass/page-templates/list/PageTemplateListTable.scss index 188ae5459..a85728a62 100644 --- a/sass/page-templates/list/PageTemplateListTable.scss +++ b/sass/page-templates/list/PageTemplateListTable.scss @@ -2,4 +2,67 @@ &__table { margin-bottom: 0; } -} + + .Page_Template_List_Table { + display: flex; + gap: 8px; + flex-wrap: wrap; + } + + .Page_Template_Preview_Container { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + } + + .Page_Template_Preview_Content { + + width: 187px; + height: 120px; + background: rgba(240, 246, 255, 1); + border: 1px solid rgba(204, 224, 255, 1); + position: relative; + + } + + .Page_Config_Grid_Container { + padding: 10px 40px; + height: 100%; + + .PageConfigGridCol--container { + display: flex; + flex-direction: column; + gap: 2px; + height: 100%; + min-height: 0 !important; + } + + .PageConfigGridRow { + gap: 2px; + } + + .PageConfigGrid { + height: 100%; + border-radius: 4px; + background-color: #fff; + padding: 4px; + } + + .PageConfigGridCol--frame { + gap: 2px; + min-height: 0 !important; + } + + .EmptyFrame { + border-style: solid; + background-color: #bbb; + border-radius: 4px; + padding: 0; + } + + .EmptyFrame__frame-name { + display: none; + } + } +} \ No newline at end of file diff --git a/src/state/page-templates/helpers.js b/src/state/page-templates/helpers.js index 45cc1d82a..1dfcff445 100644 --- a/src/state/page-templates/helpers.js +++ b/src/state/page-templates/helpers.js @@ -222,7 +222,12 @@ const fixMissingSketch = (frames) => { }; export const getCellMap = (pageTemplate) => { - if (!pageTemplate || !pageTemplate.configuration || !pageTemplate.configuration.frames) { + if ( + !pageTemplate || + !pageTemplate.configuration || + !pageTemplate.configuration.frames || + !pageTemplate.configuration.frames.length + ) { return null; } const errors = validatePageTemplate(pageTemplate); diff --git a/src/ui/page-templates/list/PageTemplateListTable.js b/src/ui/page-templates/list/PageTemplateListTable.js index 3cc14c209..12d6bac05 100644 --- a/src/ui/page-templates/list/PageTemplateListTable.js +++ b/src/ui/page-templates/list/PageTemplateListTable.js @@ -1,14 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Col, Paginator, Spinner } from 'patternfly-react'; -import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; -import { DataTable } from '@entando/datatable'; - -import PageTemplateListMenuActions from 'ui/page-templates/list/PageTemplateListMenuActions'; +import { Col, Spinner } from 'patternfly-react'; +import { injectIntl } from 'react-intl'; import PageTemplateDeleteModalContainer from 'ui/page-templates/common/PageTemplateDeleteModalContainer'; -import paginatorMessages from 'ui/paginatorMessages'; +import PageTemplatePreview from './PageTemplatePreview'; -const perPageOptions = [5, 10, 15, 25, 50]; class PageTemplateListTable extends Component { constructor(props) { super(props); @@ -18,31 +14,10 @@ class PageTemplateListTable extends Component { } componentDidMount() { - const { onWillMount, columnOrder, onSetColumnOrder } = this.props; - if (!columnOrder.length) { - onSetColumnOrder(['code', 'descr']); - } + const { onWillMount } = this.props; onWillMount(); } - getColumnDefs() { - const { columnOrder } = this.props; - - const columnDefs = { - code: { - Header: , - }, - descr: { - Header: , - }, - }; - - return columnOrder.map(column => ({ - ...columnDefs[column], - accessor: column, - })); - } - changePage(page) { this.props.onWillMount({ page, pageSize: this.props.pageSize }); } @@ -52,60 +27,18 @@ class PageTemplateListTable extends Component { } renderTable() { - const { - page, - pageSize, - intl, - pageTemplates, - removePageTemplate, - onSetColumnOrder, - } = this.props; - - const columns = this.getColumnDefs() || []; - - const pagination = { page, perPage: pageSize, perPageOptions }; - - const messages = Object.keys(paginatorMessages).reduce((acc, curr) => ( - { ...acc, [curr]: intl.formatMessage(paginatorMessages[curr]) } - ), {}); - - const rowAction = { - Header: , - attributes: { - className: 'text-center', - style: { width: '10%' }, - }, - cellAttributes: { - className: 'text-center', - }, - Cell: ({ values }) => ( - removePageTemplate(values.code)} - /> - ), - }; + const { pageTemplates, removePageTemplate } = this.props; return ( - - +
+ {pageTemplates.map(template => ( + ))} +
); } @@ -123,24 +56,17 @@ class PageTemplateListTable extends Component { } PageTemplateListTable.propTypes = { - intl: intlShape.isRequired, onWillMount: PropTypes.func, - onSetColumnOrder: PropTypes.func, loading: PropTypes.bool, pageTemplates: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string.isRequired, })), - columnOrder: PropTypes.arrayOf(PropTypes.string), - page: PropTypes.number.isRequired, pageSize: PropTypes.number.isRequired, - totalItems: PropTypes.number.isRequired, removePageTemplate: PropTypes.func.isRequired, }; PageTemplateListTable.defaultProps = { - onWillMount: () => {}, - onSetColumnOrder: () => {}, - columnOrder: [], + onWillMount: () => { }, loading: false, pageTemplates: [], }; diff --git a/src/ui/page-templates/list/PageTemplatePreview.js b/src/ui/page-templates/list/PageTemplatePreview.js new file mode 100644 index 000000000..401c7e47a --- /dev/null +++ b/src/ui/page-templates/list/PageTemplatePreview.js @@ -0,0 +1,57 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import PageTemplateListMenuActions from 'ui/page-templates/list/PageTemplateListMenuActions'; +import PageConfigGrid from 'ui/pages/config/PageConfigGrid'; +import { getCellMap } from 'state/page-templates/helpers'; + +const PageTemplatePreview = ({ item }) => { + const { code, descr, removePageTemplate } = item; + const cellMap = getCellMap(item); + + return ( +
+
+
+ removePageTemplate(code)} + /> +
+
+ +
+
+ {descr} +
+ ); +}; + +PageTemplatePreview.propTypes = +{ + item: PropTypes.shape({ + code: PropTypes.string.isRequired, + descr: PropTypes.string.isRequired, + mainFrame: PropTypes.number.isRequired, + pluginCode: PropTypes.string, + template: PropTypes.string.isRequired, + extraProperties: PropTypes.string, + configuration: PropTypes.shape({ + frames: PropTypes.shape({ + pos: PropTypes.string.isRequired, + descr: PropTypes.string.isRequired, + defaultWidget: PropTypes.shape({ + code: PropTypes.string.isRequired, + }).isRequired, + sketch: PropTypes.shape({ + x1: PropTypes.number.isRequired, + x2: PropTypes.number.isRequired, + y1: PropTypes.number.isRequired, + y2: PropTypes.number.isRequired, + }), + }), + }).isRequired, + removePageTemplate: PropTypes.func.isRequired, + }), +}.isRequired; + +export default PageTemplatePreview; diff --git a/src/ui/pages/config/PageConfigGrid.js b/src/ui/pages/config/PageConfigGrid.js index fd027fec0..cf29499d7 100644 --- a/src/ui/pages/config/PageConfigGrid.js +++ b/src/ui/pages/config/PageConfigGrid.js @@ -16,7 +16,7 @@ const PageConfigGrid = ({ cellMap }) => { } return ( -
+
{ content }
); From e27e9ae4bf2af551031e93890ed98b4619966771 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 5 Dec 2024 16:48:11 +0100 Subject: [PATCH 045/211] edit select style --- sass/patternfly.scss | 9 +++++++++ sass/variables.scss | 3 ++- src/ui/pages/list/PageSearchForm.js | 2 +- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/sass/patternfly.scss b/sass/patternfly.scss index e7fad00c1..952a2bf5c 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -218,4 +218,13 @@ $fa-square-o: '\f096'; box-shadow: 0 1px 2px rgba(28, 39, 49, 0.08); // sass-lint:disable-line leading-zero } +.form-control { + border: 1px solid $color-content-07; + border-radius: $radius-s; + font-size: 16px; + font-weight: 400; + height: fit-content; + padding: 6px; +} + // sass-lint:enable class-name-format diff --git a/sass/variables.scss b/sass/variables.scss index 1a2aa80d4..32b2209f4 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -31,4 +31,5 @@ $spacing-2: 2px; $spacing-4: 4px; $spacing-8: 8px; -$radius-xxs: 4px; \ No newline at end of file +$radius-xxs: 4px; +$radius-s: 8px; \ No newline at end of file diff --git a/src/ui/pages/list/PageSearchForm.js b/src/ui/pages/list/PageSearchForm.js index 1595acc1d..4a429f27f 100644 --- a/src/ui/pages/list/PageSearchForm.js +++ b/src/ui/pages/list/PageSearchForm.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { reduxForm, Field } from 'redux-form'; import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl'; -import { Row, Col, FormGroup, Button, MenuItem } from 'patternfly-react'; +import { FormGroup /* , Button */ } from 'patternfly-react'; import DropdownButton from 'ui/common/dropdown-button/DropdownButton'; import Search from 'ui/common/Search'; From deb7f5f58448d5717188c7ec1d0657ec5c2e1fc5 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Fri, 6 Dec 2024 09:38:09 +0100 Subject: [PATCH 046/211] rollback wrong edit --- src/ui/contents/list-card/ContentListCardContainer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/contents/list-card/ContentListCardContainer.js b/src/ui/contents/list-card/ContentListCardContainer.js index 212fc43ea..fa60a3d73 100644 --- a/src/ui/contents/list-card/ContentListCardContainer.js +++ b/src/ui/contents/list-card/ContentListCardContainer.js @@ -28,7 +28,7 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ onDidMount: (page = 1, pageSize = 5) => { dispatch(fetchContents({ page: 1, pageSize: 500 }, '?sort=lastModified&direction=DESC', namespace)); - // dispatch(fetchContentTypeListPaged({ page: 1, pageSize: 500 }, '', 'contentTypesTile')); + dispatch(fetchContentTypeListPaged({ page: 1, pageSize: 500 }, '', 'contentTypesTile')); }, onSetColumnOrder: columnOrder => dispatch(setColumnOrder(columnOrder, 'dashboardContentList')), onClickAddContent: (contentType) => { From af9edf768dec4d3af2a0c765ed387ceac7a6d4ed Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Fri, 6 Dec 2024 14:57:06 +0100 Subject: [PATCH 047/211] Add font Inter, edits on side toolbar --- public/index.html | 3 + .../categories/filter/CategoryTreeFilter.scss | 4 +- sass/common/CollapsibleSectionTitle.scss | 4 +- sass/common/content/ContentSearch.scss | 6 +- sass/common/form/MultiSelectMenuItem.scss | 2 +- sass/common/form/ToggleButtonGroup.scss | 11 +- .../common/SidebarFilter.scss | 2 +- .../components/BundlePreview.scss | 16 +- .../components/ComponentList.scss | 8 +- .../components/ComponentListPage.scss | 2 +- .../ComponentUninstallProcessState.scss | 2 +- .../components/HubRegistrySwitcher.scss | 8 +- sass/contents/Contents.scss | 6 +- sass/contents/ContentsFilter.scss | 6 +- sass/contents/JoinCategoriesModal.scss | 2 +- sass/pages/common/PageStatusIcon.scss | 7 +- sass/pages/common/PageTree.scss | 3 +- sass/pages/config/ContentPages.scss | 2 +- sass/pages/config/PageConfigPage.scss | 24 +- sass/pages/config/ToolbarPageConfig.scss | 63 +++-- sass/pages/config/WidgetGrouping.scss | 4 +- sass/pages/config/WidgetGroupingItem.scss | 48 +++- sass/pages/config/WidgetGroupingListItem.scss | 2 +- sass/pages/config/WidgetGroupings.scss | 4 +- sass/patternfly.scss | 1 + sass/tour/index.scss | 4 +- sass/variables.scss | 1 + .../config/forms/NavigationBarConfigForm.scss | 12 +- src/ui/internal-page/PageTitle.js | 4 + src/ui/pages/common/PageStatusIcon.js | 4 +- src/ui/pages/common/PageTree.js | 6 +- src/ui/pages/config/PageConfigPage.js | 238 ++++++++++-------- src/ui/pages/config/ToolbarPageConfig.js | 40 +-- src/ui/pages/config/WidgetGroupingItem.js | 41 +-- src/ui/pages/config/WidgetGroupings.js | 77 +++--- 35 files changed, 409 insertions(+), 258 deletions(-) diff --git a/public/index.html b/public/index.html index d06447c23..87365669c 100644 --- a/public/index.html +++ b/public/index.html @@ -10,6 +10,9 @@ --> + + + diff --git a/sass/categories/filter/CategoryTreeFilter.scss b/sass/categories/filter/CategoryTreeFilter.scss index aab08e644..a8507740c 100644 --- a/sass/categories/filter/CategoryTreeFilter.scss +++ b/sass/categories/filter/CategoryTreeFilter.scss @@ -2,7 +2,7 @@ &__title { margin-left: 5px; color: $color-space-grey; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; font-style: normal; font-weight: bold; @@ -28,7 +28,7 @@ &__apply-button { width: 100%; margin-top: 10px; - font-family: "Open Sans"; + font-family: "Inter"; font-weight: 400; @media (min-width: 992px) { diff --git a/sass/common/CollapsibleSectionTitle.scss b/sass/common/CollapsibleSectionTitle.scss index 99bfd4ce7..b91dee125 100644 --- a/sass/common/CollapsibleSectionTitle.scss +++ b/sass/common/CollapsibleSectionTitle.scss @@ -5,9 +5,9 @@ justify-content: space-between; width: 100%; padding: 10px 10px 10px 30px; - border-top: 1px solid $color-black; + border-top: 1px solid $color-neutral-grey; outline: none; - color: $color-white; + color: $color-content-3; font-size: 14px; font-weight: bold; line-height: inherit; diff --git a/sass/common/content/ContentSearch.scss b/sass/common/content/ContentSearch.scss index 2be96edc7..1e9a210a4 100644 --- a/sass/common/content/ContentSearch.scss +++ b/sass/common/content/ContentSearch.scss @@ -19,7 +19,7 @@ button { // sass-lint:disable-line nesting-depth width: 100%; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; font-weight: bold; text-align: left; @@ -56,7 +56,7 @@ &__advanced-filters-text { margin-bottom: 15px; outline: 0; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; cursor: pointer; } @@ -129,7 +129,7 @@ &__search-button { width: 80%; - font-family: "Open Sans"; + font-family: "Inter"; font-weight: normal; } diff --git a/sass/common/form/MultiSelectMenuItem.scss b/sass/common/form/MultiSelectMenuItem.scss index 19069fdff..71508fb7e 100644 --- a/sass/common/form/MultiSelectMenuItem.scss +++ b/sass/common/form/MultiSelectMenuItem.scss @@ -13,7 +13,7 @@ &__text { padding-left: 15px; - font-family: "Open Sans"; + font-family: "Inter"; font-style: normal; font-weight: bold; } diff --git a/sass/common/form/ToggleButtonGroup.scss b/sass/common/form/ToggleButtonGroup.scss index 23379d920..2c19dda1e 100644 --- a/sass/common/form/ToggleButtonGroup.scss +++ b/sass/common/form/ToggleButtonGroup.scss @@ -7,11 +7,20 @@ } .btn-default.active { - border-color: $color-dark-grey; background-color: $color-dark-grey; color: $color-white; } + .btn-default:hover{ + border: none; + outline: none; + } + + .btn-default:active{ + border: none; + outline: none; + } + select { margin-left: 5px; color: $color-dark-grey; diff --git a/sass/component-repository/common/SidebarFilter.scss b/sass/component-repository/common/SidebarFilter.scss index c1401664b..c9fd8c3ac 100644 --- a/sass/component-repository/common/SidebarFilter.scss +++ b/sass/component-repository/common/SidebarFilter.scss @@ -7,7 +7,7 @@ padding: 20px 15px; border-bottom: 2px solid $color-extra-light-grey-border; color: $color-black; - font-family: Open Sans; + font-family: Inter; font-size: 22px; font-style: normal; line-height: normal; diff --git a/sass/component-repository/components/BundlePreview.scss b/sass/component-repository/components/BundlePreview.scss index a40d2bdd5..affa398cf 100644 --- a/sass/component-repository/components/BundlePreview.scss +++ b/sass/component-repository/components/BundlePreview.scss @@ -32,7 +32,7 @@ &__bundle-name { margin-top: 8px; color: $color-ecr-list-icon-active; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 16px; font-style: normal; font-weight: 600; @@ -46,7 +46,7 @@ &__hub-name { margin-top: 5px; color: $color-mid-blue; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; font-style: normal; font-weight: normal; @@ -63,7 +63,7 @@ &__description-title { color: $color-ecr-list-icon-active; - font-family: Open Sans; + font-family: Inter; font-size: 12px; font-style: normal; font-weight: bold; @@ -74,7 +74,7 @@ margin-top: 6px; margin-bottom: 35px; color: $color-grey-description; - font-family: Open Sans; + font-family: Inter; font-size: 12px; font-style: normal; font-weight: normal; @@ -113,7 +113,7 @@ margin-top: 4px; margin-right: 19px; color: $color-ecr-list-icon-active; - font-family: Open Sans; + font-family: Inter; font-size: 12px; font-style: normal; font-weight: bold; @@ -128,7 +128,7 @@ // sass-lint:disable bem-depth &__title { color: $color-ecr-list-icon-active; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; font-style: normal; font-weight: 700; @@ -138,7 +138,7 @@ &__version { // sass-lint:disable bem-depth margin-left: 26px; color: $color-ecr-list-icon-active; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; font-style: normal; font-weight: 600; @@ -154,7 +154,7 @@ &__error-message { color: $color-bundle-uninstall-error; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; font-style: normal; font-weight: 400; diff --git a/sass/component-repository/components/ComponentList.scss b/sass/component-repository/components/ComponentList.scss index e7ab3f5a8..99b6b517c 100644 --- a/sass/component-repository/components/ComponentList.scss +++ b/sass/component-repository/components/ComponentList.scss @@ -65,7 +65,7 @@ } h1 { - font-family: Open Sans; + font-family: Inter; font-size: 18px; font-style: normal; font-weight: 600; @@ -75,7 +75,7 @@ &__component-category { color: $color-ecr-component-date; - font-family: Open Sans; + font-family: Inter; font-size: 14px; font-style: normal; font-weight: normal; @@ -147,7 +147,7 @@ border: 1px solid $color-ecr-component-installed-button-border; background-color: $color-ecr-component-installed-button; color: $color-white; - font-family: Open Sans; + font-family: Inter; font-size: 12px; font-style: normal; font-weight: 600; @@ -170,7 +170,7 @@ &__description { padding-top: 5px; color: $color-ecr-component-text-grey; - font-family: Open Sans; + font-family: Inter; font-size: 12px; line-height: 20px; } diff --git a/sass/component-repository/components/ComponentListPage.scss b/sass/component-repository/components/ComponentListPage.scss index 0e81f8d1d..498c81367 100644 --- a/sass/component-repository/components/ComponentListPage.scss +++ b/sass/component-repository/components/ComponentListPage.scss @@ -47,7 +47,7 @@ &__container-header-title { color: $color-black; - font-family: Open Sans; + font-family: Inter; font-size: 22px; font-style: normal; line-height: normal; diff --git a/sass/component-repository/components/ComponentUninstallProcessState.scss b/sass/component-repository/components/ComponentUninstallProcessState.scss index aec4037fb..c7a285120 100644 --- a/sass/component-repository/components/ComponentUninstallProcessState.scss +++ b/sass/component-repository/components/ComponentUninstallProcessState.scss @@ -7,7 +7,7 @@ &__in-progress-body-progress-bar-text { margin-bottom: 13px; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; font-weight: 700; } diff --git a/sass/component-repository/components/HubRegistrySwitcher.scss b/sass/component-repository/components/HubRegistrySwitcher.scss index f82ec6156..08dacc3cb 100644 --- a/sass/component-repository/components/HubRegistrySwitcher.scss +++ b/sass/component-repository/components/HubRegistrySwitcher.scss @@ -12,7 +12,7 @@ &__title { color: $color-ecr-list-icon-active; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 22px; font-style: normal; line-height: 30px; @@ -20,7 +20,7 @@ &__description { margin-top: 20px; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; font-style: normal; font-weight: 700; @@ -33,7 +33,7 @@ display: flex; margin-top: 2px; margin-right: 10px; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; font-style: normal; font-weight: 700; @@ -71,7 +71,7 @@ &--new { padding-left: 34px; color: $color-mid-blue; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; font-style: normal; font-weight: normal; diff --git a/sass/contents/Contents.scss b/sass/contents/Contents.scss index e97090022..dd5479b82 100644 --- a/sass/contents/Contents.scss +++ b/sass/contents/Contents.scss @@ -8,7 +8,7 @@ margin-left: 10px; padding-top: 5px; float: right; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; } @@ -35,7 +35,7 @@ } &__table { - font-family: "Open Sans"; + font-family: "Inter"; font-size: 12px; @media (min-width: 991px) { overflow: visible; @@ -53,7 +53,7 @@ &__selected-contents { padding: 10px 8px; background-color: $color-ultra-grey-border; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; > button { diff --git a/sass/contents/ContentsFilter.scss b/sass/contents/ContentsFilter.scss index 4ff1ae76c..f3d9122d2 100644 --- a/sass/contents/ContentsFilter.scss +++ b/sass/contents/ContentsFilter.scss @@ -19,7 +19,7 @@ button { // sass-lint:disable-line nesting-depth width: 100%; background-color: $color-vertical-grey; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; font-weight: bold; text-align: left; @@ -56,7 +56,7 @@ &__advanced-filters-text { margin-bottom: 15px; outline: 0; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; cursor: pointer; } @@ -121,7 +121,7 @@ &__search-button { width: 80%; - font-family: "Open Sans"; + font-family: "Inter"; font-weight: normal; } diff --git a/sass/contents/JoinCategoriesModal.scss b/sass/contents/JoinCategoriesModal.scss index 808250909..33f5c869d 100644 --- a/sass/contents/JoinCategoriesModal.scss +++ b/sass/contents/JoinCategoriesModal.scss @@ -13,7 +13,7 @@ &__info-text { display: inline-block; padding: 10px; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; } } diff --git a/sass/pages/common/PageStatusIcon.scss b/sass/pages/common/PageStatusIcon.scss index 4e6f83611..93eeef2b0 100644 --- a/sass/pages/common/PageStatusIcon.scss +++ b/sass/pages/common/PageStatusIcon.scss @@ -1,11 +1,12 @@ + .PageStatusIcon--unpublished { - color: $color-unpublished; + background-color: $color-unpublished; } .PageStatusIcon--published { - color: $color-published; + background-color: $color-published-600; } .PageStatusIcon--draft { - color: $color-draft; + background-color: $color-draft; } diff --git a/sass/pages/common/PageTree.scss b/sass/pages/common/PageTree.scss index bbf7124fa..7e73156e0 100644 --- a/sass/pages/common/PageTree.scss +++ b/sass/pages/common/PageTree.scss @@ -92,7 +92,8 @@ } .PageStatusIcon { - line-height: 24px; + width: 8px; + height: 8px; } .PageTree__displayed-in-menu { diff --git a/sass/pages/config/ContentPages.scss b/sass/pages/config/ContentPages.scss index 498df4806..d91a28f40 100644 --- a/sass/pages/config/ContentPages.scss +++ b/sass/pages/config/ContentPages.scss @@ -34,7 +34,7 @@ &__toggler { display: inline-block; margin-right: 10px; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; line-height: 1.66666667; diff --git a/sass/pages/config/PageConfigPage.scss b/sass/pages/config/PageConfigPage.scss index efe40c2da..2955bf9b2 100644 --- a/sass/pages/config/PageConfigPage.scss +++ b/sass/pages/config/PageConfigPage.scss @@ -11,17 +11,27 @@ &__title { padding-bottom: 10px; - border-bottom: solid 1px #000; font-size: 16px; - font-weight: bold; + font-weight: 600; + color: $color-primary-text; } - &__toolbar-row { - margin-bottom: 5px; + &__title_container{ + display: flex; + align-items: center; + width: 100%; + } + + &__tabHeader{ + display: flex; + flex: 1; + align-items: center; + justify-content: space-between; } + + &__btn-group--trans { - padding-bottom: 5px; .pull-right .btn { // sass-lint:disable-line force-element-nesting class-name-format margin-left: 12px; @@ -57,6 +67,9 @@ .PageStatusIcon { margin-right: 10px; + width: 8px; + height: 8px; + border-radius: 50%; } &__default-applied-label { @@ -133,6 +146,7 @@ } .PageConfigPage__side-widget { + background-color: white; position: fixed; left: initial; width: 48px; diff --git a/sass/pages/config/ToolbarPageConfig.scss b/sass/pages/config/ToolbarPageConfig.scss index c6ee24a00..b29f61620 100644 --- a/sass/pages/config/ToolbarPageConfig.scss +++ b/sass/pages/config/ToolbarPageConfig.scss @@ -3,6 +3,8 @@ .ToolbarPageConfig { position: relative; width: calc(100% + 20px); + font-family: "Inter", sans-serif; + &__collapse-main { position: absolute; @@ -10,9 +12,9 @@ left: 0; width: 45px; height: 45px; - outline: none; - background-color: $color-black; - color: $color-white; + outline: none !important; + background-color: $color-white; + color: $color-primary-text; text-align: center; box-shadow: none; @@ -26,13 +28,12 @@ &:focus { outline: none; - background-color: $color-black; - color: $color-white; + background-color: $color-white; + color: $color-primary-text; } &:hover { - background-color: $color-dragitem-bg; - color: $color-mid-blue; + color: $color-primary-text; } // sass-lint:enable class-name-format nesting-depth } @@ -48,8 +49,11 @@ // sass-lint:disable class-name-format force-element-nesting nesting-depth no-qualifying-elements ul.nav { - border-bottom-color: $color-black; - background-color: $color-dragitem-bg; + background-color: $color-white; + outline: none; + border: none; + border-bottom: 1px solid $color-neutral-grey; + &::before { display: block; @@ -58,19 +62,28 @@ float: left; } + + li { min-width: 108px; height: 45px; background-color: transparent; + outline: none; & > a { width: 100%; - padding: 13px 10px; + padding: 13px 0px 13px 0px; border-color: transparent; - color: $color-white; - font-size: 12px; + color: $color-text-tertiary; + font-size: 14px; font-weight: bold; text-align: center; + cursor: pointer; + + &:focus,:focus-visible{ + outline: none; + border: none; + } .fa { margin-right: 5px; @@ -81,32 +94,33 @@ &:hover { border-color: transparent; - color: $color-mid-blue; + color: $color-primary-text; .fa { - color: $color-mid-blue; + color: $color-primary-text; } } } &.active { - border: 1px solid $color-black; - border-bottom: transparent; + } &.active a { - height: calc(100% + 1px); border-top: 0; border-color: transparent; - background-color: $color-sidebar-dark-bg; - color: $color-white; + background-color: #FFF; + color: $color-primary-text; + height: calc(100% + 1px); + &:hover { - color: $color-white; + color: $color-primary-text; + } .fa { - color: $color-mid-blue; + color: $color-primary-text; } } } @@ -116,9 +130,9 @@ &__drawer-pf-sidebar-right { height: 100%; - background-color: $color-sidebar-dark-bg; - box-shadow: 0 6px 12px rgba(3,3,3,.175); + background-color: #FFF; z-index: 10; + border-left: 1px solid $color-neutral-grey } &__drawer-pf-sidebar-right-expanded { @@ -187,9 +201,10 @@ // sass-lint:disable class-name-format force-element-nesting nesting-depth no-qualifying-elements .ToolbarPageConfig__collapse-main { width: 48px; + .fa { - color: $color-mid-blue; + color: $color-brand-primary; } } diff --git a/sass/pages/config/WidgetGrouping.scss b/sass/pages/config/WidgetGrouping.scss index 2f29dc5c7..cb6a936c8 100644 --- a/sass/pages/config/WidgetGrouping.scss +++ b/sass/pages/config/WidgetGrouping.scss @@ -7,6 +7,8 @@ padding-top: 10px; border: 0; overflow: hidden; + gap: 10px; + flex-wrap: wrap; } &__item-area.odd::after { // sass-lint:disable-line class-name-format force-element-nesting @@ -16,6 +18,6 @@ } &:last-of-type { - border-bottom: 1px solid $color-black; + border-bottom: 1px solid $color-neutral-grey; } } diff --git a/sass/pages/config/WidgetGroupingItem.scss b/sass/pages/config/WidgetGroupingItem.scss index 2f1857b4b..9cb6c031e 100644 --- a/sass/pages/config/WidgetGroupingItem.scss +++ b/sass/pages/config/WidgetGroupingItem.scss @@ -2,8 +2,20 @@ width: calc(50% - 20px); margin-bottom: 10px; border: 0; - background-color: $color-dragitem-bg; - overflow: hidden; + + + + .icon-container{ + background-color:$color-grey-background-tertiary; + padding: 20px; + border-radius: 6px; + width: 100%; + justify-content: center; + align-items: center; + display: flex; + border: 3px solid $color-border-grey + + } // sass-lint:disable class-name-format nesting-depth &.list-group-item:last-of-type { @@ -35,6 +47,22 @@ line-height: 1; text-transform: capitalize; } + + &__description-container{ + margin: 0; + text-align: center; + width: 100%; + padding: 8px 16px 8px 16px; + display: flex; + align-items: center; + justify-content: center; + + + + a{ + color:$color-text-tertiary; + font-weight: 600; + } // sass-lint:disable class-name-format force-element-nesting &__main.list-view-pf-main-info { @@ -45,7 +73,7 @@ .list-view-pf-left { display: block; margin: 0 auto; - padding-right: 0; + padding-right: 0 !important; color: $color-dark-white; } @@ -57,6 +85,13 @@ .list-view-pf-description { display: block; margin-top: 10px; + display: flex; + justify-content: center; + align-items: center; + flex: 1; + width: 100% !important; + color:$color-text-tertiary; + padding: 15px; } a { @@ -66,8 +101,7 @@ } // sass-lint:enable class-name-format force-element-nesting - &__description { - margin: 0; - text-align: center; - } + + +} } diff --git a/sass/pages/config/WidgetGroupingListItem.scss b/sass/pages/config/WidgetGroupingListItem.scss index 0f24a2dbe..cb0a81301 100644 --- a/sass/pages/config/WidgetGroupingListItem.scss +++ b/sass/pages/config/WidgetGroupingListItem.scss @@ -27,7 +27,7 @@ display: flex; align-items: center; margin-left: 20px; - font-family: "Open Sans"; + font-family: "Inter"; font-weight: 400; line-height: 18px; text-align: center; diff --git a/sass/pages/config/WidgetGroupings.scss b/sass/pages/config/WidgetGroupings.scss index 7e1b546a0..905fe88ef 100644 --- a/sass/pages/config/WidgetGroupings.scss +++ b/sass/pages/config/WidgetGroupings.scss @@ -1,7 +1,7 @@ @import "../../patternfly.scss"; .WidgetGroupings { - background-color: $color-sidebar-dark-bg; + background-color: #FFF; &__right-menu-title { display: flex; @@ -44,7 +44,7 @@ } &--selected { - color: $color-white; + color: $color-brand-primary; } } diff --git a/sass/patternfly.scss b/sass/patternfly.scss index e7fad00c1..ea9205332 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -73,6 +73,7 @@ $color-draft-400: #fbd26a; $color-draft-200: #faf1d9; $color-unpublished-new: #637083; $color-unpublished-light: #d8d8d8; +$color-grey-background-tertiary:#F2F4F7; //FontAwesome icons diff --git a/sass/tour/index.scss b/sass/tour/index.scss index 37b3f9f02..f26f3989e 100644 --- a/sass/tour/index.scss +++ b/sass/tour/index.scss @@ -11,7 +11,7 @@ padding-left: 20px; background-color: $color-black; color: $color-white; - font-family: "Open Sans"; + font-family: "Inter"; font-size: 13px; font-weight: 600; line-height: 17.7px; @@ -26,7 +26,7 @@ padding-left: 20px; background-color: $color-white; color: $color-ecr-list-icon-active; - font-family: "Open Sans"; + font-family: "Inter"; &--dark { background-color: rgba(41, 46, 52, 1); // sass-lint:disable-line variable-for-property diff --git a/sass/variables.scss b/sass/variables.scss index 1a2aa80d4..44b220ffa 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -14,6 +14,7 @@ $color-unpublish: #a6a6a6; $color-inactive-dark: #363636; $color-border-blue: #40a6da; $color-dim-grey: #72767b; +$color-primary-text:#141C24; $color-background-primary: #ffffff; $color-brand-primary: #1a75ff; diff --git a/sass/widgets/config/forms/NavigationBarConfigForm.scss b/sass/widgets/config/forms/NavigationBarConfigForm.scss index 91c4b9938..bc4726aea 100644 --- a/sass/widgets/config/forms/NavigationBarConfigForm.scss +++ b/sass/widgets/config/forms/NavigationBarConfigForm.scss @@ -43,11 +43,19 @@ } .btn-default.active { - border-color: $color-dark-grey; - background-color: $color-dark-grey; color: $color-white; } + .btn-default:hover{ + border: none; + outline: none; + } + + .btn-default:active{ + border: none; + outline: none; + } + select { margin-left: 5px; color: $color-dark-grey; diff --git a/src/ui/internal-page/PageTitle.js b/src/ui/internal-page/PageTitle.js index 3566eced3..6cce7aeac 100644 --- a/src/ui/internal-page/PageTitle.js +++ b/src/ui/internal-page/PageTitle.js @@ -43,6 +43,7 @@ const PageTitle = ({ configLink, hideConfigLink, 'data-testid': dataTestId, + children, }) => (
@@ -50,6 +51,7 @@ const PageTitle = ({ {!hideConfigLink && configIcon(configLink)} {helpIcon(helpId)} + {children}
@@ -62,6 +64,7 @@ PageTitle.propTypes = { hideConfigLink: PropTypes.bool, titleParam: PropTypes.shape({}), 'data-testid': PropTypes.string, + children: PropTypes.node, }; PageTitle.defaultProps = { @@ -70,6 +73,7 @@ PageTitle.defaultProps = { hideConfigLink: false, titleParam: {}, 'data-testid': '', + children: null, }; export default PageTitle; diff --git a/src/ui/pages/common/PageStatusIcon.js b/src/ui/pages/common/PageStatusIcon.js index 732329939..c59c12673 100644 --- a/src/ui/pages/common/PageStatusIcon.js +++ b/src/ui/pages/common/PageStatusIcon.js @@ -16,10 +16,10 @@ const PageStatusIcon = ({ intl, status }) => { }); const iconTitle = intl.formatMessage(msgs.pageStatus, {}); const classNameAr = [ - 'fa fa-circle PageStatusIcon', + 'PageStatusIcon', `PageStatusIcon--${status}`, ]; - return ; + return
; }; PageStatusIcon.propTypes = { diff --git a/src/ui/pages/common/PageTree.js b/src/ui/pages/common/PageTree.js index 1dc95db36..105d6c004 100644 --- a/src/ui/pages/common/PageTree.js +++ b/src/ui/pages/common/PageTree.js @@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl'; import { Spinner } from 'patternfly-react'; import { DDTable } from '@entando/ddtable'; import { DataTable } from '@entando/datatable'; -import PageStatusIcon from 'ui/pages/common/PageStatusIcon'; import TreeNodeFolderIcon from 'ui/common/tree-node/TreeNodeFolderIcon'; import TreeNodeExpandedIcon from 'ui/common/tree-node/TreeNodeExpandedIcon'; import RowSpinner from 'ui/pages/common/RowSpinner'; @@ -16,6 +15,7 @@ import UnpublishPageModalContainer from 'ui/pages/common/UnpublishPageModalConta import PageListSearchTable from 'ui/pages/list/PageListSearchTable'; import MovePageModalContainer from 'ui/pages/common/MovePageModalContainer'; import { HOMEPAGE_CODE, PAGE_MOVEMENT_OPTIONS } from 'state/pages/const'; +import StatusBadge from './StatusBadge'; export const getIsRootAndVirtual = (page, virtualRootOn) => { @@ -120,7 +120,7 @@ class PageTree extends Component { }, status: { Header: , - attributes: { className: 'text-center PageTree__thead', style: { width: '15%' } }, + attributes: { className: 'PageTree__thead', style: { width: '15%' } }, Cell: this.renderStatusCell, cellAttributes: { className: 'text-center', style: { verticalAlign: 'middle' } }, }, @@ -185,7 +185,7 @@ class PageTree extends Component { const isRootAndVirtual = getIsRootAndVirtual(args.row.original, this.props.virtualRootOn); if (isRootAndVirtual) return null; return ( - + ); } diff --git a/src/ui/pages/config/PageConfigPage.js b/src/ui/pages/config/PageConfigPage.js index 1186e2b05..15647186f 100644 --- a/src/ui/pages/config/PageConfigPage.js +++ b/src/ui/pages/config/PageConfigPage.js @@ -1,7 +1,19 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl'; -import { Icon, Grid, Row, Col, Breadcrumb, DropdownButton, MenuItem, Alert, Spinner, Tabs, Tab } from 'patternfly-react'; +import { + Icon, + Grid, + Row, + Col, + Breadcrumb, + DropdownButton, + MenuItem, + Alert, + Spinner, + Tabs, + Tab, +} from 'patternfly-react'; import { Panel, Button, ButtonToolbar } from 'react-bootstrap'; import BreadcrumbItem from 'ui/common/BreadcrumbItem'; @@ -60,9 +72,8 @@ class PageConfigPage extends Component { componentWillReceiveProps(nextProps) { if (nextProps.pageStatus !== 'draft') { this.setState({ - statusChange: (nextProps.pageStatus !== this.props.pageStatus) ? - nextProps.pageStatus : - null, + statusChange: + nextProps.pageStatus !== this.props.pageStatus ? nextProps.pageStatus : null, }); } const { match, onWillMount } = this.props; @@ -101,7 +112,7 @@ class PageConfigPage extends Component { const { onSettingsCancel } = this.props; onSettingsCancel(); } - return ({ editingSettings: !editingSettings }); + return { editingSettings: !editingSettings }; }); } @@ -112,37 +123,31 @@ class PageConfigPage extends Component { } renderPageHeader() { - const { - pageName, pageStatus, pageDiffersFromPublished, - } = this.props; + const { pageName, pageStatus, pageDiffersFromPublished } = this.props; - const statusMessage = this.state.statusChange ? - ( - - - - ) : - null; + const statusMessage = this.state.statusChange ? ( + + + + ) : null; return (
-

+
- {pageName} -

+

{pageName}

+
- - {statusMessage} - + {statusMessage}
); @@ -150,8 +155,14 @@ class PageConfigPage extends Component { renderActionBar(tab) { const { - intl, pageDiffersFromPublished, restoreConfig, previewUri, pageStatus, - onClickSaveSettings, pageSettingsButtonInvalid, pageSettingsButtonSubmitting, + intl, + pageDiffersFromPublished, + restoreConfig, + previewUri, + pageStatus, + onClickSaveSettings, + pageSettingsButtonInvalid, + pageSettingsButtonSubmitting, selectedPageForm, } = this.props; @@ -180,7 +191,7 @@ class PageConfigPage extends Component { - {tab === 'settings' ? + {tab === 'settings' ? ( - { - editingSettings && ( - - ) - } - - : ( -
+ {editingSettings && ( - - - - - -
- )} + )} + + ) : ( +
+ + + + + + +
+ )} @@ -269,9 +282,16 @@ class PageConfigPage extends Component { render() { const { - intl, pageIsOnTheFly, isOnTheFlyEnabled, - setSelectedPageOnTheFly, pageIsPublished, publishPage, unpublishPage, - applyDefaultConfig, pageConfigMatchesDefault, appTourProgress, + intl, + pageIsOnTheFly, + isOnTheFlyEnabled, + setSelectedPageOnTheFly, + pageIsPublished, + publishPage, + unpublishPage, + applyDefaultConfig, + pageConfigMatchesDefault, + appTourProgress, match, } = this.props; const { editingSettings, toolbarCollapsed } = this.state; @@ -302,7 +322,12 @@ class PageConfigPage extends Component { return ( - + - } > + } + >
- {this.renderPageHeader()} - {this.renderActionBar()} +
+ {this.renderPageHeader()} + {this.renderActionBar()} +
- }> + } + >
- {this.renderPageHeader()} - {this.renderActionBar('settings')} +
+ {this.renderPageHeader()} + {this.renderActionBar('settings')} +
- - - {defaultConfigBtn} - + {defaultConfigBtn}
); } } - ToolbarPageConfig.propTypes = { onWillMount: PropTypes.func, onWillUnmount: PropTypes.func, diff --git a/src/ui/pages/config/WidgetGroupingItem.js b/src/ui/pages/config/WidgetGroupingItem.js index 3cedb5231..1a9346ed6 100644 --- a/src/ui/pages/config/WidgetGroupingItem.js +++ b/src/ui/pages/config/WidgetGroupingItem.js @@ -8,22 +8,30 @@ import WidgetIcon from 'ui/widgets/common/WidgetIcon'; const WidgetGroupingItem = ({ widgetId, widgetName, connectDragSource }) => { const component = ( -
-
-
- -
-
-
-
- - {widgetName} - -
-
-
+ //
+ //
+ //
+ // + //
+ //
+ //
+ //
+ // + // {widgetName} + // + //
+ //
+ //
+ //
+ //
+
+
+ +
+
+ + {widgetName} +
); @@ -34,7 +42,6 @@ const WidgetGroupingItem = ({ widgetId, widgetName, connectDragSource }) => { }; WidgetGroupingItem.propTypes = { - widgetName: PropTypes.string.isRequired, /* eslint-disable react/no-unused-prop-types */ diff --git a/src/ui/pages/config/WidgetGroupings.js b/src/ui/pages/config/WidgetGroupings.js index c5a2411e5..5d379f86a 100644 --- a/src/ui/pages/config/WidgetGroupings.js +++ b/src/ui/pages/config/WidgetGroupings.js @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, intlShape } from 'react-intl'; import WidgetGrouping from 'ui/pages/config/WidgetGrouping'; +import Search from 'ui/common/Search'; export const GRID_VIEW = 'grid'; export const LIST_VIEW = 'list'; @@ -14,7 +15,13 @@ const msgs = defineMessages({ }); const WidgetGroupings = ({ - intl, groupedWidgets, widgetGroupingList, filterWidget, locale, searchFilter, clearFilter, + intl, + groupedWidgets, + widgetGroupingList, + filterWidget, + locale, + searchFilter, + clearFilter, }) => { const onChange = (event) => { filterWidget(event.target.value); @@ -22,23 +29,30 @@ const WidgetGroupings = ({ const [openGroupings, setOpenGroupings] = useState({}); const [view, setView] = useState(GRID_VIEW); - const toggleGroupingCollapse = grouping => setOpenGroupings({ - ...openGroupings, - [grouping]: !openGroupings[grouping], - }); + const toggleGroupingCollapse = (grouping) => + setOpenGroupings({ + ...openGroupings, + [grouping]: !openGroupings[grouping], + }); useEffect(() => { - const newOpenGroupings = widgetGroupingList.reduce((acc, curr, idx) => ({ - ...acc, - [curr]: !!searchFilter || idx === 0, - }), {}); + const newOpenGroupings = widgetGroupingList.reduce( + (acc, curr, idx) => ({ + ...acc, + [curr]: !!searchFilter || idx === 0, + }), + {}, + ); setOpenGroupings(newOpenGroupings); }, [searchFilter, widgetGroupingList]); - useEffect(() => () => { - clearFilter(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + useEffect( + () => () => { + clearFilter(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, + [], + ); const optClassSel = 'WidgetGroupings__view-option--selected'; const gridViewClass = `fa fa-th WidgetGroupings__view-option @@ -49,15 +63,16 @@ const WidgetGroupings = ({ const setGridView = () => setView(GRID_VIEW); const setListView = () => setView(LIST_VIEW); + const inputProps = { + className: 'WidgetGroupings__input-pf-right-menu', + type: 'text', + onChange, + placeholder: intl.formatMessage(msgs.search), + }; return (
- +
- { - widgetGroupingList.map(grouping => ( - toggleGroupingCollapse(grouping)} - opened={openGroupings[grouping]} - name={grouping} - key={grouping} - view={view} - /> - )) - } + {widgetGroupingList.map((grouping) => ( + toggleGroupingCollapse(grouping)} + opened={openGroupings[grouping]} + name={grouping} + key={grouping} + view={view} + /> + ))}
); From a6b2d27931a63e92a0c98d8a953eadf3bb8c7d47 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 6 Dec 2024 15:40:25 +0100 Subject: [PATCH 048/211] add PageSettings modal draft --- sass/index.scss | 1 + sass/pages/settings/ModalPageSettings.scss | 47 ++++++++++++++++++++++ sass/variables.scss | 1 + src/ui/pages/list/PageTreePage.js | 11 ++++- src/ui/pages/settings/ModalPageSettings.js | 17 ++++++++ 5 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 sass/pages/settings/ModalPageSettings.scss create mode 100644 src/ui/pages/settings/ModalPageSettings.js diff --git a/sass/index.scss b/sass/index.scss index c8ad8858d..f78bce3ba 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -31,6 +31,7 @@ @import 'pages/common/FindTemplateModal'; @import 'pages/common/SeoInfo'; @import 'pages/common/PageSettingsForm'; +@import 'pages/settings/ModalPageSettings'; @import 'pages/settings/PageSettings'; @import 'pages/config/ToolbarPageConfig'; @import 'pages/config/ToolbarContentIcon'; diff --git a/sass/pages/settings/ModalPageSettings.scss b/sass/pages/settings/ModalPageSettings.scss new file mode 100644 index 000000000..4d6813e4e --- /dev/null +++ b/sass/pages/settings/ModalPageSettings.scss @@ -0,0 +1,47 @@ +.ModalPageSettings { + display: flex; + justify-items: flex-end; + + .modal-header { + background-color: transparent; + + h4 { + font-size: 20px; + font-weight: 500; + color: $color-text-secondary; + } + + .close { + font-size: 30px; + } + } + + .modal-dialog { + height: 100vh; + margin: 0; + } + + .modal-content { + height: 100vh; + padding: 24px; + + .form-group { + display: flex; + flex-direction: column; + width: 100%; + + &>div { + width: 100%; + display: flex; + } + + label { + font-size: 14px; + font-weight: 500; + } + } + } + + + +} \ No newline at end of file diff --git a/sass/variables.scss b/sass/variables.scss index 32b2209f4..480e1cf97 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -19,6 +19,7 @@ $color-background-primary: #ffffff; $color-brand-primary: #1a75ff; $color-brand-secondary: #0041cc; $color-neutral-grey: #e4e7ec; +$color-text-secondary: #344051; $color-text-tertiary: #637083; $color-dark-blue: #e5eeff; $color-border-blue: #40a6da; diff --git a/src/ui/pages/list/PageTreePage.js b/src/ui/pages/list/PageTreePage.js index 8eef50a21..dee845d00 100644 --- a/src/ui/pages/list/PageTreePage.js +++ b/src/ui/pages/list/PageTreePage.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { Grid, Row, Col, Breadcrumb, Button } from 'patternfly-react'; import { Link } from 'react-router-dom'; - import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; @@ -14,10 +13,12 @@ import AppTourContainer from 'ui/app-tour/AppTourContainer'; import { ROUTE_PAGE_ADD } from 'app-init/router'; import { withPermissionValues } from 'ui/auth/withPermissions'; import Icon from 'ui/common/Icon'; +import ModalPageSettings from '../settings/ModalPageSettings'; class PageTreePage extends Component { componentWillMount() { this.props.onWillMount(this.props); + this.state = { open: false }; } renderButton() { @@ -66,7 +67,7 @@ class PageTreePage extends Component { style={{ height: '26px', marginTop: '3px', color: '#344051', fontSize: '14px', fontWeight: '600', }} - // @TODO open Pages Settings modal + onClick={() => this.setState({ open: true })} > @@ -111,6 +112,12 @@ class PageTreePage extends Component { + + this.setState({ open: false })} + /> + ); } diff --git a/src/ui/pages/settings/ModalPageSettings.js b/src/ui/pages/settings/ModalPageSettings.js new file mode 100644 index 000000000..9d0f88212 --- /dev/null +++ b/src/ui/pages/settings/ModalPageSettings.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Modal } from 'patternfly-react'; +import { FormattedMessage } from 'react-intl'; +import PageSettingsFormContainer from '../common/PageSettingsFormContainer'; + +const ModalPageSettings = props => ( + + + + + + + + +); + +export default ModalPageSettings; From 160174b295d22b355232bce82d8fdc56192cb36a Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 6 Dec 2024 15:50:38 +0100 Subject: [PATCH 049/211] fix eslint errors --- src/ui/contents/list-card/ContentListCard.js | 70 ++++++++++---------- src/ui/dashboard/DashboardPage.js | 4 +- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index 99ee81b79..8c69c1374 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Paginator, DropdownButton, MenuItem } from 'patternfly-react'; +import { /* Paginator, */ DropdownButton, MenuItem } from 'patternfly-react'; import { Clearfix } from 'react-bootstrap'; import { DataTable } from '@entando/datatable'; import { formatDate, hasAccess } from '@entando/utils'; @@ -16,7 +16,7 @@ import { import ViewPermissionNoticeOverlay from 'ui/dashboard/ViewPermissionNoticeOverlay'; -import paginatorMessages from 'ui/common/paginatorMessages'; +// import paginatorMessages from 'ui/common/paginatorMessages'; import Icon from 'ui/common/Icon'; import StatusBadge from 'ui/pages/common/StatusBadge'; @@ -28,7 +28,9 @@ class ContentListCard extends Component { } componentDidMount() { - const { onDidMount, columnOrder, onSetColumnOrder, userPermissions } = this.props; + const { + onDidMount, columnOrder, onSetColumnOrder, userPermissions, + } = this.props; if (!columnOrder.length) { onSetColumnOrder(['description', 'typeDescription', 'status', 'lastModified']); } @@ -60,14 +62,14 @@ class ContentListCard extends Component { status: { Header: , attributes: { - + style: { width: '25%' }, }, Cell: (cellInfo) => { const { row: { original: content }, } = cellInfo; - const { color, title } = getContentStatusDetails( + const { color/* , title */ } = getContentStatusDetails( content.status, content.onLine, intl, @@ -89,7 +91,7 @@ class ContentListCard extends Component { }, }; - return columnOrder.map((column) => ({ + return columnOrder.map(column => ({ ...columnDefs[column], accessor: column, })); @@ -108,18 +110,18 @@ class ContentListCard extends Component { render() { const { intl, - pagination: { page, totalItems, pageSize: perPage }, + // pagination: { page, pageSize: perPage }, contentTypes, onClickAddContent, userPermissions, contents, onSetColumnOrder, } = this.props; - const pagination = { - page, - perPage, - perPageOptions: [5, 10, 15], - }; + // const pagination = { + // page, + // perPage, + // perPageOptions: [5, 10, 15], + // }; const renderAddContentButton = hasAccess( [SUPERUSER_PERMISSION, CRUD_CONTENTS_PERMISSION, VALIDATE_CONTENTS_PERMISSION], userPermissions, @@ -130,30 +132,30 @@ class ContentListCard extends Component { title={intl.formatMessage({ id: 'cms.contents.add.title' })} id="addContent" > - {contentTypes.map((contentType) => ( - - onClickAddContent({ - typeCode: contentType.code, - typeDescription: contentType.name, - }) - } - > - {contentType.name} - - ))} + {contentTypes.map(contentType => ( + + onClickAddContent({ + typeCode: contentType.code, + typeDescription: contentType.name, + }) + } + > + {contentType.name} + + ))} ); - const messages = Object.keys(paginatorMessages).reduce( - (acc, curr) => ({ - ...acc, - [curr]: intl.formatMessage(paginatorMessages[curr]), - }), - {}, - ); + // const messages = Object.keys(paginatorMessages).reduce( + // (acc, curr) => ({ + // ...acc, + // [curr]: intl.formatMessage(paginatorMessages[curr]), + // }), + // {}, + // ); const columns = this.getColumnDefs() || []; @@ -218,7 +220,7 @@ ContentListCard.defaultProps = { page: 1, totalItems: 0, }, - onSetColumnOrder: () => {}, + onSetColumnOrder: () => { }, columnOrder: ['description', 'typeDescription', 'status', 'lastModified'], }; diff --git a/src/ui/dashboard/DashboardPage.js b/src/ui/dashboard/DashboardPage.js index 54671a26a..76bcb4124 100644 --- a/src/ui/dashboard/DashboardPage.js +++ b/src/ui/dashboard/DashboardPage.js @@ -50,6 +50,4 @@ export const DashboardPageBody = () => ( ); -export default withPermissions(ADMINISTRATION_AREA_PERMISSION)( - DashboardPageBody, -); +export default withPermissions(ADMINISTRATION_AREA_PERMISSION)(DashboardPageBody); From 9ff264bfb068976039615ca4a81511db9804bd98 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 6 Dec 2024 17:24:42 +0100 Subject: [PATCH 050/211] fix console errors --- src/ui/common/Search.js | 16 ++-------------- src/ui/common/dropdown-button/DropdownButton.js | 5 ++++- src/ui/pages/list/PageTreePage.js | 2 +- 3 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/ui/common/Search.js b/src/ui/common/Search.js index 13af486be..896ee7264 100644 --- a/src/ui/common/Search.js +++ b/src/ui/common/Search.js @@ -1,24 +1,12 @@ import React from 'react'; -import PropTypes from 'prop-types'; import Icon from './Icon'; -const Search = ({ - input, reverse, ...rest -}) => ( +// eslint-disable-next-line react/prop-types +const Search = ({ input, reverse, ...rest }) => (
); -Search.propTypes = { - input: PropTypes.objectOf({}), - reverse: PropTypes.bool, -}; - -Search.defaultProps = { - input: {}, - reverse: false, -}; - export default Search; diff --git a/src/ui/common/dropdown-button/DropdownButton.js b/src/ui/common/dropdown-button/DropdownButton.js index 176214f4d..3d9784428 100644 --- a/src/ui/common/dropdown-button/DropdownButton.js +++ b/src/ui/common/dropdown-button/DropdownButton.js @@ -19,7 +19,10 @@ const DropdownButton = ({ ); DropdownButton.propTypes = { - options: PropTypes.arrayOf([]).isRequired, + options: PropTypes.arrayOf(PropTypes.shape({ + value: PropTypes.string.isRequired, + label: PropTypes.string.isRequired, + })).isRequired, intl: intlShape.isRequired, onSelect: PropTypes.func.isRequired, }; diff --git a/src/ui/pages/list/PageTreePage.js b/src/ui/pages/list/PageTreePage.js index dee845d00..d047af798 100644 --- a/src/ui/pages/list/PageTreePage.js +++ b/src/ui/pages/list/PageTreePage.js @@ -18,7 +18,7 @@ import ModalPageSettings from '../settings/ModalPageSettings'; class PageTreePage extends Component { componentWillMount() { this.props.onWillMount(this.props); - this.state = { open: false }; + this.setState({ open: false }); } renderButton() { From aba3b78b334c33dd8450478e15196cd1b749ec4b Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 9 Dec 2024 10:21:57 +0100 Subject: [PATCH 051/211] chore: minor changes to PageTemplatePreview --- .../list/PageTemplateListTable.scss | 5 +- .../list/PageTemplateListTable.js | 11 +++- .../list/PageTemplatePreview.js | 66 +++++++++---------- 3 files changed, 45 insertions(+), 37 deletions(-) diff --git a/sass/page-templates/list/PageTemplateListTable.scss b/sass/page-templates/list/PageTemplateListTable.scss index a85728a62..c437166b4 100644 --- a/sass/page-templates/list/PageTemplateListTable.scss +++ b/sass/page-templates/list/PageTemplateListTable.scss @@ -17,13 +17,16 @@ } .Page_Template_Preview_Content { - width: 187px; height: 120px; background: rgba(240, 246, 255, 1); border: 1px solid rgba(204, 224, 255, 1); position: relative; + } + .Page_Template_Preview_Actions { + position: absolute; + right: 10px } .Page_Config_Grid_Container { diff --git a/src/ui/page-templates/list/PageTemplateListTable.js b/src/ui/page-templates/list/PageTemplateListTable.js index 12d6bac05..dfe36a599 100644 --- a/src/ui/page-templates/list/PageTemplateListTable.js +++ b/src/ui/page-templates/list/PageTemplateListTable.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { Col, Spinner } from 'patternfly-react'; import { injectIntl } from 'react-intl'; import PageTemplateDeleteModalContainer from 'ui/page-templates/common/PageTemplateDeleteModalContainer'; +import PageTemplateListMenuActions from 'ui/page-templates/list/PageTemplateListMenuActions'; import PageTemplatePreview from './PageTemplatePreview'; class PageTemplateListTable extends Component { @@ -36,8 +37,14 @@ class PageTemplateListTable extends Component { ))} + actions={ + removePageTemplate(template.code)} + /> + } + /> + ))}
); diff --git a/src/ui/page-templates/list/PageTemplatePreview.js b/src/ui/page-templates/list/PageTemplatePreview.js index 401c7e47a..18aacff31 100644 --- a/src/ui/page-templates/list/PageTemplatePreview.js +++ b/src/ui/page-templates/list/PageTemplatePreview.js @@ -1,22 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; -import PageTemplateListMenuActions from 'ui/page-templates/list/PageTemplateListMenuActions'; import PageConfigGrid from 'ui/pages/config/PageConfigGrid'; import { getCellMap } from 'state/page-templates/helpers'; -const PageTemplatePreview = ({ item }) => { - const { code, descr, removePageTemplate } = item; +const PageTemplatePreview = ({ item, actions }) => { + const { descr } = item; const cellMap = getCellMap(item); return (
-
- removePageTemplate(code)} - /> -
+ {actions && ( +
+ {actions} +
+ )}
@@ -27,31 +25,31 @@ const PageTemplatePreview = ({ item }) => { }; PageTemplatePreview.propTypes = -{ - item: PropTypes.shape({ - code: PropTypes.string.isRequired, - descr: PropTypes.string.isRequired, - mainFrame: PropTypes.number.isRequired, - pluginCode: PropTypes.string, - template: PropTypes.string.isRequired, - extraProperties: PropTypes.string, - configuration: PropTypes.shape({ - frames: PropTypes.shape({ - pos: PropTypes.string.isRequired, - descr: PropTypes.string.isRequired, - defaultWidget: PropTypes.shape({ - code: PropTypes.string.isRequired, - }).isRequired, - sketch: PropTypes.shape({ - x1: PropTypes.number.isRequired, - x2: PropTypes.number.isRequired, - y1: PropTypes.number.isRequired, - y2: PropTypes.number.isRequired, + { + item: PropTypes.shape({ + code: PropTypes.string.isRequired, + descr: PropTypes.string.isRequired, + mainFrame: PropTypes.number.isRequired, + pluginCode: PropTypes.string, + template: PropTypes.string.isRequired, + extraProperties: PropTypes.string, + configuration: PropTypes.shape({ + frames: PropTypes.shape({ + pos: PropTypes.string.isRequired, + descr: PropTypes.string.isRequired, + defaultWidget: PropTypes.shape({ + code: PropTypes.string.isRequired, + }).isRequired, + sketch: PropTypes.shape({ + x1: PropTypes.number.isRequired, + x2: PropTypes.number.isRequired, + y1: PropTypes.number.isRequired, + y2: PropTypes.number.isRequired, + }), }), - }), - }).isRequired, - removePageTemplate: PropTypes.func.isRequired, - }), -}.isRequired; + }).isRequired, + removePageTemplate: PropTypes.func.isRequired, + }), + }.isRequired; export default PageTemplatePreview; From 943cf8041f86595f8cdeb6b9eaf49f1d8e63869f Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Mon, 9 Dec 2024 10:52:02 +0100 Subject: [PATCH 052/211] add Button component --- package.json | 4 +- sass/common/Button.scss | 20 +++++++++ sass/index.scss | 1 + sass/pages/settings/ModalPageSettings.scss | 48 ++++++++++++++++++++++ sass/patternfly.scss | 6 +-- src/ui/common/Button.js | 22 ++++++++++ src/ui/pages/common/PageSettingsForm.js | 7 ++-- 7 files changed, 98 insertions(+), 10 deletions(-) create mode 100644 sass/common/Button.scss create mode 100644 sass/pages/settings/ModalPageSettings.scss create mode 100644 src/ui/common/Button.js diff --git a/package.json b/package.json index 70cf57b24..8f3ee9f3c 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "lint": "eslint ./src", "coverage": "node scripts/test.js --env=jest-environment-jsdom-sixteen --coverage", "sass-lint": "sass-lint -v", - "precommit": "npm run lint && npm run sass-lint && npm run coverage", + "pre-commit": "npm run lint && npm run sass-lint && npm run coverage", "build-full": "npm run precommit && npm run import-plugins && node scripts/build.js", "start-openshift": "npm install -g serve && serve -l 8080 -s build", "analyze": "source-map-explorer build/static/js/main.*", @@ -248,4 +248,4 @@ "msw": { "workerDirectory": "public" } -} +} \ No newline at end of file diff --git a/sass/common/Button.scss b/sass/common/Button.scss new file mode 100644 index 000000000..97e27515f --- /dev/null +++ b/sass/common/Button.scss @@ -0,0 +1,20 @@ +.Button { + border-radius: $spacing-8; + font-size: 14px; + font-weight: 500; + font-family: "Inter"; + padding-inline: 16px; + + .btn-primary, + .btn-primary:active, + .btn-primary:focus { + background-color: $color-brand-primary; + border: none; + } + + &.clear { + background-color: transparent; + color: $color-brand-primary; + border: none; + } +} \ No newline at end of file diff --git a/sass/index.scss b/sass/index.scss index c8ad8858d..0c75fbb9a 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -85,6 +85,7 @@ @import 'common/form/FiltersSelectRenderer'; @import 'common/form/FilterValueOptionSelector'; @import 'common/form/RenderDateFilterInput'; +@import 'common/Button'; @import 'common/CMSShell'; @import 'common/CMSPageTitle'; @import 'common/cross-browser'; diff --git a/sass/pages/settings/ModalPageSettings.scss b/sass/pages/settings/ModalPageSettings.scss new file mode 100644 index 000000000..b8ebb0519 --- /dev/null +++ b/sass/pages/settings/ModalPageSettings.scss @@ -0,0 +1,48 @@ +.ModalPageSettings { + display: flex; + justify-items: flex-end; + + .modal-header { + background-color: transparent; + + h4 { + font-size: 20px; + font-weight: 500; + color: $color-text-secondary; + } + + .close { + font-size: 30px; + } + } + + .modal-dialog { + height: 100vh; + margin: 0; + } + + .modal-content { + min-height: fit-content; + height: 100vh; + padding: 24px; + + .form-group { + display: flex; + flex-direction: column; + width: 100%; + + &>div { + width: 100%; + display: flex; + } + + label { + font-size: 14px; + font-weight: 500; + } + } + } + + + +} \ No newline at end of file diff --git a/sass/patternfly.scss b/sass/patternfly.scss index a265fffb7..f414962ae 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -131,7 +131,7 @@ $fa-square-o: '\f096'; .btn-primary, .btn-primary:active, .btn-primary:focus { - background-color: $color-primary !important; // sass-lint:disable-line no-important + background-color: $color-brand-primary !important; // sass-lint:disable-line no-important } .btn-primary:hover { @@ -145,10 +145,6 @@ $fa-square-o: '\f096'; .btn-link { font-size: 16px; - &.primary { - color: $color-brand-primary; - } - &.secondary { color: $color-content-3; } diff --git a/src/ui/common/Button.js b/src/ui/common/Button.js new file mode 100644 index 000000000..73ab57c0a --- /dev/null +++ b/src/ui/common/Button.js @@ -0,0 +1,22 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Button as PatternFlyButton } from 'patternfly-react'; + +const Button = ({ children, className, ...rest }) => ( + {children} +); + +Button.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.node, + ]).isRequired, + className: PropTypes.string, +}; + +Button.defaultProps = { + className: '', +}; + + +export default Button; diff --git a/src/ui/pages/common/PageSettingsForm.js b/src/ui/pages/common/PageSettingsForm.js index b40d26122..5ffbc0cfc 100644 --- a/src/ui/pages/common/PageSettingsForm.js +++ b/src/ui/pages/common/PageSettingsForm.js @@ -8,6 +8,7 @@ import RenderRadioInput from 'ui/common/form/RenderRadioInput'; import SwitchRenderer from 'ui/common/form/SwitchRenderer'; import RenderSelectInput from 'ui/common/form/RenderSelectInput'; import FormLabel from 'ui/common/form/FormLabel'; +import Button from 'ui/common/Button'; const baseUrlMessages = defineMessages({ relative: { @@ -235,13 +236,13 @@ export class PageSettingsFormBody extends Component {
- +
From 7628c82be5134d3d3978899c7ecafe888fba0e4b Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Mon, 9 Dec 2024 11:26:17 +0100 Subject: [PATCH 053/211] minor style change Pages/Management --- sass/common/Button.scss | 14 ++++++++++++-- sass/pages/common/PageTree.scss | 5 +++++ src/ui/pages/list/PageTreePage.js | 16 +++++++--------- 3 files changed, 24 insertions(+), 11 deletions(-) diff --git a/sass/common/Button.scss b/sass/common/Button.scss index 97e27515f..f1096c1a6 100644 --- a/sass/common/Button.scss +++ b/sass/common/Button.scss @@ -2,8 +2,11 @@ border-radius: $spacing-8; font-size: 14px; font-weight: 500; - font-family: "Inter"; + font-family: Inter; padding-inline: 16px; + display: flex; + gap: 8px; + align-items: center; .btn-primary, .btn-primary:active, @@ -14,7 +17,14 @@ &.clear { background-color: transparent; - color: $color-brand-primary; border: none; + + &:not(.secondary) { + color: $color-brand-primary; + } + + &.secondary { + color: $color-text-secondary; + } } } \ No newline at end of file diff --git a/sass/pages/common/PageTree.scss b/sass/pages/common/PageTree.scss index bbf7124fa..bbd3ede2a 100644 --- a/sass/pages/common/PageTree.scss +++ b/sass/pages/common/PageTree.scss @@ -91,6 +91,10 @@ } } +.Button { + font-weight: 600; +} + .PageStatusIcon { line-height: 24px; } @@ -164,6 +168,7 @@ } + // Bootstrap overrides // sass-lint:disable force-element-nesting, no-qualifying-elements, class-name-format .table-bordered>tbody>tr>td.PageTree__tree-column-td { diff --git a/src/ui/pages/list/PageTreePage.js b/src/ui/pages/list/PageTreePage.js index d047af798..3ce6cc148 100644 --- a/src/ui/pages/list/PageTreePage.js +++ b/src/ui/pages/list/PageTreePage.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb, Button } from 'patternfly-react'; +import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; import { Link } from 'react-router-dom'; import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; @@ -9,11 +9,13 @@ import PageTitle from 'ui/internal-page/PageTitle'; import PageSearchForm from 'ui/pages/list/PageSearchForm'; import PageTreeContainer from 'ui/pages/common/PageTreeContainer'; import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; +import ModalPageSettings from 'ui/pages/settings/ModalPageSettings'; +import Button from 'ui/common/Button'; import AppTourContainer from 'ui/app-tour/AppTourContainer'; import { ROUTE_PAGE_ADD } from 'app-init/router'; import { withPermissionValues } from 'ui/auth/withPermissions'; import Icon from 'ui/common/Icon'; -import ModalPageSettings from '../settings/ModalPageSettings'; + class PageTreePage extends Component { componentWillMount() { @@ -59,17 +61,13 @@ class PageTreePage extends Component { - + From f127a3332a35f148916f8c3d7777e7d63c2ebebe Mon Sep 17 00:00:00 2001 From: Marco Cucinotta Date: Mon, 9 Dec 2024 12:15:44 +0100 Subject: [PATCH 054/211] chore: minor change --- src/ui/page-templates/list/PageTemplatePreview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/page-templates/list/PageTemplatePreview.js b/src/ui/page-templates/list/PageTemplatePreview.js index 18aacff31..116213c34 100644 --- a/src/ui/page-templates/list/PageTemplatePreview.js +++ b/src/ui/page-templates/list/PageTemplatePreview.js @@ -14,7 +14,7 @@ const PageTemplatePreview = ({ item, actions }) => {
{actions}
- )} + )}
@@ -48,8 +48,8 @@ PageTemplatePreview.propTypes = }), }), }).isRequired, - removePageTemplate: PropTypes.func.isRequired, }), + action: PropTypes.func, }.isRequired; export default PageTemplatePreview; From 6b019848448c538598b6655da5097b578f44fd19 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 9 Dec 2024 14:46:02 +0100 Subject: [PATCH 055/211] feat: Micro Frontends & Widgets tables updated with new style --- sass/widgets/list/WidgetListTable.scss | 64 +++++++++++++++++++++++++- src/ui/widgets/list/WidgetListTable.js | 39 +++++----------- 2 files changed, 75 insertions(+), 28 deletions(-) diff --git a/sass/widgets/list/WidgetListTable.scss b/sass/widgets/list/WidgetListTable.scss index 3c50ff23c..f5982ba5e 100644 --- a/sass/widgets/list/WidgetListTable.scss +++ b/sass/widgets/list/WidgetListTable.scss @@ -1,4 +1,66 @@ .WidgetListTable__type { - margin: 0 0 1em 0 ; + margin: 0 0 1em 0; border-bottom: 1px solid $color-pf-black-200; } + +.WidgetListTable { + + .header-container { + display: flex; + align-items: center; + gap: 20px; + } + + .table-bordered { + border: $color-border-grey solid 1px; + } + + .table-header { + background-color: #fff; + border-bottom: 1px solid $color-border-grey; + + td { + border: 1px solid #e4e7ec; + border-left: 0; + border-right: 0; + border-bottom: 0; + } + + .columnResizer { + border-bottom: 1px solid $color-border-grey; + } + + th { + padding: 16px; + border-left: 0; + border-right: 0; + border-bottom: 0; + border-color: $color-border-grey; + } + } + + .table-row { + border-bottom: 1px solid $color-border-grey; + + td { + border: 0 + } + + .colForResize { + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-bottom: 1px solid $color-border-grey; + } + } + + .table-cell { + vertical-align: middle !important; + padding-inline: 16px !important; + padding-block: 8px !important; + } + + .titles { + display: flex; + align-items: center; + } +} \ No newline at end of file diff --git a/src/ui/widgets/list/WidgetListTable.js b/src/ui/widgets/list/WidgetListTable.js index 11ea4e433..38e5dcd50 100644 --- a/src/ui/widgets/list/WidgetListTable.js +++ b/src/ui/widgets/list/WidgetListTable.js @@ -1,12 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; - import { Col, DropdownKebab, MenuItem } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import { DataTable } from '@entando/datatable'; import { routeConverter } from '@entando/utils'; import { Link } from 'react-router-dom'; - import WidgetSectionTitle from 'ui/widgets/list/WidgetSectionTitle'; import WidgetIcon from 'ui/widgets/common/WidgetIcon'; import { ROUTE_WIDGET_EDIT } from 'app-init/router'; @@ -26,7 +24,7 @@ export const WidgetListTableBody = ({ const nameCell = (cellinfo) => { const { row: { original: item } } = cellinfo; return ( -
+
   , - attributes: { - style: { width: '40%' }, - }, + attributes: { style: { width: '40%' } }, Cell: nameCell, }, code: { Header: , - attributes: { - style: { width: '40%' }, - }, + attributes: { style: { width: '40%' } }, }, used: { Header: , - attributes: { - className: 'text-center', - style: { width: '10%' }, - }, + attributes: { className: 'text-center', style: { width: '10%' } }, + cellAttributes: { className: 'text-center' }, }, }; - const columns = columnOrder.map(column => ({ - ...columnDefs[column], - accessor: column, - })); + const columns = columnOrder.map(column => ({ ...columnDefs[column], accessor: column })); const rowAction = isSuperuser ? ({ Header: , - attributes: { - className: 'text-center', - style: { width: '10%' }, - }, - cellAttributes: { - className: 'text-center', - }, + attributes: { className: 'text-center', style: { width: '10%' } }, + cellAttributes: { className: 'text-center' }, Cell: (cellinfo) => { const { values: { code }, original: { locked, hasConfig, used } } = cellinfo; return ( @@ -122,9 +106,10 @@ export const WidgetListTableBody = ({ columnResizable onColumnReorder={onSetColumnOrder} classNames={{ - table: 'table-striped table-hover', - row: 'WidgetListRow', - cell: 'WidgetListRow__td', + table: 'WidgetListTable table-hover table-treegrid table-bordered', + headerGroup: 'table-header', + row: 'table-row', + cell: 'table-cell', }} /> From 5883e1932fa431ee7b66449069597c2466038881 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 9 Dec 2024 16:46:24 +0100 Subject: [PATCH 056/211] refactor Design Page --- sass/pages/common/PageTreeCompact.scss | 15 +- sass/pages/config/ContentPages.scss | 42 +++-- sass/pages/config/EmptyFrame.scss | 8 +- sass/pages/config/PageConfigGrid.scss | 1 - sass/pages/config/PageConfigGridCol.scss | 5 + sass/pages/config/PageConfigGridRow.scss | 4 + sass/pages/config/WidgetFrame.scss | 62 +++++-- sass/patternfly.scss | 2 + src/ui/pages/common/PageTreeCompact.js | 205 +++++++++++++---------- src/ui/pages/config/ContentPages.js | 36 +++- src/ui/pages/config/WidgetFrame.js | 143 ++++++++++------ src/ui/widgets/common/WidgetIcon.js | 33 ++-- 12 files changed, 362 insertions(+), 194 deletions(-) diff --git a/sass/pages/common/PageTreeCompact.scss b/sass/pages/common/PageTreeCompact.scss index 6f6f059a4..e3ffa68be 100644 --- a/sass/pages/common/PageTreeCompact.scss +++ b/sass/pages/common/PageTreeCompact.scss @@ -55,7 +55,7 @@ &.table > tbody > &__row--selected { &, &:hover { - background-color: $color-dragitem-bg; + color:$color-neutral-grey; } } // sass-lint:enable force-element-nesting nesting-depth no-qualifying-elements class-name-format @@ -79,15 +79,16 @@ // Bootstrap overrides // sass-lint:disable force-element-nesting, no-qualifying-elements, class-name-format -.PageTreeCompact.table > tbody > tr:hover, -.PageTreeCompact.table > tbody > tr:hover > td, -.PageTreeCompact.table > tbody > tr:hover > th { - background-color: $color-dragitem-bg; -} +// .PageTreeCompact.table > tbody > tr:hover, +// .PageTreeCompact.table > tbody > tr:hover > td, +// .PageTreeCompact.table > tbody > tr:hover > th { +// background-color: $color-neutral-grey; +// } .PageTreeCompact.table > tbody > tr > td { padding: 10px 0; border-top: 0; - color: $color-white; + font-weight: 600; + color: $color-primary-text; } // sass-lint:enable force-element-nesting, no-qualifying-elements, class-name-format diff --git a/sass/pages/config/ContentPages.scss b/sass/pages/config/ContentPages.scss index d91a28f40..7da082516 100644 --- a/sass/pages/config/ContentPages.scss +++ b/sass/pages/config/ContentPages.scss @@ -8,15 +8,33 @@ &__pagetree-searchbar { display: flex; - width: 100%; + align-items: center; + gap: 4px; + border: 1px solid $color-content-07; + border-radius: $radius-xxs; + + input{ + border: none; + color: $color-text-tertiary; + font-size: 14px; + height: 30px; + //@TODO - container outline on focus + + + &::placeholder { + font-style: normal; + } + } } // sass-lint:disable no-important class-name-format force-element-nesting &__pagetree-searchbtn.btn { - border: 1px solid $color-border-gray !important; - border-left: 0 !important; + border: none; + border-left: 1px solid $color-neutral-grey; outline: none !important; box-shadow: none !important; + background-color: $color-neutral-grey; + height: 100%; } // sass-lint:enable no-important class-name-format force-element-nesting @@ -25,9 +43,9 @@ align-items: center; justify-content: space-between; padding: 10px 20px; - border-top: 1px solid $color-black; - border-bottom: 1px solid $color-black; - color: $color-white; + border-top: 1px solid $color-neutral-grey; + border-bottom: 1px solid $color-neutral-grey; + color: $color-primary-text; font-size: 14px; } @@ -45,19 +63,19 @@ &__pagetree-addbtn { background-color: $color-light-blue-2; - color: $color-white; + color: $color-primary-text; // sass-lint:disable nesting-depth force-element-nesting &:hover { background-color: $color-light-blue-hover; - color: $color-white; + color: $color-primary-text; } &:focus, &:focus:hover { outline: none; background-color: $color-light-blue-active; - color: $color-white; + color: $color-primary-text; } // sass-lint:enable nesting-depth force-element-nesting } @@ -80,7 +98,7 @@ & .table { margin-top: 0; border: 1px solid $color-black; - color: $color-white; + color: $color-primary-text; } & thead, @@ -101,12 +119,12 @@ } & .dropdown-kebab-pf .btn { - color: $color-white !important; + color: $color-primary-text !important; } & .table-view-pf-pagination { background: none; - color: $color-white; + color: $color-primary-text; } } // sass-lint:enable nesting-depth no-qualifying-elements force-element-nesting class-name-format no-important diff --git a/sass/pages/config/EmptyFrame.scss b/sass/pages/config/EmptyFrame.scss index 22518365a..1ef51807a 100644 --- a/sass/pages/config/EmptyFrame.scss +++ b/sass/pages/config/EmptyFrame.scss @@ -2,12 +2,16 @@ width: 100%; height: 100%; padding: 3px 8px; - border: 1px dashed $color-pf-black-400; background: $color-pf-black-100; color: $color-pf-black-400; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + &--drag-hover { - border: 1px solid $color-pf-orange-300; + border: 1.5px solid $color-brand-primary; background: $color-pf-black-200; } } diff --git a/sass/pages/config/PageConfigGrid.scss b/sass/pages/config/PageConfigGrid.scss index 0cb4a65e5..1346e7380 100644 --- a/sass/pages/config/PageConfigGrid.scss +++ b/sass/pages/config/PageConfigGrid.scss @@ -1,5 +1,4 @@ .PageConfigGrid { width: 100%; - border: 1px solid $color-pf-black-400; border-radius: 1px; } diff --git a/sass/pages/config/PageConfigGridCol.scss b/sass/pages/config/PageConfigGridCol.scss index 67ef8e5b6..6636d28a4 100644 --- a/sass/pages/config/PageConfigGridCol.scss +++ b/sass/pages/config/PageConfigGridCol.scss @@ -1,8 +1,13 @@ .PageConfigGridCol { +background-color: $color-white; +border: 1px dashed $color-neutral-grey; + &.PageConfigGridCol--frame { flex-grow: 1; min-height: 80px; + padding: 8px; + border: 0; } &.PageConfigGridCol--hole { diff --git a/sass/pages/config/PageConfigGridRow.scss b/sass/pages/config/PageConfigGridRow.scss index 1d68d0093..582e0f481 100644 --- a/sass/pages/config/PageConfigGridRow.scss +++ b/sass/pages/config/PageConfigGridRow.scss @@ -2,4 +2,8 @@ display: flex; flex-grow: 1; width: 100%; + + &:not(:last-child) { + border-bottom: 1px dashed $color-neutral-grey; + } } diff --git a/sass/pages/config/WidgetFrame.scss b/sass/pages/config/WidgetFrame.scss index e52dfc0e0..4a6da7caa 100644 --- a/sass/pages/config/WidgetFrame.scss +++ b/sass/pages/config/WidgetFrame.scss @@ -3,47 +3,79 @@ width: 100%; height: 100%; margin: 0; - padding: 2px; - border: 1px dashed $color-pf-black-400; + padding: 8px; + background-color: $color-grey-background-tertiary; + border-radius: 4px; + &__content { left: 10px; width: 100%; + padding: 8px; height: 100%; - padding: 5px; - border: 1px solid $color-pf-black-600; - border-radius: 3px; + border: 1.5px solid $color-border-primary; + border-radius: 4px; color: $color-pf-black-800; text-align: center; cursor: move; + background-color: $color-white; + outline: none; + display: flex; + align-items: center; + flex-direction: row-reverse; + justify-content: center; + gap: 20px; } &__frame-name { - position: absolute; - left: 10px; + position: absolute; color: $color-pf-black-400; + width: 100%; } - &__menu-button { - position: absolute; - top: 2px; - right: 10px; - } + + + &__descriptor { display: flex; - flex-direction: column; + flex-direction: row; justify-content: center; + align-items: center; + flex-wrap: wrap; height: 100%; + border-color: $color-brand-primary; + gap:8px; + font-size: 14px; + font-weight: 500; + color: $color-brand-primary; + + .WidgetIconContainer{ + width: 25px; + height: 25px; + background-color: $color-background-icons; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + + .fa{ + height: 13px; + color: $color-brand-primary; + font-size: 0.94em; + } + } + } &--drag-hover { - border: 1px solid $color-pf-orange-300; - background: $color-pf-black-200; + border: 1.5px solid $color-brand-primary; } } .WidgetFrame--main-frame { + min-height: 120px; // Main frame label .WidgetFrame__frame-name:after { display: inline; diff --git a/sass/patternfly.scss b/sass/patternfly.scss index ea9205332..a76388c6c 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -74,6 +74,8 @@ $color-draft-200: #faf1d9; $color-unpublished-new: #637083; $color-unpublished-light: #d8d8d8; $color-grey-background-tertiary:#F2F4F7; +$color-border-primary:#99C2FF; +$color-background-icons: #F0F6FF; //FontAwesome icons diff --git a/src/ui/pages/common/PageTreeCompact.js b/src/ui/pages/common/PageTreeCompact.js index 56334d836..4544d4535 100644 --- a/src/ui/pages/common/PageTreeCompact.js +++ b/src/ui/pages/common/PageTreeCompact.js @@ -5,26 +5,43 @@ import { DropdownKebab, MenuItem } from 'patternfly-react'; import PageStatusIcon from 'ui/pages/common/PageStatusIcon'; import TreeNodeExpandedIcon from 'ui/common/tree-node/TreeNodeExpandedIcon'; import RowSpinner from 'ui/pages/common/RowSpinner'; -import { PAGE_STATUS_DRAFT, PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED } from 'state/pages/const'; +import { + PAGE_STATUS_DRAFT, + PAGE_STATUS_PUBLISHED, + PAGE_STATUS_UNPUBLISHED, +} from 'state/pages/const'; import { getIsRootAndVirtual } from './PageTree'; class PageTreeCompact extends Component { renderRows() { const { - pages, onClickDetails, onClickAdd, onClickEdit, onClickConfigure, - onClickClone, onClickDelete, onClickUnPublish, onClickPublish, - onRowClick, onClickViewPublishedPage, onClickPreview, selectedPage, - domain, locale, loadOnPageSelect, myGroupIds, virtualRootOn, + pages, + onClickDetails, + onClickAdd, + onClickEdit, + onClickConfigure, + onClickClone, + onClickDelete, + onClickUnPublish, + onClickPublish, + onRowClick, + onClickViewPublishedPage, + onClickPreview, + selectedPage, + domain, + locale, + loadOnPageSelect, + myGroupIds, + virtualRootOn, } = this.props; const handleClick = (handler, page) => (e) => { e.stopPropagation(); return handler && handler(page); }; - const handleClickViewPublishedPage = (handler, page) => - () => handler && handler(page, domain, locale); - const handleClickPreview = (handler, page) => - () => handler && handler(page, domain); + const handleClickViewPublishedPage = (handler, page) => () => + handler && handler(page, domain, locale); + const handleClickPreview = (handler, page) => () => handler && handler(page, domain); return pages.map((page, i) => { const disableDueToLackOfGroupAccess = !myGroupIds.includes(page.ownerGroup); const onClickExpand = () => { @@ -44,20 +61,24 @@ class PageTreeCompact extends Component { if (page.expanded) { disabled = page.hasPublishedChildren; } - const publishedDisabled = (page.status === PAGE_STATUS_UNPUBLISHED - && page.parentStatus === PAGE_STATUS_UNPUBLISHED) || disableDueToLackOfGroupAccess; - const changePublishStatus = page.status === PAGE_STATUS_PUBLISHED ? - ( + const publishedDisabled = + (page.status === PAGE_STATUS_UNPUBLISHED && + page.parentStatus === PAGE_STATUS_UNPUBLISHED) || + disableDueToLackOfGroupAccess; + const changePublishStatus = + page.status === PAGE_STATUS_PUBLISHED ? ( - ) : - ( + ) : ( ); - const viewPublishedPage = page.status === PAGE_STATUS_PUBLISHED ? - ( + const viewPublishedPage = + page.status === PAGE_STATUS_PUBLISHED ? ( - ) : - ( - + ) : ( + ); - const deletionDisabled = !page.isEmpty || page.status === PAGE_STATUS_PUBLISHED || - page.status === PAGE_STATUS_DRAFT || disableDueToLackOfGroupAccess; + const deletionDisabled = + !page.isEmpty || + page.status === PAGE_STATUS_PUBLISHED || + page.status === PAGE_STATUS_DRAFT || + disableDueToLackOfGroupAccess; const renderDeleteItem = () => ( (isRootAndVirtual ? null : onRowClick(page))} @@ -121,77 +145,82 @@ class PageTreeCompact extends Component { > {!loadOnPageSelect && ( - - {page.title} - + {page.title} )} {loadOnPageSelect && ( - - {page.title} - + {page.title} )}
- { - isRootAndVirtual ? null : ( - - - - ) - } + {isRootAndVirtual ? null : ( + + + + )} - { - isRootAndVirtual ? null : ( -
e.stopPropagation()} role="none"> - - - - - {onClickEdit && ( + {isRootAndVirtual ? null : ( +
e.stopPropagation()} role="none"> + + + + + {onClickEdit && ( - )} - {onClickConfigure && ( + )} + {onClickConfigure && ( - )} - {onClickDetails && ( + )} + {onClickDetails && ( - )} - - - - {renderDeleteItem()} - {changePublishStatus} - - - - {viewPublishedPage} - -
- - ) - } + )} + + + + {renderDeleteItem()} + {changePublishStatus} + + + + {viewPublishedPage} + +
+ )} - + ); }); } @@ -201,23 +230,23 @@ class PageTreeCompact extends Component { return ( - - {this.renderRows()} - + {this.renderRows()}
); } } PageTreeCompact.propTypes = { - pages: PropTypes.arrayOf(PropTypes.shape({ - code: PropTypes.string.isRequired, - status: PropTypes.string.isRequired, - title: PropTypes.string.isRequired, - depth: PropTypes.number.isRequired, - expanded: PropTypes.bool.isRequired, - isEmpty: PropTypes.bool.isRequired, - })), + pages: PropTypes.arrayOf( + PropTypes.shape({ + code: PropTypes.string.isRequired, + status: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + depth: PropTypes.number.isRequired, + expanded: PropTypes.bool.isRequired, + isEmpty: PropTypes.bool.isRequired, + }), + ), selectedPage: PropTypes.shape({ code: PropTypes.string, }), diff --git a/src/ui/pages/config/ContentPages.js b/src/ui/pages/config/ContentPages.js index 40b293d57..c1d9a3d58 100644 --- a/src/ui/pages/config/ContentPages.js +++ b/src/ui/pages/config/ContentPages.js @@ -10,6 +10,7 @@ import DeletePageModalContainer from 'ui/pages/common/DeletePageModalContainer'; import PublishPageModalContainer from 'ui/pages/common/PublishPageModalContainer'; import UnpublishPageModalContainer from 'ui/pages/common/UnpublishPageModalContainer'; import PageListSearchTable from 'ui/pages/list/PageListSearchTable'; +import Search from 'ui/common/Search'; const msgs = defineMessages({ searchPlaceholder: { @@ -104,13 +105,29 @@ class ContentPages extends Component { render() { const { - loading, onExpandPage, pages, intl, searchPages, - onClear, loadOnPageSelect, onLoadPage, myGroupIds, + loading, + onExpandPage, + pages, + intl, + searchPages, + onClear, + loadOnPageSelect, + onLoadPage, + myGroupIds, virtualRootOn, } = this.props; const { expanded } = this.state; - const selectedPage = loadOnPageSelect ? this.props.selectedPage : this.state.selectedPage; + const selectedPage = loadOnPageSelect + ? this.props.selectedPage + : this.state.selectedPage; + + const inputProps = { + className: 'form-control', + placeholder: intl.formatMessage(msgs.searchPlaceholder), + onChange: this.handleSearchInputChange, + onKeyDown: this.handleSearchInputKeyDown, + }; return (
@@ -129,7 +146,10 @@ class ContentPages extends Component {
- + @@ -154,7 +174,9 @@ class ContentPages extends Component { role="button" tabIndex="0" > - +
)} @@ -162,7 +184,9 @@ class ContentPages extends Component { {searchPages && searchPages.length ? ( {}} diff --git a/src/ui/pages/config/WidgetFrame.js b/src/ui/pages/config/WidgetFrame.js index 050f4ebe8..2e0571157 100644 --- a/src/ui/pages/config/WidgetFrame.js +++ b/src/ui/pages/config/WidgetFrame.js @@ -6,49 +6,67 @@ import { Link } from 'react-router-dom'; import { routeConverter } from '@entando/utils'; import { ROUTE_WIDGET_DETAIL, ROUTE_WIDGET_EDIT } from 'app-init/router'; -import { WIDGET_STATUS_MATCH, WIDGET_STATUS_DIFF, WIDGET_STATUS_REMOVED } from 'state/page-config/const'; +import { + WIDGET_STATUS_MATCH, + WIDGET_STATUS_DIFF, + WIDGET_STATUS_REMOVED, +} from 'state/page-config/const'; import WidgetIcon from 'ui/widgets/common/WidgetIcon'; - class WidgetFrame extends Component { render() { const { - widgetId, widgetName, widgetHasConfig, widgetStatus, frameId, frameName, frameIsMainFrame, - onClickDelete, connectDragSource, connectDropTarget, isOver, onClickSettings, onClickSaveAs, - configUiName, widgetHasConfigForm, + widgetId, + widgetName, + widgetHasConfig, + widgetStatus, + frameId, + frameName, + frameIsMainFrame, + onClickDelete, + connectDragSource, + connectDropTarget, + isOver, + onClickSettings, + onClickSaveAs, + configUiName, + widgetHasConfigForm, } = this.props; let actionsMenu = null; if (widgetStatus !== WIDGET_STATUS_REMOVED) { - const configMenuItems = widgetHasConfig && (configUiName || widgetHasConfigForm) ? - [ - ( - onClickSettings && onClickSettings(frameId)} - > - - - ), - ] : - null; - const cloneMenuItems = widgetHasConfig && configUiName ? [ - ( - onClickSaveAs && onClickSaveAs({ - widgetId, - widgetHasConfig, - frameId, - configUiName, - })} - > - - - ), - ] : null; + const configMenuItems = + widgetHasConfig && (configUiName || widgetHasConfigForm) + ? [ + onClickSettings && onClickSettings(frameId)} + > + + , + ] + : null; + const cloneMenuItems = + widgetHasConfig && configUiName + ? [ + + onClickSaveAs && + onClickSaveAs({ + widgetId, + widgetHasConfig, + frameId, + configUiName, + }) + } + > + + , + ] + : null; actionsMenu = ( - { configMenuItems } + {configMenuItems} {cloneMenuItems} @@ -90,6 +108,7 @@ class WidgetFrame extends Component { } const classNameAr = ['WidgetFrame']; + const classNameInternalWidgetContent = ['WidgetFrame__content']; if (isOver) { classNameAr.push('WidgetFrame--drag-hover'); } @@ -97,22 +116,41 @@ class WidgetFrame extends Component { classNameAr.push('WidgetFrame--main-frame'); } switch (widgetStatus) { - case WIDGET_STATUS_DIFF: classNameAr.push('WidgetFrame--status-diff'); break; - case WIDGET_STATUS_MATCH: classNameAr.push('WidgetFrame--status-match'); break; - case WIDGET_STATUS_REMOVED: classNameAr.push('WidgetFrame--status-removed'); break; - default: break; + case WIDGET_STATUS_DIFF: + classNameAr.push('WidgetFrame--status-diff'); + classNameInternalWidgetContent.push('WidgetFrame--status-diff'); + break; + case WIDGET_STATUS_MATCH: + classNameAr.push('WidgetFrame--status-match'); + classNameInternalWidgetContent.push('WidgetFrame--status-match'); + break; + case WIDGET_STATUS_REMOVED: + classNameAr.push('WidgetFrame--status-removed'); + classNameInternalWidgetContent.push('WidgetFrame--status-removed'); + break; + default: + break; } + let component = (
-
-
- {frameName} -
- { actionsMenu } -
- - { widgetName } -
+
+ {widgetStatus !== WIDGET_STATUS_MATCH && ( +
{frameName}
+ )} + + {actionsMenu} + {widgetStatus === WIDGET_STATUS_MATCH && ( +
+
+ +
+ {widgetName} +
+ )}
); @@ -127,14 +165,16 @@ class WidgetFrame extends Component { } } - WidgetFrame.propTypes = { - frameName: PropTypes.string.isRequired, frameIsMainFrame: PropTypes.bool.isRequired, widgetName: PropTypes.string.isRequired, widgetHasConfig: PropTypes.bool, - widgetStatus: PropTypes.oneOf([WIDGET_STATUS_MATCH, WIDGET_STATUS_DIFF, WIDGET_STATUS_REMOVED]), + widgetStatus: PropTypes.oneOf([ + WIDGET_STATUS_MATCH, + WIDGET_STATUS_DIFF, + WIDGET_STATUS_REMOVED, + ]), configUiName: PropTypes.string, widgetHasConfigForm: PropTypes.bool, @@ -168,5 +208,4 @@ WidgetFrame.defaultProps = { widgetHasConfigForm: false, }; - export default WidgetFrame; diff --git a/src/ui/widgets/common/WidgetIcon.js b/src/ui/widgets/common/WidgetIcon.js index 76cd81ecb..6c532a987 100644 --- a/src/ui/widgets/common/WidgetIcon.js +++ b/src/ui/widgets/common/WidgetIcon.js @@ -9,22 +9,33 @@ import { useDynamicResourceUrl } from 'hooks/useDynamicResourceUrl'; const publicUrl = process.env.PUBLIC_URL; const fallbackIcon = `${publicUrl}/images/puzzle-piece-solid.svg`; -const WidgetIcon = ({ - widgetId, small, icon, className, -}) => { +const WidgetIcon = ({ widgetId, small, icon, className }) => { const storeIcon = useSelector(getWidgetIcon(widgetId)); const [iconType, iconName] = (icon || storeIcon || '').split(':'); const imageProvider = useDynamicResourceUrl('static/widget-icons'); - return iconType === 'font-awesome' - ? - : {`icon { e.target.onerror = null; e.target.src = fallbackIcon; }} - />; + return iconType === 'font-awesome' ? ( + + ) : ( + {`icon { + e.target.onerror = null; + e.target.src = fallbackIcon; + }} + /> + ); }; WidgetIcon.propTypes = { From 16e0c56459920efb3a0a1073691588a38faee701 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 9 Dec 2024 17:58:39 +0100 Subject: [PATCH 057/211] (designer page) edit on list view widgets --- sass/pages/config/WidgetFrame.scss | 5 +++++ sass/pages/config/WidgetGroupingItem.scss | 1 + sass/pages/config/WidgetGroupingListItem.scss | 14 +++++++++++--- 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/sass/pages/config/WidgetFrame.scss b/sass/pages/config/WidgetFrame.scss index 4a6da7caa..2ea6d8449 100644 --- a/sass/pages/config/WidgetFrame.scss +++ b/sass/pages/config/WidgetFrame.scss @@ -65,6 +65,11 @@ color: $color-brand-primary; font-size: 0.94em; } + + img{ + height: 13px; + filter: invert(24%) sepia(91%) saturate(2456%) hue-rotate(211deg) brightness(100%) contrast(95%); + } } } diff --git a/sass/pages/config/WidgetGroupingItem.scss b/sass/pages/config/WidgetGroupingItem.scss index 9cb6c031e..6c582fffb 100644 --- a/sass/pages/config/WidgetGroupingItem.scss +++ b/sass/pages/config/WidgetGroupingItem.scss @@ -2,6 +2,7 @@ width: calc(50% - 20px); margin-bottom: 10px; border: 0; + cursor: grab; diff --git a/sass/pages/config/WidgetGroupingListItem.scss b/sass/pages/config/WidgetGroupingListItem.scss index cb0a81301..6630dacba 100644 --- a/sass/pages/config/WidgetGroupingListItem.scss +++ b/sass/pages/config/WidgetGroupingListItem.scss @@ -4,7 +4,14 @@ height: 50px; margin-bottom: 3px; border: 0; - background-color: $color-dragitem-bg; + background-color: transparent; + cursor: grab; + + &:hover{ + background-color: $color-neutral-grey; + } + + &__wrapper { display: flex; @@ -16,7 +23,7 @@ display: flex; align-items: center; margin-left: 30px; - color: $color-dark-white; + color: $color-text-tertiary; & > img { filter: invert(73%) sepia(38%) saturate(11%) hue-rotate(39deg) brightness(103%) contrast(102%); @@ -34,7 +41,8 @@ } a { - color: $color-dark-white; + color: $color-text-tertiary; + font-weight: 600; font-size: 14px; } } From e53d80ce55227029ff7b077505fe6b27d1e5767a Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 10 Dec 2024 10:41:49 +0100 Subject: [PATCH 058/211] wip: edit VerticalNav style --- sass/internal-page/InternalPage.scss | 78 ++++++++++++++++--- src/ui/internal-page/VerticalMenuContainer.js | 16 ++-- 2 files changed, 76 insertions(+), 18 deletions(-) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index f6147a57c..515b27503 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -111,11 +111,15 @@ &.collapsed { + .VerticalMenu__secondary-collapse-btn { - left: 76px; + left: #{$nav-pf-vertical-width + 14}; + background-color: $color-background-primary; + color: $color-light-blue; + border: none; + box-shadow: none; } + .VerticalMenu__expand-collapse-btn { - width: 75px; + width: 40px; padding-right: 0 !important; padding-left: 0; text-align: center; @@ -152,8 +156,8 @@ } .container-pf-nav-pf-vertical.collapsed-nav { //sass-lint:disable-line class-name-format force-element-nesting - left: 75px; - width: calc(100% - 75px); + left: 40px; + width: calc(100% - 40px); } .container-pf-nav-pf-vertical.hidden-nav { //sass-lint:disable-line class-name-format force-element-nesting @@ -266,8 +270,8 @@ width: 40px; height: 48px; outline: none; - background-color: $color-extra-dark-grey; - color: $color-white; + background-color: $color-background-primary; + color: $color-text-tertiary; font-size: 20px; z-index: 1032; @@ -276,8 +280,8 @@ &:focus, &:active:focus { outline: none; - background-color: $color-extra-dark-grey; - color: $color-white; + background-color: $color-background-primary; + color: $color-text-tertiary; } } @@ -289,8 +293,8 @@ height: 64px; padding-right: 20px !important; outline: none; - background-color: $color-extra-dark-grey; - color: $color-white; + background-color: $color-background-primary; + color: $color-text-tertiary; font-size: 20px; text-align: right; z-index: 1030; @@ -320,3 +324,57 @@ background: $color-white; z-index: 2000; } + +.VerticalMenuContainer { + .nav-pf-vertical, .nav-pf-secondary-nav, .list-group-item.active > a, .list-group-item > a { + background-color: $color-background-primary; + } + + .nav-pf-vertical { + border-right: 1px solid $color-neutral-grey; + padding: 10px 0 0 8px; + width: 40px; + + .list-group { + display: flex; + flex-direction: column; + justify-content: center; + } + + .list-group-item.active a::before { + background: $color-dark-blue; + left: -2px; + border-radius: $radius-s; + width: 28px; + height: 28px; + z-index: -1 + } + + .list-group-item { + border: none; + + a { + height: 40px; + color: $color-text-tertiary; + padding: 0; + + .fa { + font-size: 16px; + } + } + + a:focus, a:active, a:hover, .list-group-item.active>a { + background-color: $color-background-primary; + } + } + + .secondary-nav-item-pf .active { + background-color: $color-background-primary; + } + + .nav-pf-secondary-nav { + left: 40px; + border: 1px solid $color-neutral-grey; + } + } +} \ No newline at end of file diff --git a/src/ui/internal-page/VerticalMenuContainer.js b/src/ui/internal-page/VerticalMenuContainer.js index 311cb5cc1..8503ecf70 100644 --- a/src/ui/internal-page/VerticalMenuContainer.js +++ b/src/ui/internal-page/VerticalMenuContainer.js @@ -79,7 +79,7 @@ const renderCmsMenuItems = (intl, userPermissions, systemReport, currSysConfigAd {}} + onClick={() => { }} iconClass="fa fa-file-text-o" title={intl.formatMessage({ id: 'menu.cms' })} > @@ -222,7 +222,7 @@ const EntandoMenu = ({ }; return ( -
+
{}} + onClick={() => { }} iconClass="fa fa-object-ungroup" title={intl.formatMessage({ id: 'menu.uxComponents', defaultMessage: 'Components' })} > @@ -339,7 +339,7 @@ const EntandoMenu = ({ && ( {}} + onClick={() => { }} iconClass="fa fa-users" title={intl.formatMessage({ id: 'menu.userSettings', defaultMessage: 'Users' })} > @@ -391,7 +391,7 @@ const EntandoMenu = ({ className="VerticalAdminConsoleMenu__fixed-bottom" id="menu-configuration" title={intl.formatMessage({ id: 'menu.settings', defaultMessage: 'Administration' })} - onClick={() => {}} + onClick={() => { }} iconClass="fa fa-cogs" >
{ - headerId ? - : getHeader(onStartTutorial) - } + headerId ? + : getHeader(onStartTutorial) + }
{ menuId && ( From a1752c5672d4c0d51ea014eb8fc22e927642956b Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 10 Dec 2024 11:42:47 +0100 Subject: [PATCH 059/211] fix expanded vertical menu --- sass/internal-page/InternalPage.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index 515b27503..d9c992b48 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -95,14 +95,16 @@ &__fixed-bottom { position: fixed; bottom: 64px; - left: 0; + left: 8px; border-bottom: 0; } } // sass-lint:disable force-element-nesting class-name-format no-important .nav-pf-vertical { - width: auto; + width: 214px; + border-right: 1px solid $color-neutral-grey; + padding: 10px 0 0 8px; .secondary-nav-item-pf > a { width: 214px; @@ -110,8 +112,10 @@ } &.collapsed { + width: 40px; + + .VerticalMenu__secondary-collapse-btn { - left: #{$nav-pf-vertical-width + 14}; + left: #{$nav-pf-vertical-width + 12}; background-color: $color-background-primary; color: $color-light-blue; border: none; @@ -123,6 +127,9 @@ padding-right: 0 !important; padding-left: 0; text-align: center; + color: $color-light-blue; + border: none; + box-shadow: none; } .secondary-nav-item-pf > a::after { @@ -331,10 +338,7 @@ } .nav-pf-vertical { - border-right: 1px solid $color-neutral-grey; - padding: 10px 0 0 8px; - width: 40px; - + .list-group { display: flex; flex-direction: column; From 73bc68f9ee4bd08452772e1a0405924804c31dca Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 10 Dec 2024 14:42:09 +0100 Subject: [PATCH 060/211] minor style change VerticalNav --- sass/internal-page/InternalPage.scss | 114 +++++++++++++++------------ 1 file changed, 63 insertions(+), 51 deletions(-) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index d9c992b48..b98c90007 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -109,27 +109,25 @@ .secondary-nav-item-pf > a { width: 214px; padding-left: 25px; + + &::after { + font-size: 14px; + padding: 0; + } } &.collapsed { width: 40px; - + .VerticalMenu__secondary-collapse-btn { - left: #{$nav-pf-vertical-width + 12}; - background-color: $color-background-primary; - color: $color-light-blue; - border: none; - box-shadow: none; - } - + .VerticalMenu__expand-collapse-btn { width: 40px; padding-right: 0 !important; padding-left: 0; - text-align: center; - color: $color-light-blue; - border: none; - box-shadow: none; + + a { + width: 24px; + } + } .secondary-nav-item-pf > a::after { @@ -255,7 +253,7 @@ .nav-pf-secondary-nav { left: 0; - width: #{$nav-pf-vertical-width + 14}; + // width: #{$nav-pf-vertical-width + 14}; z-index: 1031; } @@ -270,49 +268,63 @@ padding-left: 52px; } -.VerticalMenu__secondary-collapse-btn { - position: fixed; - top: 60px; - left: 0; - width: 40px; - height: 48px; - outline: none; - background-color: $color-background-primary; - color: $color-text-tertiary; - font-size: 20px; - z-index: 1032; - - &:hover, - &:active, - &:focus, - &:active:focus { + +.VerticalMenu { + + &__secondary-collapse-btn, + &__expand-collapse-btn { outline: none; + border: none; + box-shadow: none; background-color: $color-background-primary; color: $color-text-tertiary; + font-size: 20px; + + &:hover, + &:active, + &:focus, + &:active, + &:active:focus { + outline: none; + border: none; + background-color: $color-background-primary; + box-shadow: none; + } + + &:hover, + &:active, + &:focus, + &:active:focus { + outline: none; + background-color: $color-background-primary; + } + + &:hover { + color: $color-light-blue; + } } -} -.VerticalMenu__expand-collapse-btn { - position: fixed; - bottom: 0; - left: 0; - width: 214px; - height: 64px; - padding-right: 20px !important; - outline: none; - background-color: $color-background-primary; - color: $color-text-tertiary; - font-size: 20px; - text-align: right; - z-index: 1030; - - &:hover, - &:active, - &:focus, - &:active:focus { - outline: none; - background-color: $color-extra-dark-grey; - color: $color-white; + &__secondary-collapse-btn { + position: fixed; + top: 60px; + left: #{$nav-pf-vertical-width}; + width: 40px; + height: 48px; + z-index: 1032; + } + + + &__expand-collapse-btn { + text-align: center; + position: fixed; + bottom: 0; + left: 0; + width: 214px; + height: 64px; + padding-right: 20px !important; + text-align: right; + z-index: 1030; + } } From 01e2f56711416a4678b3ebb078c220e593968834 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 10 Dec 2024 15:24:14 +0100 Subject: [PATCH 061/211] minor style change VerticalNav --- sass/internal-page/InternalPage.scss | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index b98c90007..259a28c97 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -116,6 +116,11 @@ } } + .nav-pf-secondary-nav .list-group-item > a { + width: 214px; + margin-left: 10px; + } + &.collapsed { width: 40px; @@ -127,16 +132,12 @@ a { width: 24px; } - } .secondary-nav-item-pf > a::after { display: none; } - .nav-pf-secondary-nav .list-group-item > a { - width: 214px; - } } } // sass-lint:enable force-element-nesting class-name-format nesting-depth no-important @@ -251,10 +252,10 @@ } } -.nav-pf-secondary-nav { - left: 0; - // width: #{$nav-pf-vertical-width + 14}; + .collapsed .nav-pf-secondary-nav, .nav-pf-secondary-nav { z-index: 1031; + left: 40px; + border: 1px solid $color-neutral-grey; } .nav-item-pf-header { @@ -264,8 +265,6 @@ .nav-pf-secondary-nav .list-group-item > a { width: #{$nav-pf-vertical-width + 14}; - margin-left: 0; - padding-left: 52px; } @@ -387,10 +386,5 @@ .secondary-nav-item-pf .active { background-color: $color-background-primary; } - - .nav-pf-secondary-nav { - left: 40px; - border: 1px solid $color-neutral-grey; - } } } \ No newline at end of file From cf175e33985e48c0c6bc971af5f05f8c273522d1 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 10 Dec 2024 15:49:29 +0100 Subject: [PATCH 062/211] change dashboard placeholder icons --- src/ui/contents/list-card/ContentListCard.js | 2 +- src/ui/dashboard/PagesList.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index 8c69c1374..1fa164cfa 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -163,7 +163,7 @@ class ContentListCard extends Component {

- + {renderAddContentButton}

diff --git a/src/ui/dashboard/PagesList.js b/src/ui/dashboard/PagesList.js index 77982595e..783cbbd06 100644 --- a/src/ui/dashboard/PagesList.js +++ b/src/ui/dashboard/PagesList.js @@ -121,7 +121,7 @@ class PagesList extends Component {

- + @@ -229,7 +227,7 @@ class PageConfigPage extends Component { className={[ 'PageConfigPage__btn-icon--right', 'btn', - 'btn-default', + 'btn-outlined-secondary', ].join(' ')} onClick={restoreConfig} disabled={!pageDiffersFromPublished} From dca7c9fe46c30a9a87e720aaba27ea4c59a4da76 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Wed, 11 Dec 2024 12:06:33 +0100 Subject: [PATCH 065/211] fix eslint errors --- .../list-card/ContentListCardContainer.js | 1 + src/ui/dashboard/PageStatus.js | 8 +++-- src/ui/pages/common/PageTreeCompact.js | 20 ++++++------ src/ui/pages/config/ContentPages.js | 13 ++++---- src/ui/pages/config/WidgetFrame.js | 32 +++++++++---------- src/ui/pages/config/WidgetGroupings.js | 4 +-- src/ui/widgets/common/WidgetIcon.js | 4 ++- 7 files changed, 42 insertions(+), 40 deletions(-) diff --git a/src/ui/contents/list-card/ContentListCardContainer.js b/src/ui/contents/list-card/ContentListCardContainer.js index fa60a3d73..a3ff2a7e8 100644 --- a/src/ui/contents/list-card/ContentListCardContainer.js +++ b/src/ui/contents/list-card/ContentListCardContainer.js @@ -26,6 +26,7 @@ const mapStateToProps = state => ({ }); const mapDispatchToProps = dispatch => ({ + // eslint-disable-next-line no-unused-vars onDidMount: (page = 1, pageSize = 5) => { dispatch(fetchContents({ page: 1, pageSize: 500 }, '?sort=lastModified&direction=DESC', namespace)); dispatch(fetchContentTypeListPaged({ page: 1, pageSize: 500 }, '', 'contentTypesTile')); diff --git a/src/ui/dashboard/PageStatus.js b/src/ui/dashboard/PageStatus.js index d3d50b5e3..f0ef2ba77 100644 --- a/src/ui/dashboard/PageStatus.js +++ b/src/ui/dashboard/PageStatus.js @@ -34,7 +34,9 @@ class PageStatus extends Component { language, userPermissions, intl, - pageStatus: { draft, unpublished, published, lastUpdate }, + pageStatus: { + draft, unpublished, published, lastUpdate, + }, } = this.props; const msgs = Object.keys(pageStatusMsgs).reduce( @@ -84,7 +86,7 @@ class PageStatus extends Component { ], type: 'bar', order: (a, b) => - a.id === msgs.published || b.id === msgs.published ? a - b : b - a, + (a.id === msgs.published || b.id === msgs.published ? a - b : b - a), groups: [[msgs.published, msgs.draft, msgs.unpublished]], colors: { [msgs.published]: '#39AC73', @@ -98,7 +100,7 @@ class PageStatus extends Component { tooltip={{ tooltip: { show: true }, format: { - value: (v) => + value: v => `${v} ${intl.formatMessage({ id: `app.page${v !== 1 ? 's' : ''}`, defaultMessage: v !== 1 ? 'Pages' : 'Page', diff --git a/src/ui/pages/common/PageTreeCompact.js b/src/ui/pages/common/PageTreeCompact.js index 4544d4535..893e4842a 100644 --- a/src/ui/pages/common/PageTreeCompact.js +++ b/src/ui/pages/common/PageTreeCompact.js @@ -161,7 +161,7 @@ class PageTreeCompact extends Component { )} {isRootAndVirtual ? null : ( -
e.stopPropagation()} role="none"> +
e.stopPropagation()} role="none"> diff --git a/src/ui/pages/config/WidgetFrame.js b/src/ui/pages/config/WidgetFrame.js index 2e0571157..0721436fd 100644 --- a/src/ui/pages/config/WidgetFrame.js +++ b/src/ui/pages/config/WidgetFrame.js @@ -38,22 +38,22 @@ class WidgetFrame extends Component { const configMenuItems = widgetHasConfig && (configUiName || widgetHasConfigForm) ? [ - onClickSettings && onClickSettings(frameId)} - > - - , - ] + onClickSettings && onClickSettings(frameId)} + > + + , + ] : null; const cloneMenuItems = widgetHasConfig && configUiName ? [ - + onClickSaveAs && onClickSaveAs({ widgetId, @@ -62,10 +62,10 @@ class WidgetFrame extends Component { configUiName, }) } - > - - , - ] + > + + , + ] : null; actionsMenu = ( diff --git a/src/ui/pages/config/WidgetGroupings.js b/src/ui/pages/config/WidgetGroupings.js index 5d379f86a..47d386753 100644 --- a/src/ui/pages/config/WidgetGroupings.js +++ b/src/ui/pages/config/WidgetGroupings.js @@ -29,7 +29,7 @@ const WidgetGroupings = ({ const [openGroupings, setOpenGroupings] = useState({}); const [view, setView] = useState(GRID_VIEW); - const toggleGroupingCollapse = (grouping) => + const toggleGroupingCollapse = grouping => setOpenGroupings({ ...openGroupings, [grouping]: !openGroupings[grouping], @@ -91,7 +91,7 @@ const WidgetGroupings = ({
- {widgetGroupingList.map((grouping) => ( + {widgetGroupingList.map(grouping => ( { +const WidgetIcon = ({ + widgetId, small, icon, className, +}) => { const storeIcon = useSelector(getWidgetIcon(widgetId)); const [iconType, iconName] = (icon || storeIcon || '').split(':'); From 975b06aead34b3f1f3dbb51b8d658b365466be46 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Wed, 11 Dec 2024 12:58:33 +0100 Subject: [PATCH 066/211] minor style change VerticalNav --- sass/internal-page/InternalPage.scss | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index 259a28c97..39ecc4a2e 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -121,6 +121,10 @@ margin-left: 10px; } + &:not(.collapsed) + .VerticalMenu__secondary-collapse-btn { + left: #{$nav-pf-vertical-width * 2 - 30}; + } + &.collapsed { width: 40px; @@ -254,10 +258,17 @@ .collapsed .nav-pf-secondary-nav, .nav-pf-secondary-nav { z-index: 1031; - left: 40px; border: 1px solid $color-neutral-grey; } +.collapsed .nav-pf-secondary-nav { + left: 40px; +} + +.nav-pf-secondary-nav { + left: 212px; +} + .nav-item-pf-header { margin-top: 12px; margin-left: 56px; @@ -290,7 +301,7 @@ box-shadow: none; } - &:hover, + &:hover, &:active, &:focus, &:active:focus { @@ -349,7 +360,6 @@ } .nav-pf-vertical { - .list-group { display: flex; flex-direction: column; @@ -367,7 +377,6 @@ .list-group-item { border: none; - a { height: 40px; color: $color-text-tertiary; From b5f550cd515128c492183c2b85421f1e2533ce38 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Wed, 11 Dec 2024 17:44:27 +0100 Subject: [PATCH 067/211] remove box shadow from buttons --- sass/patternfly.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/sass/patternfly.scss b/sass/patternfly.scss index 97d380769..d8735cb00 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -138,6 +138,7 @@ $fa-square-o: '\f096'; justify-content: center; border-radius: 6px; font-size: 14px; + box-shadow: none; } @@ -175,10 +176,11 @@ $fa-square-o: '\f096'; } .btn-outlined-secondary{ - border: 1px solid $color-neutral-grey; + border: 1px solid $color-content-07; border-radius: 4px; background-color: #FFF; color: $color-primary-text; + box-shadow: none; &:focus{ outline: none; From daffdbc89b3447f110bd184bdde20b9d98013fe0 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Wed, 11 Dec 2024 17:53:35 +0100 Subject: [PATCH 068/211] fix template page --- sass/page-templates/list/PageTemplateListTable.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/sass/page-templates/list/PageTemplateListTable.scss b/sass/page-templates/list/PageTemplateListTable.scss index c437166b4..c422f4070 100644 --- a/sass/page-templates/list/PageTemplateListTable.scss +++ b/sass/page-templates/list/PageTemplateListTable.scss @@ -18,10 +18,12 @@ .Page_Template_Preview_Content { width: 187px; - height: 120px; + height: fit-content; + min-height: 127px; background: rgba(240, 246, 255, 1); border: 1px solid rgba(204, 224, 255, 1); position: relative; + } .Page_Template_Preview_Actions { @@ -55,6 +57,7 @@ .PageConfigGridCol--frame { gap: 2px; min-height: 0 !important; + padding: 1px; } .EmptyFrame { From dd32310c48a21580e1a539677d329f5ddebe24c5 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Wed, 11 Dec 2024 18:16:57 +0100 Subject: [PATCH 069/211] minor style change VerticalNav --- sass/internal-page/InternalPage.scss | 119 ++++++++++++++++----------- 1 file changed, 69 insertions(+), 50 deletions(-) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index 39ecc4a2e..e21c4d0f0 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -107,7 +107,6 @@ padding: 10px 0 0 8px; .secondary-nav-item-pf > a { - width: 214px; padding-left: 25px; &::after { @@ -117,19 +116,36 @@ } .nav-pf-secondary-nav .list-group-item > a { - width: 214px; margin-left: 10px; } - &:not(.collapsed) + .VerticalMenu__secondary-collapse-btn { - left: #{$nav-pf-vertical-width * 2 - 30}; - } + &:not(.collapsed) { + & > .list-group > .list-group-item > a { + display: flex; + gap: 8px; + } + + & + .VerticalMenu__secondary-collapse-btn { + left: #{$nav-pf-vertical-width * 2}; + } + & + .VerticalMenu__expand-collapse-btn { + text-align: right; + } + } &.collapsed { width: 40px; + + .list-group-item.secondary-nav-item-pf > a{ + width: fit-content; + + &:hover { + width: fit-content; + } + } + .VerticalMenu__expand-collapse-btn { - width: 40px; + width: 39px; padding-right: 0 !important; padding-left: 0; @@ -266,6 +282,7 @@ } .nav-pf-secondary-nav { + width: #{$nav-pf-vertical-width + 35}; left: 212px; } @@ -275,7 +292,7 @@ } .nav-pf-secondary-nav .list-group-item > a { - width: #{$nav-pf-vertical-width + 14}; + width: #{$nav-pf-vertical-width}; } @@ -301,13 +318,6 @@ box-shadow: none; } - &:hover, - &:active, - &:focus, - &:active:focus { - outline: none; - background-color: $color-background-primary; - } &:hover { color: $color-light-blue; @@ -317,7 +327,7 @@ &__secondary-collapse-btn { position: fixed; top: 60px; - left: #{$nav-pf-vertical-width}; + left: #{$nav-pf-vertical-width + 30}; width: 40px; height: 48px; z-index: 1032; @@ -329,12 +339,10 @@ position: fixed; bottom: 0; left: 0; - width: 214px; + width: #{$nav-pf-vertical-width + 10}; height: 64px; padding-right: 20px !important; - text-align: right; z-index: 1030; - } } @@ -355,45 +363,56 @@ } .VerticalMenuContainer { - .nav-pf-vertical, .nav-pf-secondary-nav, .list-group-item.active > a, .list-group-item > a { - background-color: $color-background-primary; + .nav-pf-vertical, + .nav-pf-secondary-nav, +ì .list-group-item.active > a, + .list-group-item > a { + background-color: $color-background-primary; + } + + .list-group-item.active > a { + color: $color-dark-blue; + } + + .nav-pf-vertical { + .list-group { + display: flex; + flex-direction: column; + justify-content: center; } - .nav-pf-vertical { - .list-group { - display: flex; - flex-direction: column; - justify-content: center; - } + .list-group-item { + border: none; - .list-group-item.active a::before { - background: $color-dark-blue; - left: -2px; - border-radius: $radius-s; - width: 28px; - height: 28px; - z-index: -1 + a { + height: 40px; + color: $color-text-tertiary; + padding: 0; + + .fa { + font-size: 16px; + margin: 0; } + } + + a, a:focus, a:active, a:hover { + background-color: $color-background-primary; + } - .list-group-item { - border: none; - a { - height: 40px; - color: $color-text-tertiary; - padding: 0; - - .fa { - font-size: 16px; - } - } - - a:focus, a:active, a:hover, .list-group-item.active>a { - background-color: $color-background-primary; - } + &.active { + a, a::after { + color: $color-light-blue; } - .secondary-nav-item-pf .active { - background-color: $color-background-primary; + a::before { + background: $color-dark-blue; + left: -2px; + border-radius: $radius-s; + width: 28px; + height: 28px; + z-index: -1 } + } + } } } \ No newline at end of file From 12faffc9e2f021015bc8e167b7b0d5331d8006ec Mon Sep 17 00:00:00 2001 From: Marco Cucinotta Date: Thu, 12 Dec 2024 10:07:49 +0100 Subject: [PATCH 070/211] feat: CardList component added --- sass/index.scss | 1 + sass/widgets/list/CardList.scss | 67 +++++++++++++++++++++++ src/ui/widgets/list/CardItem.js | 52 ++++++++++++++++++ src/ui/widgets/list/CardList.js | 28 ++++++++++ src/ui/widgets/list/WidgetListTable.js | 74 +++++++++++++++----------- 5 files changed, 190 insertions(+), 32 deletions(-) create mode 100644 sass/widgets/list/CardList.scss create mode 100644 src/ui/widgets/list/CardItem.js create mode 100644 src/ui/widgets/list/CardList.js diff --git a/sass/index.scss b/sass/index.scss index 8d6066e37..8d9df3838 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -15,6 +15,7 @@ @import 'widgets/config/WidgetConfigPage'; @import 'widgets/common/WidgetPage'; @import 'widgets/list/ListWidgetPage'; +@import 'widgets/list/CardList'; @import 'widgets/list/WidgetListTable'; @import 'widgets/list/WidgetListActionToggle'; @import 'widgets/list/WidgetListRow'; diff --git a/sass/widgets/list/CardList.scss b/sass/widgets/list/CardList.scss new file mode 100644 index 000000000..dd2f845e5 --- /dev/null +++ b/sass/widgets/list/CardList.scss @@ -0,0 +1,67 @@ +.CardList { + display: grid; + gap: 10px; + padding: 20px; + grid-template-columns: repeat(4, 1fr); + background: rgba(249, 250, 251, 1); +} + +.CardItem { + display: flex; + flex-direction: column; + gap: 6px; + padding: 10px; + background-color: #fff; + border: 1px solid rgba(228, 231, 236, 1); + border-radius: 8px; + position: relative; +} + +.CardItemActions { + position: absolute; + top: 10px; + right: 14px; +} + +.CardItemIconWrapper { + display: flex; + justify-content: center; + align-items: center; + background: rgba(236, 249, 242, 1); + color: $color-green-new; + padding: 6px; + width: fit-content; + border-radius: 50%; + + &>span { + height: 18px; + } +} + +.CardItemLabel { + display: flex; + gap: 10px; + align-items: center +} + +.CardItemLink { + color: $color-brand-primary; + font-size: 16px; + font-weight: 500; +} + +.CardItemCounter { + display: flex; + justify-content: center; + align-items: center; + padding: 6px; + width: 20px; + height: 20px; + background-color: rgba(242, 244, 247, 1); + border-radius: 50%; + cursor: pointer +} + +.CardItemCode { + color: rgba(99, 112, 131, 1); +} \ No newline at end of file diff --git a/src/ui/widgets/list/CardItem.js b/src/ui/widgets/list/CardItem.js new file mode 100644 index 000000000..5a7be6d00 --- /dev/null +++ b/src/ui/widgets/list/CardItem.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { OverlayTrigger, Popover } from 'patternfly-react'; +import { FormattedMessage } from 'react-intl'; +import { withPermissionValues } from 'ui/auth/withPermissions'; +import WidgetIcon from 'ui/widgets/common/WidgetIcon'; +import { ROUTE_WIDGET_EDIT } from 'app-init/router'; +import { routeConverter } from '@entando/utils'; +import { Link } from 'react-router-dom'; + +const CardItem = ({ + title, + code, + used, + actions, +}) => ( +
+ {actions &&
{actions}
} +
+ +
+
+
+ + {title} + + + + + } + > +
{used}
+ +
+
{code}
+
+
+); + +CardItem.propTypes = { + title: PropTypes.string.isRequired, + code: PropTypes.string.isRequired, + used: PropTypes.number.isRequired, + actions: PropTypes.oneOfType(['func', 'null']).isRequired, +}; + +export default withPermissionValues(CardItem); diff --git a/src/ui/widgets/list/CardList.js b/src/ui/widgets/list/CardList.js new file mode 100644 index 000000000..94ad176a9 --- /dev/null +++ b/src/ui/widgets/list/CardList.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withPermissionValues } from 'ui/auth/withPermissions'; +import CardItem from './CardItem'; + +const CardList = ({ widgetList, actions }) => ( +
+ {widgetList.map(item => ( + + ))} +
+); + +CardList.propTypes = { + widgetList: PropTypes.arrayOf(PropTypes.shape({ + title: PropTypes.string.isRequired, + code: PropTypes.string.isRequired, + used: PropTypes.number.isRequired, + })).isRequired, + actions: PropTypes.oneOfType(['func', 'null']).isRequired, +}; + +export default withPermissionValues(CardList); diff --git a/src/ui/widgets/list/WidgetListTable.js b/src/ui/widgets/list/WidgetListTable.js index 38e5dcd50..a634d33f9 100644 --- a/src/ui/widgets/list/WidgetListTable.js +++ b/src/ui/widgets/list/WidgetListTable.js @@ -9,6 +9,7 @@ import WidgetSectionTitle from 'ui/widgets/list/WidgetSectionTitle'; import WidgetIcon from 'ui/widgets/common/WidgetIcon'; import { ROUTE_WIDGET_EDIT } from 'app-init/router'; import { withPermissionValues } from 'ui/auth/withPermissions'; +import CardList from './CardList'; export const WidgetListTableBody = ({ title, @@ -54,51 +55,60 @@ export const WidgetListTableBody = ({ }, }; + const Actions = item => ( +
+ + {item.hasConfig && ( + onNewUserWidget(item.code)} + > + + + )} + onEdit(item.code)} + > + + + {!item.locked && item.used === 0 && ( + onDelete(item.code)} + > + + + )} + +
+ ); + const columns = columnOrder.map(column => ({ ...columnDefs[column], accessor: column })); const rowAction = isSuperuser ? ({ Header: , attributes: { className: 'text-center', style: { width: '10%' } }, cellAttributes: { className: 'text-center' }, - Cell: (cellinfo) => { - const { values: { code }, original: { locked, hasConfig, used } } = cellinfo; - return ( -
- - {hasConfig && ( - onNewUserWidget(code)} - > - - - )} - onEdit(code)} - > - - - {!locked && used === 0 && ( - onDelete(code)} - > - - - )} - -
- ); - }, + Cell: cellinfo => Actions(cellinfo), }) : null; + /* LIST VIEW */ + /* const newWidgetList = widgetList.map(item => ({ ...item, title: item.titles[locale] })); */ + return (
} /> + {/* LIST VIEW */} + {/* + + */} {}, + onSetColumnOrder: () => { }, columnOrder: [], }; From f9318510e7d899d149eff6fa6361da04be119b7c Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 12 Dec 2024 11:32:54 +0100 Subject: [PATCH 071/211] minor style change Dashboard --- sass/dashboard/Cards.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/sass/dashboard/Cards.scss b/sass/dashboard/Cards.scss index 4a026d3fe..2fd20da0f 100644 --- a/sass/dashboard/Cards.scss +++ b/sass/dashboard/Cards.scss @@ -1,10 +1,16 @@ // sass-lint:disable class-name-format nesting-depth no-extends .DashboardPage { - .card-pf-body { + display: flex; + align-items: baseline; + a { color: $color-text-tertiary; } + + ::before { + padding-right: 5px; + } } .card-pf { From 6ab5d1b85d071b32e48896109f255ba212ecd3ec Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 12 Dec 2024 16:21:36 +0100 Subject: [PATCH 072/211] Merge branch 'refactor/ui_common_components' into refactor/ui --- sass/internal-page/PageTitle.scss | 25 +++++++++++++++++++------ sass/variables.scss | 1 + src/ui/internal-page/PageTitle.js | 2 +- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/sass/internal-page/PageTitle.scss b/sass/internal-page/PageTitle.scss index 20bfd2327..54f02520a 100644 --- a/sass/internal-page/PageTitle.scss +++ b/sass/internal-page/PageTitle.scss @@ -1,15 +1,28 @@ .PageTitle { - .PageTitle__header { - margin-bottom: 20px; - border-bottom: 1px solid $color-pf-black-200; - } + margin-bottom: 20px; + font-family: Inter; + + ::after { + content: ""; + position: absolute; + left: -10px; + right: -10px; + top: 36px; + border-bottom: 1px solid $color-neutral-grey; + } .PageTitle__title { - font-weight: bold; + color: $color-text-secondary; + font-size: 16px; + font-weight: 500; + display: flex; + width: 100%; + justify-content: space-between; + margin-block: 10px; } .PageTitle__icon { - color: $color-pf-black-500; + color: $color-content-05; cursor: pointer; } diff --git a/sass/variables.scss b/sass/variables.scss index 0e7fc6ef9..53f3a07aa 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -27,6 +27,7 @@ $color-border-blue: #40a6da; $color-dim-grey: #72767b; $color-border-grey: #e4e7ec; $color-content-3: #344051; +$color-content-05: #637083; $color-content-07: #ced2da; $spacing-2: 2px; diff --git a/src/ui/internal-page/PageTitle.js b/src/ui/internal-page/PageTitle.js index 6cce7aeac..199d10251 100644 --- a/src/ui/internal-page/PageTitle.js +++ b/src/ui/internal-page/PageTitle.js @@ -20,7 +20,7 @@ const helpIcon = helpId => ( trigger={['click']} rootClose > - + : null From 02413fb0a907895d63cbd9d3d5addb4d631e225d Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Thu, 12 Dec 2024 17:37:14 +0100 Subject: [PATCH 073/211] refactor buttons and footer designer page --- sass/common/form/ToggleButtonGroup.scss | 4 +- sass/pages/config/PageConfigPage.scss | 45 +++++++++--- sass/patternfly.scss | 9 ++- src/ui/pages/config/PageConfigPage.js | 96 +++++++++++++------------ 4 files changed, 96 insertions(+), 58 deletions(-) diff --git a/sass/common/form/ToggleButtonGroup.scss b/sass/common/form/ToggleButtonGroup.scss index 2c19dda1e..61aa3fa47 100644 --- a/sass/common/form/ToggleButtonGroup.scss +++ b/sass/common/form/ToggleButtonGroup.scss @@ -7,8 +7,8 @@ } .btn-default.active { - background-color: $color-dark-grey; - color: $color-white; + background-color: #fff; + color: $color-primary-text; } .btn-default:hover{ diff --git a/sass/pages/config/PageConfigPage.scss b/sass/pages/config/PageConfigPage.scss index 847511da4..17fc78de0 100644 --- a/sass/pages/config/PageConfigPage.scss +++ b/sass/pages/config/PageConfigPage.scss @@ -3,6 +3,9 @@ height: calc(100vh - 74px); max-height: calc(100vh - 74px); overflow-y: auto; + display: flex; + justify-content: space-between; + flex-direction: column; } &__tabs { @@ -33,6 +36,9 @@ &__btn-group--trans { + display: flex; + flex-wrap: wrap; + .pull-right .btn { // sass-lint:disable-line force-element-nesting class-name-format margin-left: 12px; } @@ -46,22 +52,43 @@ } &__bottom-options { - position: fixed; - right: 67px; - bottom: 5px; - left: 5px; - z-index: 11; + margin-top: 100px; + width: 100%; + + .pull-right{ + display: flex; + align-items: center; + gap: 20px; + } .pull-right .btn:not(.dropdown-toggle) { // sass-lint:disable-line force-element-nesting class-name-format - margin-left: 20px; } } &__bottom-options--tbar { margin: 0 20px; - padding: 8px 14px; + padding: 6px 7px 0px 7px; background-color: $color-pf-white; - box-shadow: 0 2px 4px rgba(0, 0, 0, .25); + width: 100%; + + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid $color-content-07; + + .left-btn-group{ + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 16px; + } + + .dropdown-btn-title{ + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + } } .PageStatusIcon { @@ -83,7 +110,7 @@ } &__on-the-fly-label { - margin-right: 5px; + margin:0px; } &__publishing { diff --git a/sass/patternfly.scss b/sass/patternfly.scss index d8735cb00..35316036e 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -129,7 +129,7 @@ $fa-square-o: '\f096'; } .btn { - padding: 4px 12px; + padding: 4px 8px; // border: 0 !important; // sass-lint:disable-line no-important background-image: none; display: flex; @@ -146,6 +146,7 @@ $fa-square-o: '\f096'; .btn-primary:active, .btn-primary:focus { background-color: $color-brand-primary !important; // sass-lint:disable-line no-important + border: 1.5px solid $color-brand-primary; } .btn-primary:hover { @@ -156,6 +157,8 @@ $fa-square-o: '\f096'; background-color: $color-primary-dark !important; // sass-lint:disable-line no-important } + + .btn-link { font-size: 16px; @@ -165,7 +168,7 @@ $fa-square-o: '\f096'; } .btn-outlined-primary{ - border: 1px solid $color-brand-primary; + border: 1.5px solid $color-brand-primary; border-radius: 4px; background-color: #FFF; color: $color-brand-primary; @@ -176,7 +179,7 @@ $fa-square-o: '\f096'; } .btn-outlined-secondary{ - border: 1px solid $color-content-07; + border: 1.5px solid $color-content-07; border-radius: 4px; background-color: #FFF; color: $color-primary-text; diff --git a/src/ui/pages/config/PageConfigPage.js b/src/ui/pages/config/PageConfigPage.js index 8a1a37a9b..086cb25ac 100644 --- a/src/ui/pages/config/PageConfigPage.js +++ b/src/ui/pages/config/PageConfigPage.js @@ -174,7 +174,7 @@ class PageConfigPage extends Component { ); } else { defaultConfigBtn = ( - + + + + + + +
+
+ +   + + + + + + + +
+
+ +   + + + + +
+
+ + + + +
- - + +
+ + + +
+ - + ); } } @@ -266,7 +253,7 @@ PageSettingsFormBody.propTypes = { }; PageSettingsFormBody.defaultProps = { - onWillMount: () => {}, + onWillMount: () => { }, options: [], loading: false, }; From 148f1cb84d235e772b538b5b366e0382a7fd3bf5 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 16 Dec 2024 15:17:54 +0100 Subject: [PATCH 084/211] feat: UserTable component added --- sass/index.scss | 1 + sass/users/table/UserTable.scss | 63 +++++++ src/ui/groups/list/GroupListTable.js | 68 ++++---- .../list/ProfileTypeListTable.js | 133 +++++---------- src/ui/roles/list/RoleListTable.js | 77 ++++----- src/ui/users/common/UserTable.js | 73 ++++++++ src/ui/users/list/UserListTable.js | 157 +++++++++--------- 7 files changed, 318 insertions(+), 254 deletions(-) create mode 100644 sass/users/table/UserTable.scss create mode 100644 src/ui/users/common/UserTable.js diff --git a/sass/index.scss b/sass/index.scss index 8d9df3838..8a70734ee 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -63,6 +63,7 @@ @import 'users/common/UserForm'; @import 'users/common/ProfileImageUploader'; @import 'users/list/UserListTable'; +@import 'users/table/UserTable'; @import 'users/restrictions/RestrictionsForm'; @import 'users/my-profile/MyProfilePage'; @import 'data-models/list/DataModelListTable'; diff --git a/sass/users/table/UserTable.scss b/sass/users/table/UserTable.scss new file mode 100644 index 000000000..4b572ad20 --- /dev/null +++ b/sass/users/table/UserTable.scss @@ -0,0 +1,63 @@ +.UserTable { +margin: 0; + + .UserTableWrapper { + width: 100%; + overflow-x: auto; + overflow-y: scroll; + max-height: 390px; + border-top: 1px solid $color-border-grey; + border-bottom: 1px solid $color-border-grey; + + } + + .table-bordered { + border: $color-border-grey solid 1px; + margin: 0; + } + + .table-header { + background-color: #fff; + + td { + border-left: 0; + border-right: 0; + } + + .columnResizer { + border-bottom: 1px solid $color-border-grey; + } + + th { + padding: 16px; + border-left: 0; + border-right: 0; + border-color: $color-border-grey; + } + } + + .table-row { + td { + border: 1px solid $color-border-grey; + border-left: 0; + border-right: 0; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 10px; + } + + .colForResize { + border-left: 1px solid transparent; + border-right: 1px solid transparent; + border-bottom: 1px solid $color-border-grey; + } + } + + .table-cell { + padding: 16px; + border-left: 0; + border-right: 0; + } + +} \ No newline at end of file diff --git a/src/ui/groups/list/GroupListTable.js b/src/ui/groups/list/GroupListTable.js index 8b5764e99..e0193ad86 100644 --- a/src/ui/groups/list/GroupListTable.js +++ b/src/ui/groups/list/GroupListTable.js @@ -1,10 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Col, Paginator, Alert, Spinner } from 'patternfly-react'; +import { Col, Alert, Spinner } from 'patternfly-react'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import GroupListMenuActions from 'ui/groups/list/GroupListMenuActions'; import DeleteGroupModalContainer from 'ui/groups/common/DeleteGroupModalContainer'; -import paginatorMessages from 'ui/paginatorMessages'; +import UserTable from 'ui/users/common/UserTable'; class GroupListTable extends Component { constructor(props) { @@ -49,41 +49,37 @@ class GroupListTable extends Component { groups, page, pageSize, intl, } = this.props; if (groups.length > 0) { - const pagination = { - page, - perPage: pageSize, - perPageOptions: [5, 10, 15, 25, 50], - }; + const pagination = { page, perPage: pageSize, perPageOptions: [5, 10, 15, 25, 50] }; + + const columns = [ + { title: 'app.name', field: 'name', className: 'GroupListTable__th-lg' }, + { title: 'app.code', field: 'code', className: 'GroupListTable__th-lg' }, + { + title: '', + field: 'actions', + className: 'GroupListTable__th-xs text-center', + render: props => ( +
+ +
+ ), + }, + ]; - const messages = Object.keys(paginatorMessages).reduce((acc, curr) => ( - { ...acc, [curr]: intl.formatMessage(paginatorMessages[curr]) } - ), {}); return ( - - - - - - - - - - - {this.renderTableRows()} - -
- -
- - + ); } return ( @@ -122,10 +118,10 @@ GroupListTable.propTypes = { }; GroupListTable.defaultProps = { - onWillMount: () => {}, + onWillMount: () => { }, loading: false, groups: [], - onClickDelete: () => {}, + onClickDelete: () => { }, }; export default injectIntl(GroupListTable); diff --git a/src/ui/profile-types/list/ProfileTypeListTable.js b/src/ui/profile-types/list/ProfileTypeListTable.js index 783645f05..f77920ead 100644 --- a/src/ui/profile-types/list/ProfileTypeListTable.js +++ b/src/ui/profile-types/list/ProfileTypeListTable.js @@ -1,13 +1,12 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; -import { Col, Paginator, Alert, Spinner } from 'patternfly-react'; +import { Col, Alert, Spinner } from 'patternfly-react'; import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl'; -import { DataTable } from '@entando/datatable'; import ProfileTypeListMenuActions from 'ui/profile-types/list/ProfileTypeListMenuActions'; import ProfileTypeStatusIcon from 'ui/profile-types/common/ProfileTypeStatusIcon'; import ProfileTypesDeleteModalContainer from 'ui/profile-types/common/ProfileTypesDeleteModalContainer'; import ProfileTypeReferenceStatusContainer from 'ui/profile-types/common/ProfileTypeReferenceStatusContainer'; -import paginatorMessages from 'ui/paginatorMessages'; +import UserTable from 'ui/users/common/UserTable'; const msgs = defineMessages({ profileStatus: { @@ -22,7 +21,7 @@ const ProfileTypeListTable = ({ }) => { useEffect(() => { onDidMount(); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const changePage = pagenum => ( @@ -33,101 +32,57 @@ const ProfileTypeListTable = ({ onDidMount({ page: 1, pageSize: size }) ); - const getColumnDefs = () => { - const columnDefs = { - name: { - Header: , - }, - code: { - Header: , - attributes: { - className: 'ProfileTypeListTable__th-xs text-center', - }, - cellAttributes: { - className: 'text-center', - }, - }, - status: { - Header: , - attributes: { - className: 'ProfileTypeListTable__th-xs text-center', - }, - cellAttributes: { - className: 'text-center', - }, - Cell: (cellprops) => { - const { row: { original: { status } } } = cellprops; - return ( - - ); - }, - }, - }; - - return ['name', 'code', 'status'].map(column => ({ - ...columnDefs[column], - accessor: column, - })); - }; - - const columns = getColumnDefs() || []; - - const rowAction = { - Header: , - attributes: { + const columns = [ + { title: 'app.name', field: 'name', className: 'RoleListTable__th-lg' }, + { title: 'app.code', field: 'code', className: 'ProfileTypeListTable__th-xs' }, + { + title: 'profileType.table.status', + field: 'status', className: 'ProfileTypeListTable__th-xs text-center', + render: props => ( +
+ +
+ ), }, - cellAttributes: { - className: 'text-center', - }, - Cell: (cellprops) => { - const { values: { code } } = cellprops; - return ( - - ); + { + title: '', + field: 'actions', + className: 'ProfileTypeListTable__th-xs text-center', + render: props => ( +
+ +
+ ), }, - }; + ]; const renderTable = () => { if (profiletypes.length > 0) { - const pagination = { - page, - perPage: pageSize, - perPageOptions: [5, 10, 15, 25, 50], - }; - - const messages = Object.keys(paginatorMessages).reduce((acc, curr) => ( - { ...acc, [curr]: intl.formatMessage(paginatorMessages[curr]) } - ), {}); + const pagination = { page, perPage: pageSize, perPageOptions: [5, 10, 15, 25, 50] }; return ( - - - + + + + - - +
); } return ( @@ -166,7 +121,7 @@ ProfileTypeListTable.propTypes = { }; ProfileTypeListTable.defaultProps = { - onDidMount: () => {}, + onDidMount: () => { }, loading: false, profiletypes: [], }; diff --git a/src/ui/roles/list/RoleListTable.js b/src/ui/roles/list/RoleListTable.js index 99cd50d3e..6d071d7b8 100644 --- a/src/ui/roles/list/RoleListTable.js +++ b/src/ui/roles/list/RoleListTable.js @@ -1,11 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Col, Paginator, Alert, Spinner } from 'patternfly-react'; +import { Col, Alert, Spinner } from 'patternfly-react'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import RoleListMenuActions from 'ui/roles/list/RoleListMenuActions'; import DeleteUserRoleModalContainer from 'ui/roles/common/DeleteUserRoleModalContainer'; -import paginatorMessages from 'ui/paginatorMessages'; -import { TEST_ID_ROLE_LIST_TABLE } from 'ui/test-const/role-test-const'; +import UserTable from 'ui/users/common/UserTable'; class RoleListTable extends Component { constructor(props) { @@ -27,62 +26,44 @@ class RoleListTable extends Component { this.props.onWillMount({ page: 1, pageSize }); } - renderTableRows() { - return this.props.roles.map(role => ( - - {role.name} - {role.code} - - - - - )); - } - renderTable() { const { roles, page, pageSize, intl, } = this.props; if (roles.length > 0) { - const pagination = { - page, - perPage: pageSize, - perPageOptions: [5, 10, 15, 25, 50], - }; + const pagination = { page, perPage: pageSize, perPageOptions: [5, 10, 15, 25, 50] }; - const messages = Object.keys(paginatorMessages).reduce((acc, curr) => ( - { ...acc, [curr]: intl.formatMessage(paginatorMessages[curr]) } - ), {}); + const columns = [ + { title: 'app.name', field: 'name', className: 'RoleListTable__th-lg' }, + { title: 'app.code', field: 'code', className: 'RoleListTable__th-lg' }, + { + title: '', + field: 'actions', + className: 'RoleListTable__th-xs text-center', + render: props => ( +
+ +
+ ), + }, + ]; return ( - - - - - - - - - - - {this.renderTableRows()} - -
- -
- + - +

); } return ( diff --git a/src/ui/users/common/UserTable.js b/src/ui/users/common/UserTable.js new file mode 100644 index 000000000..da1b52e28 --- /dev/null +++ b/src/ui/users/common/UserTable.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage, intlShape } from 'react-intl'; +import { Col, Paginator } from 'patternfly-react'; +import paginatorMessages from 'ui/paginatorMessages'; +import { TEST_ID_USER_LIST_TABLE } from 'ui/test-const/user-test-const'; + +const UserTable = (props) => { + const { + intl, columns, rows, pagination, totalItems, onChangePage, onChangePageSize, + } = props; + + const messages = Object.keys(paginatorMessages).reduce((acc, curr) => ( + { ...acc, [curr]: intl.formatMessage(paginatorMessages[curr]) } + ), {}); + + return ( + +
+ + + + {columns.map(({ title, className }) => ( + + ))} + + + + {rows.map(row => ( + + {columns.map(({ title, field, render }) => { + const value = () => (render ? render(row) : row[field] || ''); + return ; + })} + + ))} + +
+ {title ? : ''} +
{value()}
+ +
+ + ); +}; + +UserTable.propTypes = { + intl: intlShape.isRequired, + columns: PropTypes.arrayOf(PropTypes.shape({ + title: PropTypes.string.isRequired, + field: PropTypes.string.isRequired, + className: PropTypes.string, + render: PropTypes.func, + })).isRequired, + rows: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired, + pagination: PropTypes.shape({ + page: PropTypes.number.isRequired, + perPage: PropTypes.number.isRequired, + perPageOptions: PropTypes.arrayOf(PropTypes.number.isRequired), + }).isRequired, + totalItems: PropTypes.number.isRequired, + onChangePage: PropTypes.func.isRequired, + onChangePageSize: PropTypes.func.isRequired, +}; + +export default UserTable; diff --git a/src/ui/users/list/UserListTable.js b/src/ui/users/list/UserListTable.js index 182800f32..b17ca6741 100644 --- a/src/ui/users/list/UserListTable.js +++ b/src/ui/users/list/UserListTable.js @@ -1,13 +1,12 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; -import { Col, Paginator, Alert, Spinner } from 'patternfly-react'; +import { Col, Alert, Spinner } from 'patternfly-react'; import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl'; import UserListMenuActions from 'ui/users/list/UserListMenuActions'; import UserStatus from 'ui/users/common/UserStatus'; import DeleteUserModalContainer from 'ui/users/common/DeleteUserModalContainer'; import { isEmpty } from 'lodash'; -import paginatorMessages from 'ui/paginatorMessages'; -import { TEST_ID_USER_LIST_TABLE } from 'ui/test-const/user-test-const'; +import UserTable from 'ui/users/common/UserTable'; const USER_INACTIVE = 'inactive'; @@ -31,91 +30,87 @@ class UserListTable extends Component { this.props.onWillMount({ page: 1, pageSize }); } - renderTableRows() { - const { users, intl } = this.props; - return users.map((user) => { - let userStatus = user.status; - if (!user.accountNotExpired && userStatus !== USER_INACTIVE) { - userStatus = 'accountExpired'; - } else if (!user.credentialsNotExpired && userStatus !== USER_INACTIVE) { - userStatus = 'passwordExpired'; - } - const msgs = defineMessages({ - userStatus: { - id: `user.table.status.${userStatus}`, - }, - }); - const profileType = user.profileType || {}; - return ( - - {user.username} - {profileType.typeDescription}{' '}{profileType.typeCode} - {user.profileAttributes.fullname} - {user.profileAttributes.email} - - - - - - - - ); - }); - } - renderTable() { const { users, page, pageSize, intl, } = this.props; if (users.length > 0) { - const pagination = { - page, - perPage: pageSize, - perPageOptions: [5, 10, 15, 25, 50], - }; + const pagination = { page, perPage: pageSize, perPageOptions: [5, 10, 15, 25, 50] }; - const messages = Object.keys(paginatorMessages).reduce((acc, curr) => ( - { ...acc, [curr]: intl.formatMessage(paginatorMessages[curr]) } - ), {}); + const columns = [ + { + title: 'user.table.username', + field: 'username', + }, + { + title: 'user.table.profileType', + field: 'profileType', + render: props => ( + + {props.profileType.typeDescription}{' '} + {props.profileType.typeCode} + + ), + }, + { + title: 'user.table.fullname', + field: 'profileAttribute', + render: props => props.profileAttributes.fullname, + }, + { + title: 'user.table.email', + field: 'profileAttribute', + render: props => props.profileAttributes.email, + }, + { + title: 'user.table.status', + field: 'status', + className: 'UserListTable__th-sm text-center', + render: (props) => { + let userStatus = props.status; + if (!props.accountNotExpired && userStatus !== USER_INACTIVE) { + userStatus = 'accountExpired'; + } else if (!props.credentialsNotExpired && userStatus !== USER_INACTIVE) { + userStatus = 'passwordExpired'; + } + const msgs = defineMessages({ userStatus: { id: `user.table.status.${userStatus}` } }); + return ( +
+ +
+ ); + }, + }, + { + title: '', + field: 'actions', + className: 'UserListTable__th-xs text-center', + render: props => ( +
+ +
+ ), + }, + ]; return ( - - - - - - - - - - - - - - {this.renderTableRows()} - -
- - - -
- - + ); } return ( @@ -153,7 +148,7 @@ UserListTable.propTypes = { }; UserListTable.defaultProps = { - onWillMount: () => {}, + onWillMount: () => { }, loading: false, users: [], }; From 728841aec316f7b75795f972eec5a41e45c40111 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 16 Dec 2024 15:19:11 +0100 Subject: [PATCH 085/211] change button in sidebar --- .../list/PageTemplateListTable.scss | 16 ++++++++++++++++ sass/patternfly.scss | 1 + src/ui/pages/config/ContentPages.js | 5 +++-- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/sass/page-templates/list/PageTemplateListTable.scss b/sass/page-templates/list/PageTemplateListTable.scss index 9ed257186..8e82e5110 100644 --- a/sass/page-templates/list/PageTemplateListTable.scss +++ b/sass/page-templates/list/PageTemplateListTable.scss @@ -26,6 +26,14 @@ } + .PageConfigGridRow{ + border: none; + } + + .PageConfigGridRow{ + border: none; + } + .Page_Template_Preview_Actions { position: absolute; right: 10px @@ -41,6 +49,14 @@ gap: 2px; height: 100%; min-height: 0 !important; + + .PageConfigGridRow{ + border: none; + } + + .PageConfigGridRow{ + border: none; + } } .PageConfigGridRow { diff --git a/sass/patternfly.scss b/sass/patternfly.scss index 35316036e..d14c73a41 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -147,6 +147,7 @@ $fa-square-o: '\f096'; .btn-primary:focus { background-color: $color-brand-primary !important; // sass-lint:disable-line no-important border: 1.5px solid $color-brand-primary; + color: $color-background-icons; } .btn-primary:hover { diff --git a/src/ui/pages/config/ContentPages.js b/src/ui/pages/config/ContentPages.js index f823cab73..21b5329c9 100644 --- a/src/ui/pages/config/ContentPages.js +++ b/src/ui/pages/config/ContentPages.js @@ -3,13 +3,14 @@ import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { FormattedMessage, injectIntl, intlShape, defineMessages } from 'react-intl'; import { ROUTE_PAGE_ADD, ROUTE_PAGE_CONFIG } from 'app-init/router'; -import { Spinner, Button } from 'patternfly-react'; +import { Spinner } from 'patternfly-react'; import PageTreeCompact from 'ui/pages/common/PageTreeCompact'; import DeletePageModalContainer from 'ui/pages/common/DeletePageModalContainer'; import PublishPageModalContainer from 'ui/pages/common/PublishPageModalContainer'; import UnpublishPageModalContainer from 'ui/pages/common/UnpublishPageModalContainer'; import PageListSearchTable from 'ui/pages/list/PageListSearchTable'; +import Button from 'ui/common/Button'; const msgs = defineMessages({ searchPlaceholder: { @@ -149,7 +150,7 @@ class ContentPages extends Component { to={`${ROUTE_PAGE_ADD}?redirectTo=${ROUTE_PAGE_CONFIG}`} className="pull-right" > - From cfff80ae38e5e5953b2d842cc55d82c955a287eb Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Mon, 16 Dec 2024 15:57:15 +0100 Subject: [PATCH 086/211] refactor style ModalPagesSettings --- sass/pages/settings/ModalPageSettings.scss | 149 +++++++++++++++++---- 1 file changed, 120 insertions(+), 29 deletions(-) diff --git a/sass/pages/settings/ModalPageSettings.scss b/sass/pages/settings/ModalPageSettings.scss index b8ebb0519..319b2bddb 100644 --- a/sass/pages/settings/ModalPageSettings.scss +++ b/sass/pages/settings/ModalPageSettings.scss @@ -1,48 +1,139 @@ .ModalPageSettings { display: flex; justify-items: flex-end; + font-family: Inter; - .modal-header { - background-color: transparent; + .modal-dialog { + margin: 0; + display: grid; + min-height: 100vh; - h4 { - font-size: 20px; - font-weight: 500; - color: $color-text-secondary; - } + .modal-content { + padding: 32px 24px 24px 24px; - .close { - font-size: 30px; - } - } + .modal-header { + background-color: transparent; + padding: 0; - .modal-dialog { - height: 100vh; - margin: 0; - } + .modal-title { + font-size: 20px; + font-weight: 500; + color: $color-text-secondary; + } + + .close { + font-size: 30px; + } + } + } - .modal-content { - min-height: fit-content; - height: 100vh; - padding: 24px; + .modal-body { + padding: 0; - .form-group { - display: flex; - flex-direction: column; - width: 100%; + .col-xs-12 { + padding-inline: 0; + // padding-inline: 10px; + } - &>div { - width: 100%; + .form-group { display: flex; + flex-direction: column; + margin: 0; + padding-bottom: 16px; + row-gap: 8px; + + &>div { + width: 100%; + display: flex; + } + + &:nth-child(n+5)>div { + padding-inline: 0; + } + + &:has(.bootstrap-switch) { + flex-direction: row; + align-items: center; + padding-block: 16px; + + &>div:nth-child(1n) { + text-align: start; + } + + &>div:nth-child(2n) { + justify-content: flex-end; + } + } + + div:has(.pull-right) { + justify-content: flex-end; + } + + label { + font-size: 14px; + font-weight: 500; + } + + &:not(:nth-last-child(-n+1)) { + border-bottom: 1px solid $color-content-08; + } + + &:nth-last-child(-n+4) { + display: flex; + } + } + + &__required-icon { + margin-left: 3px; + color: $color-pf-black-800; + font-size: 9px; + } + + &__popover-icon { + color: $color-brand-primary; } - label { + .btn-group > .RenderRadioInput__toggle-btn { + &:first-child { + border-top-left-radius: $radius-xxs; + border-bottom-left-radius: $radius-xxs; + } + + &:last-child { + border-top-right-radius: $radius-xxs; + border-bottom-right-radius: $radius-xxs; + } + } + + label, .text-right { font-size: 14px; - font-weight: 500; } - } - } + .RenderRadioInput__toggle-btn { + background-color: $color-background-primary; + color: $color-text-secondary; + border: 1px solid $color-content-08; + box-shadow: none; + -webkit-box-shadow: none; + font-size: 14px; + font-weight: 600; + + &.active { + background-color: #F0F6FF; + color: $color-brand-primary; + border: 1px solid $color-content-07; + } + } + .bootstrap-switch { + border-radius: $radius-xxs; + border: 1px solid $color-content-07; + width: fit-content; + } + .bootstrap-switch-handle-on.bootstrap-switch-primary { + background-color: $color-brand-primary; + } + } + } } \ No newline at end of file From a06c8878decc864966e8c2be72bdfd68704ee87a Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 16 Dec 2024 17:10:18 +0100 Subject: [PATCH 087/211] fix template padding and label --- sass/page-templates/list/PageTemplateListTable.scss | 7 ++++++- sass/pages/common/PageTreeCompact.scss | 1 + sass/pages/config/ContentPages.scss | 2 ++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/sass/page-templates/list/PageTemplateListTable.scss b/sass/page-templates/list/PageTemplateListTable.scss index 8e82e5110..b16dc34cd 100644 --- a/sass/page-templates/list/PageTemplateListTable.scss +++ b/sass/page-templates/list/PageTemplateListTable.scss @@ -49,6 +49,7 @@ gap: 2px; height: 100%; min-height: 0 !important; + border: none; .PageConfigGridRow{ border: none; @@ -56,6 +57,10 @@ .PageConfigGridRow{ border: none; + + span{ + display: none; + } } } @@ -73,7 +78,7 @@ .PageConfigGridCol--frame { gap: 2px; min-height: 0 !important; - padding: 1px; + padding: 0.5px; } .EmptyFrame { diff --git a/sass/pages/common/PageTreeCompact.scss b/sass/pages/common/PageTreeCompact.scss index e3ffa68be..4c85375df 100644 --- a/sass/pages/common/PageTreeCompact.scss +++ b/sass/pages/common/PageTreeCompact.scss @@ -90,5 +90,6 @@ border-top: 0; font-weight: 600; color: $color-primary-text; + vertical-align: middle; } // sass-lint:enable force-element-nesting, no-qualifying-elements, class-name-format diff --git a/sass/pages/config/ContentPages.scss b/sass/pages/config/ContentPages.scss index 7da082516..0807b8eb3 100644 --- a/sass/pages/config/ContentPages.scss +++ b/sass/pages/config/ContentPages.scss @@ -89,6 +89,8 @@ &__page-name { cursor: pointer; } + + // sass-lint:enable nesting-depth } } From baeb8e9895ec9196d413af628411deaaa8b801bc Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 16 Dec 2024 17:29:12 +0100 Subject: [PATCH 088/211] remove focus effect on sidebar button --- sass/pages/config/ToolbarPageConfig.scss | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/sass/pages/config/ToolbarPageConfig.scss b/sass/pages/config/ToolbarPageConfig.scss index b29f61620..9febada60 100644 --- a/sass/pages/config/ToolbarPageConfig.scss +++ b/sass/pages/config/ToolbarPageConfig.scss @@ -32,6 +32,8 @@ color: $color-primary-text; } + + &:hover { color: $color-primary-text; } @@ -42,6 +44,23 @@ position: relative; height: 100%; overflow: auto; + + .btn-default{ + border: none; + outline: none; + } + + .btn:hover{ + background-color: white; + } + + .btn-default:focus{ + box-shadow: none; + } + + + + } &__tab-main { @@ -204,6 +223,10 @@ .fa { + color: $color-black; + } + + .fa:hover{ color: $color-brand-primary; } } From 79cc70d13033644d1e0acba3614d7566ac1ea1ca Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Mon, 16 Dec 2024 17:47:16 +0100 Subject: [PATCH 089/211] minor style fix VerticalNav --- sass/internal-page/InternalPage.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index 65b3c850e..3212ec510 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -104,6 +104,7 @@ width: 214px; border-right: 1px solid $color-neutral-grey; padding: 10px 0 0 8px; + top: 54px; .secondary-nav-item-pf > a { padding-left: 25px; @@ -128,6 +129,7 @@ left: #{$nav-pf-vertical-width * 2}; } & + .VerticalMenu__expand-collapse-btn { + justify-content: flex-end; text-align: right; } } @@ -283,6 +285,7 @@ .nav-pf-secondary-nav { width: #{$nav-pf-vertical-width + 35}; left: 212px; + top: 52px; } .nav-item-pf-header { From a57846e91f0b883f5892f3b643a129ee505de264 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 17 Dec 2024 10:34:28 +0100 Subject: [PATCH 090/211] feat: grid/list view switch --- sass/variables.scss | 1 + sass/widgets/list/ListWidgetPage.scss | 13 +++- src/ui/pages/common/PageSettingsForm.js | 2 +- src/ui/widgets/list/ListWidgetPage.js | 83 ++++++++++++++++++++----- src/ui/widgets/list/WidgetGridView.js | 77 +++++++++++++++++++++++ src/ui/widgets/list/WidgetListTable.js | 11 ---- 6 files changed, 159 insertions(+), 28 deletions(-) create mode 100644 src/ui/widgets/list/WidgetGridView.js diff --git a/sass/variables.scss b/sass/variables.scss index 339d35b6b..9dfbda702 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -30,6 +30,7 @@ $color-content-3: #344051; $color-content-05: #637083; $color-content-07: #ced2da; $color-content-08: #E4E7EC; +$color-content-09: #F2F4F7; $spacing-2: 2px; $spacing-4: 4px; diff --git a/sass/widgets/list/ListWidgetPage.scss b/sass/widgets/list/ListWidgetPage.scss index 5bea29c0d..92d2f81fa 100644 --- a/sass/widgets/list/ListWidgetPage.scss +++ b/sass/widgets/list/ListWidgetPage.scss @@ -1,5 +1,14 @@ .ListWidgetPage { - .ListWidgetPage__add { - margin: 2em 2em 0 0; + .ListWidgetPage__button-group { + padding-inline: 30px; + padding-top: 10px; + display: flex; + justify-content: flex-end; + column-gap: 2px; + + .btn { + padding-inline: 18px; + font-weight: 600; + } } } diff --git a/src/ui/pages/common/PageSettingsForm.js b/src/ui/pages/common/PageSettingsForm.js index 75db13733..3e7e4566b 100644 --- a/src/ui/pages/common/PageSettingsForm.js +++ b/src/ui/pages/common/PageSettingsForm.js @@ -228,7 +228,7 @@ export class PageSettingsFormBody extends Component { diff --git a/src/ui/widgets/list/ListWidgetPage.js b/src/ui/widgets/list/ListWidgetPage.js index 60a61019b..961bae2bc 100644 --- a/src/ui/widgets/list/ListWidgetPage.js +++ b/src/ui/widgets/list/ListWidgetPage.js @@ -4,11 +4,14 @@ import InternalPage from 'ui/internal-page/InternalPage'; import WidgetListTable from 'ui/widgets/list/WidgetListTable'; import PageTitle from 'ui/internal-page/PageTitle'; import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; -import { Grid, Row, Col, Button, Spinner } from 'patternfly-react'; +import { Grid, Row, Col, Spinner } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; import { ROUTE_WIDGET_ADD } from 'app-init/router'; import DeleteWidgetModalContainer from 'ui/widgets/list/DeleteWidgetModalContainer'; +import Icon from 'ui/common/Icon'; +import Button from 'ui/common/Button'; +import WidgetGridView from './WidgetGridView'; class ListWidgetPage extends Component { componentWillMount() { @@ -16,6 +19,7 @@ class ListWidgetPage extends Component { if (!columnOrder.length) { onSetColumnOrder(['titles', 'code', 'used']); } + this.setState({ view: 'grid' }); onWillMount(this.props); } @@ -51,13 +55,45 @@ class ListWidgetPage extends Component { ); } + renderGrid() { + const { + groupedWidgets, + widgetGroupingList, + onDelete, + onEdit, + onNewUserWidget, + locale, + columnOrder, + onSetColumnOrder, + } = this.props; + return ( + + { + widgetGroupingList.map(grouping => ( + + )) + } + + ); + } + render() { return ( @@ -69,23 +105,42 @@ class ListWidgetPage extends Component { - - {this.renderTable()} - - - - + + + + + + {this.state.view === 'grid' ? this.renderGrid() : this.renderTable()} + + @@ -107,15 +162,15 @@ ListWidgetPage.propTypes = { }; ListWidgetPage.defaultProps = { - onWillMount: () => {}, - onDelete: () => {}, - onEdit: () => {}, - onNewUserWidget: () => {}, + onWillMount: () => { }, + onDelete: () => { }, + onEdit: () => { }, + onNewUserWidget: () => { }, locale: 'en', groupedWidgets: {}, widgetGroupingList: [], loading: false, - onSetColumnOrder: () => {}, + onSetColumnOrder: () => { }, columnOrder: [], }; diff --git a/src/ui/widgets/list/WidgetGridView.js b/src/ui/widgets/list/WidgetGridView.js new file mode 100644 index 000000000..5179f35a8 --- /dev/null +++ b/src/ui/widgets/list/WidgetGridView.js @@ -0,0 +1,77 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Col, DropdownKebab, MenuItem } from 'patternfly-react'; +import { FormattedMessage } from 'react-intl'; +import WidgetSectionTitle from 'ui/widgets/list/WidgetSectionTitle'; +import { withPermissionValues } from 'ui/auth/withPermissions'; +import CardList from './CardList'; + +export const WidgetGrid = ({ + title, + widgetList, + locale, + onDelete, + onEdit, + onNewUserWidget, + isSuperuser, +}) => { + const Actions = item => ( +
+ + {item.hasConfig && ( + onNewUserWidget(item.code)} + > + + )} + onEdit(item.code)} + > + + + {!item.locked && item.used === 0 && ( + onDelete(item.code)} + > + + )} + +
+ ); + + const newWidgetList = widgetList.map(item => ({ ...item, title: item.titles[locale] })); + + return ( +
+ + } + /> + + + +
+ ); +}; + +WidgetGrid.propTypes = { + title: PropTypes.string.isRequired, + widgetList: PropTypes.arrayOf(PropTypes.shape({})).isRequired, + locale: PropTypes.string.isRequired, + onDelete: PropTypes.func.isRequired, + onEdit: PropTypes.func.isRequired, + onNewUserWidget: PropTypes.func.isRequired, + isSuperuser: PropTypes.bool, +}; + +WidgetGrid.defaultProps = { + isSuperuser: true, +}; + +export default withPermissionValues(WidgetGrid); diff --git a/src/ui/widgets/list/WidgetListTable.js b/src/ui/widgets/list/WidgetListTable.js index a634d33f9..1d4e76970 100644 --- a/src/ui/widgets/list/WidgetListTable.js +++ b/src/ui/widgets/list/WidgetListTable.js @@ -9,7 +9,6 @@ import WidgetSectionTitle from 'ui/widgets/list/WidgetSectionTitle'; import WidgetIcon from 'ui/widgets/common/WidgetIcon'; import { ROUTE_WIDGET_EDIT } from 'app-init/router'; import { withPermissionValues } from 'ui/auth/withPermissions'; -import CardList from './CardList'; export const WidgetListTableBody = ({ title, @@ -93,22 +92,12 @@ export const WidgetListTableBody = ({ Cell: cellinfo => Actions(cellinfo), }) : null; - /* LIST VIEW */ - /* const newWidgetList = widgetList.map(item => ({ ...item, title: item.titles[locale] })); */ - return (
} /> - {/* LIST VIEW */} - {/* - - */} Date: Tue, 17 Dec 2024 14:27:57 +0100 Subject: [PATCH 091/211] refactor: move CardItem and CardList --- sass/{widgets/list => common}/CardList.scss | 0 src/ui/{widgets/list => common}/CardItem.js | 0 src/ui/{widgets/list => common}/CardList.js | 8 ++++---- src/ui/widgets/list/WidgetGridView.js | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) rename sass/{widgets/list => common}/CardList.scss (100%) rename src/ui/{widgets/list => common}/CardItem.js (100%) rename src/ui/{widgets/list => common}/CardList.js (78%) diff --git a/sass/widgets/list/CardList.scss b/sass/common/CardList.scss similarity index 100% rename from sass/widgets/list/CardList.scss rename to sass/common/CardList.scss diff --git a/src/ui/widgets/list/CardItem.js b/src/ui/common/CardItem.js similarity index 100% rename from src/ui/widgets/list/CardItem.js rename to src/ui/common/CardItem.js diff --git a/src/ui/widgets/list/CardList.js b/src/ui/common/CardList.js similarity index 78% rename from src/ui/widgets/list/CardList.js rename to src/ui/common/CardList.js index 94ad176a9..81ed79ac6 100644 --- a/src/ui/widgets/list/CardList.js +++ b/src/ui/common/CardList.js @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withPermissionValues } from 'ui/auth/withPermissions'; -import CardItem from './CardItem'; +import CardItem from 'ui/common/CardItem'; -const CardList = ({ widgetList, actions }) => ( +const CardList = ({ list, actions }) => (
- {widgetList.map(item => ( + {list.map(item => ( ( ); CardList.propTypes = { - widgetList: PropTypes.arrayOf(PropTypes.shape({ + list: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string.isRequired, code: PropTypes.string.isRequired, used: PropTypes.number.isRequired, diff --git a/src/ui/widgets/list/WidgetGridView.js b/src/ui/widgets/list/WidgetGridView.js index 5179f35a8..9a9dfc565 100644 --- a/src/ui/widgets/list/WidgetGridView.js +++ b/src/ui/widgets/list/WidgetGridView.js @@ -4,7 +4,7 @@ import { Col, DropdownKebab, MenuItem } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import WidgetSectionTitle from 'ui/widgets/list/WidgetSectionTitle'; import { withPermissionValues } from 'ui/auth/withPermissions'; -import CardList from './CardList'; +import CardList from 'ui/common/CardList'; export const WidgetGrid = ({ title, @@ -51,7 +51,7 @@ export const WidgetGrid = ({ title={} /> From 64f65c7ce755a2e6e89fe9bc94c73552bb879028 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 17 Dec 2024 14:36:22 +0100 Subject: [PATCH 092/211] fix scss import --- sass/index.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/sass/index.scss b/sass/index.scss index 8a70734ee..1a4ea9a2d 100644 --- a/sass/index.scss +++ b/sass/index.scss @@ -8,6 +8,7 @@ @import 'common/form/FormSectionTitle'; @import 'common/form/DatePicker'; @import 'common/form/SearchForm'; +@import 'common/CardList'; @import 'widgets/common/WidgetForm'; @import 'widgets/common/WidgetIcon'; @import 'widgets/common/IconUploader'; @@ -15,7 +16,6 @@ @import 'widgets/config/WidgetConfigPage'; @import 'widgets/common/WidgetPage'; @import 'widgets/list/ListWidgetPage'; -@import 'widgets/list/CardList'; @import 'widgets/list/WidgetListTable'; @import 'widgets/list/WidgetListActionToggle'; @import 'widgets/list/WidgetListRow'; @@ -189,4 +189,5 @@ @import 'component-repository/components/BundlePreview'; @import 'mfe-container/MfeMenuContainer'; @import 'component-repository/components/ComponentUninstallProcessState'; -@import 'pages/common/StatusBadge'; \ No newline at end of file +@import 'pages/common/StatusBadge'; + From 6c0cd6169fc29fbb202d9fb6137829c740b8b75e Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Tue, 17 Dec 2024 15:47:52 +0100 Subject: [PATCH 093/211] restore pagination in dashoard --- sass/contents/ContentListCard.scss | 1 - sass/dashboard/PagesList.scss | 1 - src/ui/contents/list-card/ContentListCard.js | 36 ++++++++++--------- .../list-card/ContentListCardContainer.js | 4 +-- src/ui/dashboard/PagesList.js | 6 ++-- src/ui/dashboard/PagesListContainer.js | 4 +-- 6 files changed, 26 insertions(+), 26 deletions(-) diff --git a/sass/contents/ContentListCard.scss b/sass/contents/ContentListCard.scss index 9a48e388b..30709c585 100644 --- a/sass/contents/ContentListCard.scss +++ b/sass/contents/ContentListCard.scss @@ -38,7 +38,6 @@ width: 100%; overflow-x: auto; overflow-y: scroll; - max-height: 390px; border-top: 1px solid $color-border-grey; border-bottom: 1px solid $color-border-grey; diff --git a/sass/dashboard/PagesList.scss b/sass/dashboard/PagesList.scss index 27cc51ba0..4b579ee77 100644 --- a/sass/dashboard/PagesList.scss +++ b/sass/dashboard/PagesList.scss @@ -17,7 +17,6 @@ .PagesList__wrapper { width: 100%; overflow-x: hidden; - height: 390px; border-bottom: 1px solid $color-border-grey; border-top: 1px solid $color-border-grey; diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index 1fa164cfa..5bdd2c0c9 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { /* Paginator, */ DropdownButton, MenuItem } from 'patternfly-react'; +import { Paginator, DropdownButton, MenuItem } from 'patternfly-react'; import { Clearfix } from 'react-bootstrap'; import { DataTable } from '@entando/datatable'; import { formatDate, hasAccess } from '@entando/utils'; @@ -16,7 +16,7 @@ import { import ViewPermissionNoticeOverlay from 'ui/dashboard/ViewPermissionNoticeOverlay'; -// import paginatorMessages from 'ui/common/paginatorMessages'; +import paginatorMessages from 'ui/common/paginatorMessages'; import Icon from 'ui/common/Icon'; import StatusBadge from 'ui/pages/common/StatusBadge'; @@ -110,18 +110,20 @@ class ContentListCard extends Component { render() { const { intl, - // pagination: { page, pageSize: perPage }, + pagination: { page, pageSize: perPage, totalItems }, contentTypes, onClickAddContent, userPermissions, contents, onSetColumnOrder, } = this.props; - // const pagination = { - // page, - // perPage, - // perPageOptions: [5, 10, 15], - // }; + + + const pagination = { + page, + perPage, + perPageOptions: [5, 10, 15], + }; const renderAddContentButton = hasAccess( [SUPERUSER_PERMISSION, CRUD_CONTENTS_PERMISSION, VALIDATE_CONTENTS_PERMISSION], userPermissions, @@ -149,13 +151,13 @@ class ContentListCard extends Component { ); - // const messages = Object.keys(paginatorMessages).reduce( - // (acc, curr) => ({ - // ...acc, - // [curr]: intl.formatMessage(paginatorMessages[curr]), - // }), - // {}, - // ); + const messages = Object.keys(paginatorMessages).reduce( + (acc, curr) => ({ + ...acc, + [curr]: intl.formatMessage(paginatorMessages[curr]), + }), + {}, + ); const columns = this.getColumnDefs() || []; @@ -181,14 +183,14 @@ class ContentListCard extends Component { }} />
- {/* */} + />
diff --git a/src/ui/contents/list-card/ContentListCardContainer.js b/src/ui/contents/list-card/ContentListCardContainer.js index a3ff2a7e8..9c2df15cc 100644 --- a/src/ui/contents/list-card/ContentListCardContainer.js +++ b/src/ui/contents/list-card/ContentListCardContainer.js @@ -28,8 +28,8 @@ const mapStateToProps = state => ({ const mapDispatchToProps = dispatch => ({ // eslint-disable-next-line no-unused-vars onDidMount: (page = 1, pageSize = 5) => { - dispatch(fetchContents({ page: 1, pageSize: 500 }, '?sort=lastModified&direction=DESC', namespace)); - dispatch(fetchContentTypeListPaged({ page: 1, pageSize: 500 }, '', 'contentTypesTile')); + dispatch(fetchContents({ page, pageSize }, '?sort=lastModified&direction=DESC', namespace)); + dispatch(fetchContentTypeListPaged({ page: 1, pageSize: 0 }, '', 'contentTypesTile')); }, onSetColumnOrder: columnOrder => dispatch(setColumnOrder(columnOrder, 'dashboardContentList')), onClickAddContent: (contentType) => { diff --git a/src/ui/dashboard/PagesList.js b/src/ui/dashboard/PagesList.js index 783cbbd06..2f9ecbbbb 100644 --- a/src/ui/dashboard/PagesList.js +++ b/src/ui/dashboard/PagesList.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Button } from 'patternfly-react'; +import { Paginator, Button } from 'patternfly-react'; import { Link } from 'react-router-dom'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import EllipsisWithTooltip from 'react-ellipsis-with-tooltip'; @@ -147,14 +147,14 @@ class PagesList extends Component { }} />
- {/* */} + />
); diff --git a/src/ui/dashboard/PagesListContainer.js b/src/ui/dashboard/PagesListContainer.js index fa6250c12..5802dc17c 100644 --- a/src/ui/dashboard/PagesListContainer.js +++ b/src/ui/dashboard/PagesListContainer.js @@ -14,14 +14,14 @@ import { withPermissionValues } from 'ui/auth/withPermissions'; const namespace = 'dashboardPages'; export const mapDispatchToProps = dispatch => ({ - onWillMount: () => { + onWillMount: (page = 1, pageSize = 5) => { const queryString = convertToQueryString({ sorting: { attribute: 'lastModified', direction: 'DESC', }, }); - dispatch(fetchDashboardPages({ page: 1, pageSize: 500 }, queryString, namespace)); + dispatch(fetchDashboardPages({ page, pageSize }, queryString, namespace)); }, onSetColumnOrder: columnOrder => dispatch(setColumnOrder(columnOrder, 'dashboardPageList')), }); From 2af9a18344632aaf39d12fb156f97c8105c692a7 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Tue, 17 Dec 2024 16:54:48 +0100 Subject: [PATCH 094/211] refactor pagination footer design --- sass/contents/ContentListCard.scss | 5 +++ .../ViewPermissionNoticeOverlay.scss | 38 +++++++++++++++++++ 2 files changed, 43 insertions(+) diff --git a/sass/contents/ContentListCard.scss b/sass/contents/ContentListCard.scss index 30709c585..44fc98f88 100644 --- a/sass/contents/ContentListCard.scss +++ b/sass/contents/ContentListCard.scss @@ -32,6 +32,11 @@ &__table { margin: 0 0 0 0; } + + .content-view-pf-pagination{ + background-color: #fff + } + } .ContentListCardTable__wrapper { diff --git a/sass/dashboard/ViewPermissionNoticeOverlay.scss b/sass/dashboard/ViewPermissionNoticeOverlay.scss index 1a9dab07c..e5973bbe9 100644 --- a/sass/dashboard/ViewPermissionNoticeOverlay.scss +++ b/sass/dashboard/ViewPermissionNoticeOverlay.scss @@ -21,4 +21,42 @@ text-align: center; } } + + .content-view-pf-pagination{ + background-color: white; + + .form-group{ + align-items: center; + font-size: 14px; + + .form-control{ + font-size: 14px; + } + + + .dropdown-toggle{ + background-color: transparent; + } + } + + } + + + + .pagination{ + li > a{ + border: none; + outline: none; + vertical-align: middle; + background: none; + cursor: pointer; + } + + li > a:hover{ + background-color: $color-neutral-grey; + } + + + } + } From afaaf74c929979aa7bdc193bbb104c052dc18e21 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Tue, 17 Dec 2024 16:54:55 +0100 Subject: [PATCH 095/211] refactor: Components/Widget/Add Page + Page Title --- sass/internal-page/PageTitle.scss | 11 +++++++-- sass/widgets/common/WidgetPage.scss | 15 +++++++++--- src/ui/internal-page/PageTitle.js | 8 +++--- src/ui/widgets/add/AddWidgetPage.js | 38 ++++++++--------------------- 4 files changed, 36 insertions(+), 36 deletions(-) diff --git a/sass/internal-page/PageTitle.scss b/sass/internal-page/PageTitle.scss index 54f02520a..b810ab0b9 100644 --- a/sass/internal-page/PageTitle.scss +++ b/sass/internal-page/PageTitle.scss @@ -15,10 +15,17 @@ color: $color-text-secondary; font-size: 16px; font-weight: 500; + margin-block: 10px; display: flex; - width: 100%; justify-content: space-between; - margin-block: 10px; + align-items: center; + } + + .PageTitle__content { + display: flex; + width: calc(100% - 30px); + justify-content: space-between; + align-items: center; } .PageTitle__icon { diff --git a/sass/widgets/common/WidgetPage.scss b/sass/widgets/common/WidgetPage.scss index e91b4b906..d2a434fd1 100644 --- a/sass/widgets/common/WidgetPage.scss +++ b/sass/widgets/common/WidgetPage.scss @@ -1,9 +1,19 @@ // sass-lint:disable class-name-format no-important .WidgetPage { - height: 100%; min-height: 700px; margin-bottom: 0; - background-color: $color-grey-background; + // background-color: $color-grey-background; + + &.AddWidgetPage { + .PageTitle { + padding-inline: 20px; + margin-bottom: 14px; + + & ::after { + top: 56px; + } + } + } &__header { padding: 20px; @@ -45,7 +55,6 @@ } & .PageTitle__title { - margin-top: 40px; margin-bottom: 0; & .pull-right { diff --git a/src/ui/internal-page/PageTitle.js b/src/ui/internal-page/PageTitle.js index 199d10251..8a2860f07 100644 --- a/src/ui/internal-page/PageTitle.js +++ b/src/ui/internal-page/PageTitle.js @@ -48,10 +48,12 @@ const PageTitle = ({

- - {!hideConfigLink && configIcon(configLink)} +
+ + {hideConfigLink && configIcon(configLink)} + {children} +
{helpIcon(helpId)} - {children}

diff --git a/src/ui/widgets/add/AddWidgetPage.js b/src/ui/widgets/add/AddWidgetPage.js index 25d4118ee..c17c9afb8 100644 --- a/src/ui/widgets/add/AddWidgetPage.js +++ b/src/ui/widgets/add/AddWidgetPage.js @@ -1,8 +1,4 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Breadcrumb } from 'patternfly-react'; - -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import PageTitle from 'ui/internal-page/PageTitle'; import InternalPage from 'ui/internal-page/InternalPage'; import WidgetFormContainer from 'ui/widgets/common/WidgetFormContainer'; @@ -10,33 +6,19 @@ import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; import { ROUTE_WIDGET_LIST } from 'app-init/router'; import withPermissions from 'ui/auth/withPermissions'; import { SUPERUSER_PERMISSION } from 'state/permissions/const'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; export const AddWidgetPageBody = () => ( -
-
-
- - - - - - - - - - - -
-
-
-
-
-
- -
-
- + + +
+
From cbd3a90c0e5c1c011e1071dd6ba3acf2e55e5326 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Tue, 17 Dec 2024 17:02:29 +0100 Subject: [PATCH 096/211] adjust padding in pagination footer --- sass/dashboard/ViewPermissionNoticeOverlay.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/sass/dashboard/ViewPermissionNoticeOverlay.scss b/sass/dashboard/ViewPermissionNoticeOverlay.scss index e5973bbe9..19fc2e4ca 100644 --- a/sass/dashboard/ViewPermissionNoticeOverlay.scss +++ b/sass/dashboard/ViewPermissionNoticeOverlay.scss @@ -50,6 +50,10 @@ vertical-align: middle; background: none; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 16px; } li > a:hover{ From 4a63f908f57999a272057abfdddaffba1d04b647 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Wed, 18 Dec 2024 09:12:10 +0100 Subject: [PATCH 097/211] fix style setting button --- sass/internal-page/InternalPage.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index 3212ec510..68a032395 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -137,11 +137,13 @@ &.collapsed { width: 40px; - .list-group-item.secondary-nav-item-pf > a{ - width: fit-content; + .list-group-item.secondary-nav-item-pf { + & > a, &.active > a { + width: fit-content; - &:hover { - width: fit-content; + &:hover { + width: fit-content; + } } } From 639db6d603b5d2628903a20c77adaf6f800822b4 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Wed, 18 Dec 2024 10:08:28 +0100 Subject: [PATCH 098/211] refactor: move Users/Management breadcrumb to header --- src/ui/users/add/AddUserPage.js | 27 ++++++------------- src/ui/users/authority/UserAuthorityPage.js | 27 ++++++------------- src/ui/users/detail/DetailUserPage.js | 27 ++++++------------- src/ui/users/edit/EditUserPage.js | 27 ++++++------------- src/ui/users/list/UserListPage.js | 22 +++++---------- src/ui/users/my-profile/MyProfilePage.js | 18 +++++-------- .../restrictions/UserRestrictionsPage.js | 23 +++++----------- 7 files changed, 53 insertions(+), 118 deletions(-) diff --git a/src/ui/users/add/AddUserPage.js b/src/ui/users/add/AddUserPage.js index 6ce1907b2..3fb875910 100644 --- a/src/ui/users/add/AddUserPage.js +++ b/src/ui/users/add/AddUserPage.js @@ -1,34 +1,23 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; - -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; +import { Grid, Row, Col } from 'patternfly-react'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; import AddFormContainer from 'ui/users/add/AddFormContainer'; import { ROUTE_USER_LIST } from 'app-init/router'; import withPermissions from 'ui/auth/withPermissions'; import { CRUD_USERS_PERMISSION } from 'state/permissions/const'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; export const AddUserPageBody = () => ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - diff --git a/src/ui/users/detail/DetailUserPage.js b/src/ui/users/detail/DetailUserPage.js index 86995a4c2..aab0a6156 100644 --- a/src/ui/users/detail/DetailUserPage.js +++ b/src/ui/users/detail/DetailUserPage.js @@ -1,10 +1,8 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; - -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; +import { Grid, Row, Col } from 'patternfly-react'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import { ROUTE_USER_LIST } from 'app-init/router'; import DetailUserTableContainer from 'ui/users/detail/DetailUserTableContainer'; import withPermissions from 'ui/auth/withPermissions'; @@ -12,22 +10,13 @@ import { VIEW_USERS_AND_PROFILES_PERMISSION } from 'state/permissions/const'; export const DetailUserPageBody = () => ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - { return ( +
-
- - - - - -
diff --git a/src/ui/users/restrictions/UserRestrictionsPage.js b/src/ui/users/restrictions/UserRestrictionsPage.js index cb48a5bfd..4602310bd 100644 --- a/src/ui/users/restrictions/UserRestrictionsPage.js +++ b/src/ui/users/restrictions/UserRestrictionsPage.js @@ -1,29 +1,20 @@ import React from 'react'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; -import { FormattedMessage } from 'react-intl'; - -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; +import { Grid, Row, Col } from 'patternfly-react'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; import RestrictionsFormContainer from 'ui/users/restrictions/RestrictionsFormContainer'; import withPermissions from 'ui/auth/withPermissions'; import { SUPERUSER_PERMISSION } from 'state/permissions/const'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; export const UserRestrictionsPageBody = () => ( + - - - - - - - - - - - - Date: Wed, 18 Dec 2024 10:14:54 +0100 Subject: [PATCH 099/211] refactor: move Users/Roles breadcrumb to header --- src/ui/roles/add/AddRolePage.js | 27 ++++++++------------------- src/ui/roles/detail/DetailRolePage.js | 27 ++++++++------------------- src/ui/roles/edit/EditRolePage.js | 27 ++++++++------------------- src/ui/roles/list/ListRolePage.js | 22 +++++++--------------- 4 files changed, 31 insertions(+), 72 deletions(-) diff --git a/src/ui/roles/add/AddRolePage.js b/src/ui/roles/add/AddRolePage.js index eafd67161..e464eda97 100644 --- a/src/ui/roles/add/AddRolePage.js +++ b/src/ui/roles/add/AddRolePage.js @@ -1,34 +1,23 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; - -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; +import { Grid, Row, Col } from 'patternfly-react'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; import AddFormContainer from 'ui/roles/add/AddFormContainer'; import { ROUTE_ROLE_LIST } from 'app-init/router'; import withPermissions from 'ui/auth/withPermissions'; import { SUPERUSER_PERMISSION } from 'state/permissions/const'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; export const AddRolePageBody = () => ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - Date: Wed, 18 Dec 2024 10:23:26 +0100 Subject: [PATCH 100/211] refactor: move Users/Groups breadcrumb to header --- src/ui/groups/add/AddGroupPage.js | 27 ++++++++----------------- src/ui/groups/detail/DetailGroupPage.js | 27 ++++++++----------------- src/ui/groups/edit/EditGroupPage.js | 27 ++++++++----------------- src/ui/groups/list/ListGroupPage.js | 22 +++++++------------- 4 files changed, 31 insertions(+), 72 deletions(-) diff --git a/src/ui/groups/add/AddGroupPage.js b/src/ui/groups/add/AddGroupPage.js index b5b02c5c4..db87fdb76 100644 --- a/src/ui/groups/add/AddGroupPage.js +++ b/src/ui/groups/add/AddGroupPage.js @@ -1,10 +1,8 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; - -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; +import { Grid, Row, Col } from 'patternfly-react'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import AddFormContainer from 'ui/groups/add/AddFormContainer'; import { ROUTE_GROUP_LIST } from 'app-init/router'; import withPermissions from 'ui/auth/withPermissions'; @@ -13,22 +11,13 @@ import { SUPERUSER_PERMISSION } from 'state/permissions/const'; export const AddGroupPageBody = () => ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - Date: Wed, 18 Dec 2024 10:36:22 +0100 Subject: [PATCH 101/211] refactor: move Users/ProfileType breadcrumb to header --- .../profile-types/add/AddProfileTypesPage.js | 27 ++++++------------ .../attributes/AddProfileTypeAttributePage.js | 28 ++++++------------- .../EditProfileTypeAttributePage.js | 28 ++++++------------- .../edit/EditProfileTypesPage.js | 27 ++++++------------ .../profile-types/list/ListProfileTypePage.js | 22 +++++---------- 5 files changed, 41 insertions(+), 91 deletions(-) diff --git a/src/ui/profile-types/add/AddProfileTypesPage.js b/src/ui/profile-types/add/AddProfileTypesPage.js index a79ef224e..5df91ac2c 100644 --- a/src/ui/profile-types/add/AddProfileTypesPage.js +++ b/src/ui/profile-types/add/AddProfileTypesPage.js @@ -1,10 +1,8 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; - -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; +import { Grid, Row, Col } from 'patternfly-react'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import AddFormContainer from 'ui/profile-types/add/AddFormContainer'; import { ROUTE_PROFILE_TYPE_LIST } from 'app-init/router'; import withPermissions from 'ui/auth/withPermissions'; @@ -12,22 +10,13 @@ import { SUPERUSER_PERMISSION } from 'state/permissions/const'; const AddProfileTypesPage = () => ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - - - - ( + - - - - - - - - - - - - Date: Wed, 18 Dec 2024 10:55:51 +0100 Subject: [PATCH 102/211] minor style change Pages/Management settings modal --- sass/pages/settings/ModalPageSettings.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/sass/pages/settings/ModalPageSettings.scss b/sass/pages/settings/ModalPageSettings.scss index 319b2bddb..ce168a842 100644 --- a/sass/pages/settings/ModalPageSettings.scss +++ b/sass/pages/settings/ModalPageSettings.scss @@ -7,6 +7,7 @@ margin: 0; display: grid; min-height: 100vh; + width: 500px; .modal-content { padding: 32px 24px 24px 24px; @@ -39,7 +40,7 @@ display: flex; flex-direction: column; margin: 0; - padding-bottom: 16px; + padding-bottom: 8px; row-gap: 8px; &>div { @@ -62,6 +63,7 @@ &>div:nth-child(2n) { justify-content: flex-end; + width: fit-content; } } From 61314f7f2413576a4019472cb1fb5b7115e357a5 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Wed, 18 Dec 2024 15:41:57 +0100 Subject: [PATCH 103/211] refactor: ListWIdgetPage --- src/ui/widgets/list/ListWidgetPage.js | 64 +++++++++------------------ 1 file changed, 21 insertions(+), 43 deletions(-) diff --git a/src/ui/widgets/list/ListWidgetPage.js b/src/ui/widgets/list/ListWidgetPage.js index 961bae2bc..3e9814fde 100644 --- a/src/ui/widgets/list/ListWidgetPage.js +++ b/src/ui/widgets/list/ListWidgetPage.js @@ -23,7 +23,7 @@ class ListWidgetPage extends Component { onWillMount(this.props); } - renderTable() { + renderContent(type) { const { groupedWidgets, widgetGroupingList, @@ -38,48 +38,26 @@ class ListWidgetPage extends Component { { widgetGroupingList.map(grouping => ( - - )) - } - - ); - } - - renderGrid() { - const { - groupedWidgets, - widgetGroupingList, - onDelete, - onEdit, - onNewUserWidget, - locale, - columnOrder, - onSetColumnOrder, - } = this.props; - return ( - - { - widgetGroupingList.map(grouping => ( - )) } @@ -138,7 +116,7 @@ class ListWidgetPage extends Component { - {this.state.view === 'grid' ? this.renderGrid() : this.renderTable()} + {this.renderContent(this.state.view)} From 891e92059af6d4dfa387a134263095dcce130faf Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Wed, 18 Dec 2024 17:15:12 +0100 Subject: [PATCH 104/211] draft refactor Contents/UX Fragments --- sass/fragments/list/_ListFragmentPage.scss | 19 +++- sass/internal-page/PageTitle.scss | 22 +++-- src/ui/fragments/list/FragmentListContent.js | 9 +- src/ui/fragments/list/FragmentSearchForm.js | 99 ++++++-------------- src/ui/fragments/list/ListFragmentPage.js | 80 +++++++++------- src/ui/internal-page/PageTitle.js | 7 +- 6 files changed, 110 insertions(+), 126 deletions(-) diff --git a/sass/fragments/list/_ListFragmentPage.scss b/sass/fragments/list/_ListFragmentPage.scss index 00790287f..be6edd57a 100644 --- a/sass/fragments/list/_ListFragmentPage.scss +++ b/sass/fragments/list/_ListFragmentPage.scss @@ -1,3 +1,4 @@ +// sass-lint:disable force-element-nesting, no-qualifying-elements, class-name-format .ListFragmentPage { .FragmentListTable__table { margin: 2em 0 0 0; @@ -6,7 +7,6 @@ } // Bootstrap overrides -// sass-lint:disable force-element-nesting, no-qualifying-elements, class-name-format .ListFragmentPage .nav-tabs > li.ListFragmentPage__header-tab > a { height: 57px; line-height: 43px; @@ -30,4 +30,19 @@ border: 1px solid $color-pf-black-300; border-top: 0; } -// sass-lint:enable force-element-nesting, no-qualifying-elements, class-name-format + +.ListFragmentPage { + &__bnt-container { + display: flex; + justify-content: flex-end; + gap: 8px; + } + + .FragmentSearchForm{ + display: flex; + + .form-group { + margin-bottom: 0; + } + } +} diff --git a/sass/internal-page/PageTitle.scss b/sass/internal-page/PageTitle.scss index b810ab0b9..6922234d3 100644 --- a/sass/internal-page/PageTitle.scss +++ b/sass/internal-page/PageTitle.scss @@ -1,16 +1,22 @@ .PageTitle { margin-bottom: 20px; font-family: Inter; - - ::after { - content: ""; - position: absolute; - left: -10px; - right: -10px; - top: 36px; - border-bottom: 1px solid $color-neutral-grey; + + &.max-height { + ::after { + top: 56px; + } } + ::after { + content: ""; + position: absolute; + left: -10px; + right: -10px; + top: 36px; + border-bottom: 1px solid $color-neutral-grey; + } + .PageTitle__title { color: $color-text-secondary; font-size: 16px; diff --git a/src/ui/fragments/list/FragmentListContent.js b/src/ui/fragments/list/FragmentListContent.js index 567df1183..80314bcb0 100644 --- a/src/ui/fragments/list/FragmentListContent.js +++ b/src/ui/fragments/list/FragmentListContent.js @@ -2,18 +2,11 @@ import React from 'react'; import { Row, Col, Button } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; - -import FragmentListTableContainer from 'ui/fragments/list/FragmentListTableContainer'; -import FragmentSearchFormContainer from 'ui/fragments/list/FragmentSearchFormContainer'; import { ROUTE_FRAGMENT_ADD } from 'app-init/router'; +import FragmentListTableContainer from './FragmentListTableContainer'; const FragmentListContent = () => (
- - - - - diff --git a/src/ui/fragments/list/FragmentSearchForm.js b/src/ui/fragments/list/FragmentSearchForm.js index 4a39da9e5..33abacfe2 100644 --- a/src/ui/fragments/list/FragmentSearchForm.js +++ b/src/ui/fragments/list/FragmentSearchForm.js @@ -82,75 +82,34 @@ export class FragmentSearchFormBody extends Component { render() { const { intl, widgetTypes, plugins } = this.props; return ( -
-

- - - - - - - - - - - - - - - {renderSelectOptgroup(widgetTypes, intl)} - - - - - - - - - - - {plugins.map(plugin => - )} - - - - - - - - - - - + + + + + {renderSelectOptgroup(widgetTypes, intl)} + + + + {plugins.map(plugin => + )} + ); } @@ -165,7 +124,7 @@ FragmentSearchFormBody.propTypes = { }; FragmentSearchFormBody.defaultProps = { - onWillMount: () => {}, + onWillMount: () => { }, widgetTypes: [], plugins: [], }; diff --git a/src/ui/fragments/list/ListFragmentPage.js b/src/ui/fragments/list/ListFragmentPage.js index e1e55338c..f247ff8e5 100644 --- a/src/ui/fragments/list/ListFragmentPage.js +++ b/src/ui/fragments/list/ListFragmentPage.js @@ -1,33 +1,36 @@ import React, { Component } from 'react'; -import { Grid, Row, Col, MenuItem } from 'patternfly-react'; +import { Grid, Row } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; import SettingsFragmentFormContainer from 'ui/fragments/list/SettingsFragmentFormContainer'; +import FragmentSearchFormContainer from 'ui/fragments/list/FragmentSearchFormContainer'; import FragmentListContent from 'ui/fragments/list/FragmentListContent'; import withPermissions from 'ui/auth/withPermissions'; +import Button from 'ui/common/Button'; +import Icon from 'ui/common/Icon'; import { SUPERUSER_PERMISSION } from 'state/permissions/const'; -const TAB_LIST = 'list'; -const TAB_SETTINGS = 'settings'; +const VIEW_LIST = 'list'; +const VIEW_SETTINGS = 'settings'; export class ListFragmentPageBody extends Component { constructor(props) { super(props); - this.setActiveTab = this.setActiveTab.bind(this); + this.setActiveView = this.setActiveView.bind(this); this.state = { - activeTab: TAB_LIST, + activeView: VIEW_LIST, }; } - setActiveTab(activeTab) { - this.setState({ activeTab }); + setActiveView(activeView) { + this.setState({ activeView }); } renderContent() { - return this.state.activeTab === TAB_LIST + return this.state.activeView === VIEW_LIST ? : ; } @@ -36,38 +39,43 @@ export class ListFragmentPageBody extends Component { return ( + +
+ +
+ + +
+ + +
+ - - - - -
    - this.setActiveTab(TAB_LIST)} - > - - - this.setActiveTab(TAB_SETTINGS)} - > - - -
- + {this.renderContent()} - {this.renderContent()} ); diff --git a/src/ui/internal-page/PageTitle.js b/src/ui/internal-page/PageTitle.js index 8a2860f07..45f617dd2 100644 --- a/src/ui/internal-page/PageTitle.js +++ b/src/ui/internal-page/PageTitle.js @@ -44,8 +44,9 @@ const PageTitle = ({ hideConfigLink, 'data-testid': dataTestId, children, + className, }) => ( -
+

@@ -56,7 +57,7 @@ const PageTitle = ({ {helpIcon(helpId)}

-
+
); PageTitle.propTypes = { @@ -67,6 +68,7 @@ PageTitle.propTypes = { titleParam: PropTypes.shape({}), 'data-testid': PropTypes.string, children: PropTypes.node, + className: PropTypes.string, }; PageTitle.defaultProps = { @@ -76,6 +78,7 @@ PageTitle.defaultProps = { titleParam: {}, 'data-testid': '', children: null, + className: '', }; export default PageTitle; From 139571796e97969eaf748baba473c61be4d78b72 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 19 Dec 2024 14:44:17 +0100 Subject: [PATCH 105/211] refactor: CardList an CardItem --- sass/common/CardList.scss | 2 +- sass/fragments/list/_ListFragmentPage.scss | 7 +++ src/ui/common/CardItem.js | 52 ++++++++++++++-------- src/ui/common/CardList.js | 34 ++++++++------ src/ui/fragments/list/FragmentListTable.js | 10 ++--- src/ui/widgets/list/WidgetGridView.js | 8 +++- 6 files changed, 73 insertions(+), 40 deletions(-) diff --git a/sass/common/CardList.scss b/sass/common/CardList.scss index dd2f845e5..30df930ed 100644 --- a/sass/common/CardList.scss +++ b/sass/common/CardList.scss @@ -62,6 +62,6 @@ cursor: pointer } -.CardItemCode { +.CardItemSubtitle{ color: rgba(99, 112, 131, 1); } \ No newline at end of file diff --git a/sass/fragments/list/_ListFragmentPage.scss b/sass/fragments/list/_ListFragmentPage.scss index be6edd57a..8f1735f01 100644 --- a/sass/fragments/list/_ListFragmentPage.scss +++ b/sass/fragments/list/_ListFragmentPage.scss @@ -38,6 +38,13 @@ gap: 8px; } + .FragmentListContent { + display: flex; + flex-direction: column; + gap: 20px; + padding-inline: 16px; + } + .FragmentSearchForm{ display: flex; diff --git a/src/ui/common/CardItem.js b/src/ui/common/CardItem.js index 5a7be6d00..10aef19aa 100644 --- a/src/ui/common/CardItem.js +++ b/src/ui/common/CardItem.js @@ -4,40 +4,48 @@ import { OverlayTrigger, Popover } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import { withPermissionValues } from 'ui/auth/withPermissions'; import WidgetIcon from 'ui/widgets/common/WidgetIcon'; -import { ROUTE_WIDGET_EDIT } from 'app-init/router'; import { routeConverter } from '@entando/utils'; import { Link } from 'react-router-dom'; const CardItem = ({ title, code, + subtitle, used, actions, + route, }) => (
{actions &&
{actions}
}
- + {/* TODO - generic icon */}
- - {title} - - - - - } - > -
{used}
- + {route ? + + {title} + : + + {title} + + } + {used && + + + + } + > +
{used}
+ + }
-
{code}
+
{subtitle}
); @@ -45,7 +53,13 @@ const CardItem = ({ CardItem.propTypes = { title: PropTypes.string.isRequired, code: PropTypes.string.isRequired, - used: PropTypes.number.isRequired, + subtitle: PropTypes.oneOfType(['string', 'null']).isRequired, + used: PropTypes.oneOfType(['number', 'null']).isRequired, + route: PropTypes.oneOfType([ + PropTypes.shape({ + url: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + }), 'null']).isRequired, actions: PropTypes.oneOfType(['func', 'null']).isRequired, }; diff --git a/src/ui/common/CardList.js b/src/ui/common/CardList.js index 81ed79ac6..cdb7b1497 100644 --- a/src/ui/common/CardList.js +++ b/src/ui/common/CardList.js @@ -3,26 +3,34 @@ import PropTypes from 'prop-types'; import { withPermissionValues } from 'ui/auth/withPermissions'; import CardItem from 'ui/common/CardItem'; -const CardList = ({ list, actions }) => ( -
- {list.map(item => ( - +const CardList = ({ list, actions, route }) => + ( +
+ {list.map(item => ( + ))} -
-); - +
+ ); CardList.propTypes = { list: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string.isRequired, code: PropTypes.string.isRequired, - used: PropTypes.number.isRequired, + subtitle: PropTypes.oneOfType(['string', 'null']).isRequired, + used: PropTypes.oneOfType(['number', 'null']).isRequired, })).isRequired, actions: PropTypes.oneOfType(['func', 'null']).isRequired, + route: PropTypes.oneOfType([ + PropTypes.shape({ + url: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + }), 'null']).isRequired, }; export default withPermissionValues(CardList); diff --git a/src/ui/fragments/list/FragmentListTable.js b/src/ui/fragments/list/FragmentListTable.js index acab6c00d..6776150d3 100644 --- a/src/ui/fragments/list/FragmentListTable.js +++ b/src/ui/fragments/list/FragmentListTable.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { Col, Spinner, PaginationRow } from 'patternfly-react'; +import { /* Col, */Spinner, PaginationRow } from 'patternfly-react'; import { FormattedMessage, intlShape, injectIntl } from 'react-intl'; import { DataTable } from '@entando/datatable'; @@ -122,7 +122,7 @@ class FragmentListTable extends Component { }; return ( - + this.changePage(lastPage)} messages={messages} /> - ); + ); } render() { @@ -189,11 +189,11 @@ FragmentListTable.propTypes = { }; FragmentListTable.defaultProps = { - onWillMount: () => {}, + onWillMount: () => { }, loading: false, fragments: [], filters: '', - onSetColumnOrder: () => {}, + onSetColumnOrder: () => { }, columnOrder: [], }; diff --git a/src/ui/widgets/list/WidgetGridView.js b/src/ui/widgets/list/WidgetGridView.js index 9a9dfc565..f125e83d4 100644 --- a/src/ui/widgets/list/WidgetGridView.js +++ b/src/ui/widgets/list/WidgetGridView.js @@ -1,9 +1,10 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import { Col, DropdownKebab, MenuItem } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import WidgetSectionTitle from 'ui/widgets/list/WidgetSectionTitle'; import { withPermissionValues } from 'ui/auth/withPermissions'; +import { ROUTE_WIDGET_EDIT } from 'app-init/router'; import CardList from 'ui/common/CardList'; export const WidgetGrid = ({ @@ -42,7 +43,9 @@ export const WidgetGrid = ({
); - const newWidgetList = widgetList.map(item => ({ ...item, title: item.titles[locale] })); + const newWidgetList = useMemo(() => + widgetList.map(item => ({ ...item, title: item.titles[locale], subtitle: item.code })), [locale, widgetList]); + const route = useMemo(() => ({ url: ROUTE_WIDGET_EDIT, type: 'widgetCode' }), []); return (
@@ -53,6 +56,7 @@ export const WidgetGrid = ({ From f2e93c2f87443dc6b0820ace27a07f4e43f8b0a0 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 19 Dec 2024 15:15:41 +0100 Subject: [PATCH 106/211] feat: draft Components/UX Fragments Grid --- src/ui/common/CardItem.js | 16 +- src/ui/common/CardList.js | 16 +- src/ui/fragments/list/FragmentGrid.js | 143 ++++++++++++++++++ .../fragments/list/FragmentGridContainer .js | 44 ++++++ src/ui/fragments/list/FragmentListContent.js | 31 ++-- .../fragments/list/FragmentListMenuActions.js | 2 + src/ui/widgets/list/WidgetGridView.js | 3 +- 7 files changed, 222 insertions(+), 33 deletions(-) create mode 100644 src/ui/fragments/list/FragmentGrid.js create mode 100644 src/ui/fragments/list/FragmentGridContainer .js diff --git a/src/ui/common/CardItem.js b/src/ui/common/CardItem.js index 10aef19aa..67f396b36 100644 --- a/src/ui/common/CardItem.js +++ b/src/ui/common/CardItem.js @@ -1,3 +1,4 @@ +/* eslint-disable react/require-default-props */ import React from 'react'; import PropTypes from 'prop-types'; import { OverlayTrigger, Popover } from 'patternfly-react'; @@ -53,14 +54,13 @@ const CardItem = ({ CardItem.propTypes = { title: PropTypes.string.isRequired, code: PropTypes.string.isRequired, - subtitle: PropTypes.oneOfType(['string', 'null']).isRequired, - used: PropTypes.oneOfType(['number', 'null']).isRequired, - route: PropTypes.oneOfType([ - PropTypes.shape({ - url: PropTypes.string.isRequired, - type: PropTypes.string.isRequired, - }), 'null']).isRequired, - actions: PropTypes.oneOfType(['func', 'null']).isRequired, + subtitle: PropTypes.string, + used: PropTypes.number, + actions: PropTypes.func, + route: PropTypes.shape({ + url: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + }), }; export default withPermissionValues(CardItem); diff --git a/src/ui/common/CardList.js b/src/ui/common/CardList.js index cdb7b1497..a083be39e 100644 --- a/src/ui/common/CardList.js +++ b/src/ui/common/CardList.js @@ -1,3 +1,4 @@ +/* eslint-disable react/require-default-props */ import React from 'react'; import PropTypes from 'prop-types'; import { withPermissionValues } from 'ui/auth/withPermissions'; @@ -22,15 +23,14 @@ CardList.propTypes = { list: PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string.isRequired, code: PropTypes.string.isRequired, - subtitle: PropTypes.oneOfType(['string', 'null']).isRequired, - used: PropTypes.oneOfType(['number', 'null']).isRequired, + subtitle: PropTypes.string, + used: PropTypes.number, })).isRequired, - actions: PropTypes.oneOfType(['func', 'null']).isRequired, - route: PropTypes.oneOfType([ - PropTypes.shape({ - url: PropTypes.string.isRequired, - type: PropTypes.string.isRequired, - }), 'null']).isRequired, + actions: PropTypes.func, + route: PropTypes.shape({ + url: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + }), }; export default withPermissionValues(CardList); diff --git a/src/ui/fragments/list/FragmentGrid.js b/src/ui/fragments/list/FragmentGrid.js new file mode 100644 index 000000000..16b0dafa6 --- /dev/null +++ b/src/ui/fragments/list/FragmentGrid.js @@ -0,0 +1,143 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { intlShape, injectIntl } from 'react-intl'; +import { Col, Spinner, Pager } from 'patternfly-react'; + +import { renderFragmentListMenuActions } from 'ui/fragments/list/FragmentListMenuActions'; +import DeleteFragmentModalContainer from 'ui/fragments/list/DeleteFragmentModalContainer'; +import paginatorMessages from 'ui/paginatorMessages'; +import CardList from 'ui/common/CardList'; + +class FragmentGrid extends Component { + constructor(props) { + super(props); + + this.state = { + pageInputValue: props.page, + }; + + this.changePage = this.changePage.bind(this); + this.changePageSize = this.changePageSize.bind(this); + this.handleFormSubmit = this.handleFormSubmit.bind(this); + this.handlePageInput = this.handlePageInput.bind(this); + } + + componentWillMount() { + const { onWillMount } = this.props; + onWillMount(); + } + + + changePage(page) { + const { filters } = this.props; + this.props.onWillMount({ page, pageSize: this.props.pageSize }, filters); + + this.setState({ pageInputValue: page }); + } + + changePageSize(pageSize) { + const { filters } = this.props; + this.props.onWillMount({ page: 1, pageSize }, filters); + } + + handleFormSubmit() { + this.changePage(this.state.pageInputValue); + } + + handlePageInput(e) { + this.setState({ pageInputValue: e.target.value }); + } + + renderContent() { + const { + page, + pageSize, + intl, + fragments, + totalItems, + lastPage, + } = this.props; + const pagination = { + page, + perPage: pageSize, + perPageOptions: [5, 10, 15, 25, 50, 100, 150], + }; + + const newFragments = fragments.map(f => ( + { + title: f.code, + subtitle: Object.is(f.widgetType, null) ? '' : f.widgetType.title, + ...f, + })); + + const messages = Object.keys(paginatorMessages).reduce((acc, curr) => ( + { ...acc, [curr]: intl.formatMessage(paginatorMessages[curr]) } + ), {}); + + const itemsStart = totalItems === 0 ? 0 : ((page - 1) * pageSize) + 1; + const itemsEnd = Math.min(page * pageSize, totalItems); + + return ( + + + this.changePage(1)} + onPreviousPage={() => this.changePage(page - 1)} + onNextPage={() => this.changePage(page + 1)} + onLastPage={() => this.changePage(lastPage)} + messages={messages} + /> + ); + } + + render() { + return ( +
+ + {this.renderContent()} + + +
+ ); + } +} + +FragmentGrid.propTypes = { + intl: intlShape.isRequired, + onWillMount: PropTypes.func, + loading: PropTypes.bool, + fragments: PropTypes.arrayOf(PropTypes.shape({ + code: PropTypes.string.isRequired, + isLocked: PropTypes.bool, + widgetType: PropTypes.shape({ + code: PropTypes.string, + title: PropTypes.string, + }).isRequired, + pluginCode: PropTypes.string, + })), + page: PropTypes.number.isRequired, + pageSize: PropTypes.number.isRequired, + totalItems: PropTypes.number.isRequired, + lastPage: PropTypes.number.isRequired, + filters: PropTypes.string, +}; + +FragmentGrid.defaultProps = { + onWillMount: () => { }, + loading: false, + fragments: [], + filters: '', +}; + +export default injectIntl(FragmentGrid); diff --git a/src/ui/fragments/list/FragmentGridContainer .js b/src/ui/fragments/list/FragmentGridContainer .js new file mode 100644 index 000000000..86f73d81f --- /dev/null +++ b/src/ui/fragments/list/FragmentGridContainer .js @@ -0,0 +1,44 @@ +import { connect } from 'react-redux'; + +import { fetchFragments } from 'state/fragments/actions'; +import { getFragmentList, getFilters } from 'state/fragments/selectors'; +import { getLoading } from 'state/loading/selectors'; +import { getCurrentPage, getTotalItems, getPageSize, getLastPage } from 'state/pagination/selectors'; +import { setVisibleModal, setInfo } from 'state/modal/actions'; + +import FragmentGrid from 'ui/fragments/list/FragmentGrid'; +import { MODAL_ID } from 'ui/fragments/list/DeleteFragmentModal'; + +export const mapStateToProps = state => ( + { + fragments: getFragmentList(state), + page: getCurrentPage(state), + totalItems: getTotalItems(state), + pageSize: getPageSize(state), + lastPage: getLastPage(state), + loading: getLoading(state).fragments, + filters: getFilters(state), + } +); + +export const mapDispatchToProps = dispatch => ({ + onWillMount: (page = { page: 1, pageSize: 10 }, params) => { + dispatch(fetchFragments(page, params)); + }, + onClickDelete: (fragment) => { + dispatch(setVisibleModal(MODAL_ID)); + dispatch(setInfo({ type: 'fragment', code: fragment.code })); + }, +}); + +const FragmentGridContainer = + connect( + mapStateToProps, + mapDispatchToProps, + null, + { + pure: false, + }, + )(FragmentGrid); + +export default FragmentGridContainer; diff --git a/src/ui/fragments/list/FragmentListContent.js b/src/ui/fragments/list/FragmentListContent.js index 80314bcb0..3fea427db 100644 --- a/src/ui/fragments/list/FragmentListContent.js +++ b/src/ui/fragments/list/FragmentListContent.js @@ -3,29 +3,28 @@ import { Row, Col, Button } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; import { ROUTE_FRAGMENT_ADD } from 'app-init/router'; -import FragmentListTableContainer from './FragmentListTableContainer'; +import FragmentListTableContainer from 'ui/fragments/list/FragmentListTableContainer'; +import FragmentGridContainer from 'ui/fragments/list/FragmentGridContainer '; const FragmentListContent = () => (
- - - -
- - - + + + + +
); diff --git a/src/ui/fragments/list/FragmentListMenuActions.js b/src/ui/fragments/list/FragmentListMenuActions.js index f222d3f35..363c2b59d 100644 --- a/src/ui/fragments/list/FragmentListMenuActions.js +++ b/src/ui/fragments/list/FragmentListMenuActions.js @@ -66,6 +66,8 @@ class FragmentListMenuActions extends Component { } } +export const renderFragmentListMenuActions = props => ; + FragmentListMenuActions.propTypes = { onClickDelete: PropTypes.func, code: PropTypes.string.isRequired, diff --git a/src/ui/widgets/list/WidgetGridView.js b/src/ui/widgets/list/WidgetGridView.js index f125e83d4..e61063547 100644 --- a/src/ui/widgets/list/WidgetGridView.js +++ b/src/ui/widgets/list/WidgetGridView.js @@ -44,7 +44,8 @@ export const WidgetGrid = ({ ); const newWidgetList = useMemo(() => - widgetList.map(item => ({ ...item, title: item.titles[locale], subtitle: item.code })), [locale, widgetList]); + widgetList.map(item => ( + { ...item, title: item.titles[locale], subtitle: item.code })), [locale, widgetList]); const route = useMemo(() => ({ url: ROUTE_WIDGET_EDIT, type: 'widgetCode' }), []); return ( From e91d63335892efe7cd42c1882bbae0e4e68c2fc6 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 19 Dec 2024 15:21:37 +0100 Subject: [PATCH 107/211] fix eslint errors --- src/ui/dashboard/PagesList.js | 3 +- src/ui/fragments/list/FragmentSearchForm.js | 3 +- src/ui/pages/config/EmptyFrame.js | 4 ++- src/ui/pages/config/PageConfigPage.js | 2 -- src/ui/pages/config/WidgetFrame.js | 36 +++++++++------------ 5 files changed, 21 insertions(+), 27 deletions(-) diff --git a/src/ui/dashboard/PagesList.js b/src/ui/dashboard/PagesList.js index 2f9ecbbbb..97b199dfc 100644 --- a/src/ui/dashboard/PagesList.js +++ b/src/ui/dashboard/PagesList.js @@ -35,7 +35,7 @@ class PagesList extends Component { } getColumnDefs() { - const { columnOrder, language } = this.props; + const { columnOrder } = this.props; const columnDefs = { pageModel: { @@ -174,7 +174,6 @@ PagesList.propTypes = { page: PropTypes.number.isRequired, pageSize: PropTypes.number.isRequired, totalItems: PropTypes.number.isRequired, - language: PropTypes.string.isRequired, columnOrder: PropTypes.arrayOf(PropTypes.string), onSetColumnOrder: PropTypes.func, }; diff --git a/src/ui/fragments/list/FragmentSearchForm.js b/src/ui/fragments/list/FragmentSearchForm.js index 33abacfe2..560066215 100644 --- a/src/ui/fragments/list/FragmentSearchForm.js +++ b/src/ui/fragments/list/FragmentSearchForm.js @@ -1,8 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { reduxForm, Field } from 'redux-form'; -import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl'; -import { Row, Col, FormGroup, Button } from 'patternfly-react'; +import { defineMessages, injectIntl, intlShape } from 'react-intl'; const msgs = defineMessages({ codePlaceholder: { diff --git a/src/ui/pages/config/EmptyFrame.js b/src/ui/pages/config/EmptyFrame.js index b590736e5..3ff5426b4 100644 --- a/src/ui/pages/config/EmptyFrame.js +++ b/src/ui/pages/config/EmptyFrame.js @@ -1,7 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -const EmptyFrame = ({ frameName, frameIsMainFrame, connectDropTarget, isOver }) => { +const EmptyFrame = ({ + frameName, frameIsMainFrame, connectDropTarget, isOver, +}) => { const classNameAr = ['EmptyFrame']; if (isOver) { classNameAr.push('EmptyFrame--drag-hover'); diff --git a/src/ui/pages/config/PageConfigPage.js b/src/ui/pages/config/PageConfigPage.js index 0af22acdb..44872b848 100644 --- a/src/ui/pages/config/PageConfigPage.js +++ b/src/ui/pages/config/PageConfigPage.js @@ -6,7 +6,6 @@ import { Grid, Row, Col, - Breadcrumb, DropdownButton, MenuItem, Alert, @@ -16,7 +15,6 @@ import { } from 'patternfly-react'; import { Panel, Button, ButtonToolbar } from 'react-bootstrap'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; import PageStatusIcon from 'ui/pages/common/PageStatusIcon'; diff --git a/src/ui/pages/config/WidgetFrame.js b/src/ui/pages/config/WidgetFrame.js index 16cb66a4d..7ff0b0f3e 100644 --- a/src/ui/pages/config/WidgetFrame.js +++ b/src/ui/pages/config/WidgetFrame.js @@ -38,22 +38,22 @@ class WidgetFrame extends Component { const configMenuItems = widgetHasConfig && (configUiName || widgetHasConfigForm) ? [ - onClickSettings && onClickSettings(frameId)} - > - - , - ] + onClickSettings && onClickSettings(frameId)} + > + + , + ] : null; const cloneMenuItems = widgetHasConfig && configUiName ? [ - + onClickSaveAs && onClickSaveAs({ widgetId, @@ -62,10 +62,10 @@ class WidgetFrame extends Component { configUiName, }) } - > - - , - ] + > + + , + ] : null; actionsMenu = ( @@ -132,10 +132,6 @@ class WidgetFrame extends Component { break; } - const mainFrameLabel = frameIsMainFrame ? ( -
Main Frame
- ) : null; - let component = (
Date: Thu, 19 Dec 2024 15:43:23 +0100 Subject: [PATCH 108/211] refactor: move Components/UX Fragments breadcrumb --- src/ui/fragments/add/AddFragmentPage.js | 30 +++++++------------ src/ui/fragments/clone/CloneFragmentPage.js | 26 +++++----------- src/ui/fragments/detail/DetailFragmentPage.js | 25 +++++----------- src/ui/fragments/edit/EditFragmentPage.js | 26 +++++----------- 4 files changed, 34 insertions(+), 73 deletions(-) diff --git a/src/ui/fragments/add/AddFragmentPage.js b/src/ui/fragments/add/AddFragmentPage.js index 656ad7884..1ddf9c052 100644 --- a/src/ui/fragments/add/AddFragmentPage.js +++ b/src/ui/fragments/add/AddFragmentPage.js @@ -1,34 +1,24 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; +import { Grid, Row, Col } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; +import { SUPERUSER_PERMISSION } from 'state/permissions/const'; +import { ROUTE_FRAGMENT_LIST } from 'app-init/router'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import AddFormContainer from 'ui/fragments/add/AddFormContainer'; -import { ROUTE_FRAGMENT_LIST } from 'app-init/router'; import withPermissions from 'ui/auth/withPermissions'; -import { SUPERUSER_PERMISSION } from 'state/permissions/const'; export const AddFragmentPageBody = () => ( + - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - diff --git a/src/ui/fragments/detail/DetailFragmentPage.js b/src/ui/fragments/detail/DetailFragmentPage.js index 5891f72f4..cac5bb0ce 100644 --- a/src/ui/fragments/detail/DetailFragmentPage.js +++ b/src/ui/fragments/detail/DetailFragmentPage.js @@ -1,14 +1,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { Grid, Breadcrumb, Row, Col } from 'patternfly-react'; +import { Grid, Row, Col } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import PageTitle from 'ui/internal-page/PageTitle'; import InternalPage from 'ui/internal-page/InternalPage'; import DetailFragmentTable from 'ui/fragments/detail/DetailFragmentTable'; import FragmentReferenceTable from 'ui/fragments/detail/FragmentReferenceTable'; import PageTemplateReferenceTable from 'ui/fragments/detail/PageTemplateReferenceTable'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import WidgetTypeReferenceTable from 'ui/fragments/detail/WidgetTypeReferenceTable'; import { ROUTE_FRAGMENT_LIST } from 'app-init/router'; @@ -19,22 +19,13 @@ class DetailFragmentPage extends Component { render() { return ( + - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - From 2df6d9392739344e2c152d52d4023f08b8e712d4 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Thu, 19 Dec 2024 16:39:31 +0100 Subject: [PATCH 109/211] refactor users search and align pagination footer style --- sass/common/form/RenderTextInput.scss | 1 + .../list/PageTemplateListTable.scss | 1 - sass/pages/common/SeoInfo.scss | 5 +- sass/pages/config/PageConfigPage.scss | 24 ++++- sass/pages/config/ToolbarPageConfig.scss | 4 + sass/patternfly.scss | 53 +++++++++ sass/users/common/UserForm.scss | 101 +++++++++++++++++- src/locales/en.js | 1 + src/locales/it.js | 1 + src/ui/users/list/UserListPage.js | 4 +- src/ui/users/list/UserSearchForm.js | 5 +- 11 files changed, 188 insertions(+), 12 deletions(-) diff --git a/sass/common/form/RenderTextInput.scss b/sass/common/form/RenderTextInput.scss index 052addc43..15963240f 100644 --- a/sass/common/form/RenderTextInput.scss +++ b/sass/common/form/RenderTextInput.scss @@ -2,6 +2,7 @@ &__input-body { display: flex; border: 1px solid $color-vertical-grey; + border-radius: $radius-xxs; &:focus-within { // sass-lint:disable-line nesting-depth border-color: $color-mid-blue; diff --git a/sass/page-templates/list/PageTemplateListTable.scss b/sass/page-templates/list/PageTemplateListTable.scss index b16dc34cd..1f9d648f8 100644 --- a/sass/page-templates/list/PageTemplateListTable.scss +++ b/sass/page-templates/list/PageTemplateListTable.scss @@ -72,7 +72,6 @@ height: 100%; border-radius: 4px; background-color: #ffffff; - padding: 4px; } .PageConfigGridCol--frame { diff --git a/sass/pages/common/SeoInfo.scss b/sass/pages/common/SeoInfo.scss index e69f717da..c9542c7aa 100644 --- a/sass/pages/common/SeoInfo.scss +++ b/sass/pages/common/SeoInfo.scss @@ -16,7 +16,10 @@ &__section { margin-bottom: 40px; padding: 20px 0; - background-color: $color-pf-black-200; + + .RenderTextInput{ + border-radius: 4px; + } } &__addmetadata { diff --git a/sass/pages/config/PageConfigPage.scss b/sass/pages/config/PageConfigPage.scss index 17fc78de0..4f5bd3848 100644 --- a/sass/pages/config/PageConfigPage.scss +++ b/sass/pages/config/PageConfigPage.scss @@ -6,10 +6,32 @@ display: flex; justify-content: space-between; flex-direction: column; + padding-left: 0px; } &__tabs { - margin-top: 10px; + margin-top: 0px; + + .nav-tabs{ + + li > a{ + border-bottom: 2px; + border: none; + } + + li > a:hover, a:focus,a:active{ + border: none; + + } + + li.active > a{ + border-bottom: 2px; + } + } + + .tab-content{ + padding-left: 20px; + } } &__title { diff --git a/sass/pages/config/ToolbarPageConfig.scss b/sass/pages/config/ToolbarPageConfig.scss index 9febada60..aa19121fc 100644 --- a/sass/pages/config/ToolbarPageConfig.scss +++ b/sass/pages/config/ToolbarPageConfig.scss @@ -270,6 +270,10 @@ .tab-content { display: none; + + .active{ + padding: 20px; + } } } // sass-lint:enable class-name-format force-element-nesting nesting-depth no-qualifying-elements diff --git a/sass/patternfly.scss b/sass/patternfly.scss index d14c73a41..fcd680021 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -261,4 +261,57 @@ $fa-square-o: '\f096'; padding: 6px; } +.content-view-pf-pagination{ + background-color: white; + + .form-group{ + align-items: center; + font-size: 14px; + + .form-control{ + font-size: 14px; + } + + + .dropdown-toggle{ + background-color: transparent; + } + } + +} + +.pagination{ + li > a{ + border: none; + outline: none; + vertical-align: middle; + background: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + } + + .disabled{ + a,a:hover{ + background: none; + } + } + + li > a:hover{ + background-color: $color-neutral-grey; + box-shadow: none; + background: none; + } + + li > a.disabled{ + background: none; + } + + +} + + + // sass-lint:enable class-name-format diff --git a/sass/users/common/UserForm.scss b/sass/users/common/UserForm.scss index 8bf75ad8c..8dd823206 100644 --- a/sass/users/common/UserForm.scss +++ b/sass/users/common/UserForm.scss @@ -3,7 +3,6 @@ &__content-edit { margin-bottom: 15px; padding: 10px 0; - border: 1px solid $color-pf-black-300; background-color: $color-pf-black-150; } @@ -12,6 +11,102 @@ } } -.UserSearchForm { - background-color: $color-white; +.UserListPage{ + + .formRow{ + display: flex; + border: none; + outline: none; + + .col-xs-6{ + border: none; + outline: none; + } + + .well{ + border: none; + outline: none; + padding: 0; + box-shadow: none; + margin-bottom: 11px; + + + h3{ + margin-top: 10px; + } + } + + .UserSearchForm { + background-color: $color-white; + display: flex; + flex: 1; + justify-content: flex-start; + gap: 20px; + + + + .row{ + display: flex; + align-items: center; + } + + .form-group{ + display: flex; + margin: 0 !important; + border: none; + + input{ + padding: 6px 0px 6px 6px; + width: 100%; + min-width: 220px; + font-size: 14px; + font-style: normal; + } + } + } + + } + + .content-view-pf-pagination{ + background-color: white; + + .form-group{ + align-items: center; + font-size: 14px; + + .form-control{ + font-size: 14px; + } + + + .dropdown-toggle{ + background-color: transparent; + } + } + + } + + .pagination{ + li > a{ + border: none; + outline: none; + vertical-align: middle; + background: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 16px; + } + + li > a:hover{ + background-color: $color-neutral-grey; + box-shadow: none; + background: none; + } + + + } + } + diff --git a/src/locales/en.js b/src/locales/en.js index 1f0b33e9c..1e986015a 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -173,6 +173,7 @@ export default { 'Save the current changes? All changes will be lost if you do not save now.', 'app.upload': 'Upload', 'app.search': 'Search', + 'app.searchUser': 'Search Username', 'app.back': 'Back', 'app.submit': 'Submit', 'app.fieldsRequired': 'Required fields', diff --git a/src/locales/it.js b/src/locales/it.js index 346ce68b6..cbe0c2fc2 100644 --- a/src/locales/it.js +++ b/src/locales/it.js @@ -171,6 +171,7 @@ export default { 'app.dontSave': 'Non salvare', 'app.upload': 'Upload', 'app.search': 'Cerca', + 'app.searchUser': 'Ricerca utente', 'app.back': 'Indietro', 'app.submit': 'Invia', 'app.fieldsRequired': 'Campi obbligatori', diff --git a/src/ui/users/list/UserListPage.js b/src/ui/users/list/UserListPage.js index 5596afd33..ad337af39 100644 --- a/src/ui/users/list/UserListPage.js +++ b/src/ui/users/list/UserListPage.js @@ -30,8 +30,8 @@ export const UserListPageBody = ({ userPermissions }) => ( /> - - + + diff --git a/src/ui/users/list/UserSearchForm.js b/src/ui/users/list/UserSearchForm.js index 8ed3c2d3b..6bf9d13b0 100644 --- a/src/ui/users/list/UserSearchForm.js +++ b/src/ui/users/list/UserSearchForm.js @@ -44,12 +44,9 @@ export class UserSearchFormBody extends Component { const { intl } = this.props; return (
-

+

- Date: Thu, 19 Dec 2024 16:59:28 +0100 Subject: [PATCH 110/211] fix: Components/MFE e Widget list view --- src/ui/widgets/list/WidgetListTable.js | 36 ++++++++++++++------------ 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/src/ui/widgets/list/WidgetListTable.js b/src/ui/widgets/list/WidgetListTable.js index 1d4e76970..bea1ef483 100644 --- a/src/ui/widgets/list/WidgetListTable.js +++ b/src/ui/widgets/list/WidgetListTable.js @@ -54,34 +54,38 @@ export const WidgetListTableBody = ({ }, }; - const Actions = item => ( -
- - {item.hasConfig && ( + const Actions = (item) => { + const { values: { code }, original: { used, locked, hasConfig } } = item; + + return ( +
+ + {hasConfig && ( onNewUserWidget(item.code)} + onClick={() => onNewUserWidget(code)} > )} - onEdit(item.code)} - > - - - {!item.locked && item.used === 0 && ( + onEdit(code)} + > + + + {!locked && used === 0 && ( onDelete(item.code)} + onClick={() => onDelete(code)} > )} - -
- ); + +
+ ); + }; const columns = columnOrder.map(column => ({ ...columnDefs[column], accessor: column })); From 2316197bc9841802b42ff3aec67ad548278a6d25 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Thu, 19 Dec 2024 17:24:13 +0100 Subject: [PATCH 111/211] align tabs design in designer page --- sass/pages/config/PageConfigPage.scss | 23 ++++++++++++++++++----- sass/patternfly.scss | 1 + 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/sass/pages/config/PageConfigPage.scss b/sass/pages/config/PageConfigPage.scss index 4f5bd3848..bb84026dc 100644 --- a/sass/pages/config/PageConfigPage.scss +++ b/sass/pages/config/PageConfigPage.scss @@ -15,17 +15,30 @@ .nav-tabs{ li > a{ - border-bottom: 2px; - border: none; + border-bottom: 2px solid $color-border-gray; + border-top: none; + border-right: none; + border-left: none; + outline:none; + font-weight: 500; + z-index: 2000; } li > a:hover, a:focus,a:active{ - border: none; - + outline: none; + border-bottom: 2px solid $color-primary; + border-top: none; + border-right: none; + border-left: none; } li.active > a{ - border-bottom: 2px; + border-bottom: 2px solid $color-blue-brand-primary; + color: $color-blue-brand-primary; + border-top: none; + border-right: none; + border-left: none; + } } diff --git a/sass/patternfly.scss b/sass/patternfly.scss index fcd680021..925277b5b 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -52,6 +52,7 @@ $color-mid-orange: #fca907; $color-mid-blue-semi: rgba(0, 136, 206, 0.6); $color-row-selected: #def3ff; $color-tour-primary: #00a0df; +$color-blue-brand-primary:#1A75FF; $color-border-gray: #bbbbbb; $color-sidebar-dark-bg: #393f44; $color-dragitem-bg: #292e34; From 597bc39d042f51a67a946885e6bdd81119cac9eb Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Thu, 19 Dec 2024 17:39:24 +0100 Subject: [PATCH 112/211] feat: Template Modal added --- .../list/PageTemplateListTable.scss | 41 +++++++++-- sass/pages/common/FindTemplateModal.scss | 49 +++++++++++-- .../list/PageTemplatePreview.js | 48 +++++++++---- src/ui/pages/common/FindTemplateModal.js | 69 ++++++++----------- 4 files changed, 141 insertions(+), 66 deletions(-) diff --git a/sass/page-templates/list/PageTemplateListTable.scss b/sass/page-templates/list/PageTemplateListTable.scss index 1f9d648f8..790c921c3 100644 --- a/sass/page-templates/list/PageTemplateListTable.scss +++ b/sass/page-templates/list/PageTemplateListTable.scss @@ -9,6 +9,33 @@ flex-wrap: wrap; } + .Page_Template_Button { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 0; + border: 1px solid transparent; + margin: 0; + background-color: transparent; + + &:focus { + border: 1px solid #7dc3e8 + } + } + + .Page_Template_Button_Active { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 0; + border: 1px solid transparent; + margin: 0; + background-color: transparent; + border: 1px solid #7dc3e8 + } + .Page_Template_Preview_Container { display: flex; flex-direction: column; @@ -23,14 +50,13 @@ background: rgba(240, 246, 255, 1); border: 1px solid rgba(204, 224, 255, 1); position: relative; - } - .PageConfigGridRow{ + .PageConfigGridRow { border: none; } - .PageConfigGridRow{ + .PageConfigGridRow { border: none; } @@ -51,14 +77,14 @@ min-height: 0 !important; border: none; - .PageConfigGridRow{ + .PageConfigGridRow { border: none; } - - .PageConfigGridRow{ + + .PageConfigGridRow { border: none; - span{ + span { display: none; } } @@ -70,6 +96,7 @@ .PageConfigGrid { height: 100%; + padding: 2px; border-radius: 4px; background-color: #ffffff; } diff --git a/sass/pages/common/FindTemplateModal.scss b/sass/pages/common/FindTemplateModal.scss index 9c4a5a081..629c6a236 100644 --- a/sass/pages/common/FindTemplateModal.scss +++ b/sass/pages/common/FindTemplateModal.scss @@ -4,12 +4,15 @@ padding: 0; list-style: none; overflow-y: auto; + height: fit-content; + max-height: 450px; } &__template-list-button { - padding: 0; - border: 0; - background: transparent; + padding: 10px; + border: 1px solid #CCE0FF; + border-radius: 4px; + background-color: $color-background-primary; } &__template-list-li { @@ -31,6 +34,41 @@ &__modal { width: 672px; + // background-color: purple; + + + .modal-content { + padding: 24px 20px; + display: flex; + flex-direction: column; + gap: 16px; + border-radius: 8px; + + .modal-header { + background: none; + padding: 0; + + .modal-title { + font-size: 18px; + font-weight: 600; + } + } + + + .modal-body { + display: flex; + flex-direction: column; + gap: 16px; + padding: 0; + } + + .modal-footer { + display: flex; + justify-content: flex-end; + padding: 0; + margin-top: 0; + } + } } &__caption { @@ -38,7 +76,6 @@ } &__search-input { - width: 50%; - margin: 22px; + border-radius: $radius-s; } -} +} \ No newline at end of file diff --git a/src/ui/page-templates/list/PageTemplatePreview.js b/src/ui/page-templates/list/PageTemplatePreview.js index 116213c34..08bbc29f9 100644 --- a/src/ui/page-templates/list/PageTemplatePreview.js +++ b/src/ui/page-templates/list/PageTemplatePreview.js @@ -1,26 +1,30 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import PageConfigGrid from 'ui/pages/config/PageConfigGrid'; import { getCellMap } from 'state/page-templates/helpers'; -const PageTemplatePreview = ({ item, actions }) => { +const PageTemplatePreview = ({ + item, actions, active, onClick, +}) => { const { descr } = item; const cellMap = getCellMap(item); return ( -
-
- {actions && ( -
- {actions} + +
+
+ {actions && ( +
+ {actions} +
+ )} +
+
- )} -
-
+ {descr}
- {descr} -
+ ); }; @@ -50,6 +54,26 @@ PageTemplatePreview.propTypes = }).isRequired, }), action: PropTypes.func, + active: PropTypes.bool, + onClick: PropTypes.func, }.isRequired; export default PageTemplatePreview; + +const Wrapper = ({ children, active, onClick }) => { + if (!onClick) return {children}; + return ( + + ); +}; + +Wrapper.propTypes = { + children: PropTypes.func.isRequired, + active: PropTypes.bool, + onClick: PropTypes.func, +}.isRequired; diff --git a/src/ui/pages/common/FindTemplateModal.js b/src/ui/pages/common/FindTemplateModal.js index 45165628b..2bd855ae9 100644 --- a/src/ui/pages/common/FindTemplateModal.js +++ b/src/ui/pages/common/FindTemplateModal.js @@ -1,11 +1,11 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { Modal, Col, Row, Spinner, DropdownKebab, MenuItem, Button } from 'patternfly-react'; - +import { Modal, Spinner, DropdownKebab, MenuItem, Button } from 'patternfly-react'; 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 Search from 'ui/common/Search'; +import PageTemplatePreview from 'ui/page-templates/list/PageTemplatePreview'; export const MODAL_ID = 'FindTemplateModal'; @@ -39,36 +39,29 @@ const FindTemplateModal = ({ pageTemplates .filter(({ code, descr }) => !searchValue || code.includes(searchValue) || descr.includes(searchValue)) - .map(({ code, descr }) => ( -
  • - - - { - const templatePath = ROUTE_PAGE_TEMPLATE_DETAIL.replace(':pageTemplateCode', code); - const link = `${global.location.href.split('/page')[0]}${templatePath}`; - window.open(link); - }} - > - - - -
    - {descr}
    -
    • +
    )) ); @@ -96,16 +89,10 @@ const FindTemplateModal = ({ modalCloseCleanup={handleModalClose} > - - - - - -
      - {renderRows()} -
    - -     + +
    + {renderRows()} +
    ); From 6f48c7818c15d36efd622cf96a04a3f8cb9f407f Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 19 Dec 2024 17:52:20 +0100 Subject: [PATCH 113/211] refactor: move Components/MFE e Widgets/Add breadcrumb --- .../newUserWidget/NewUserWidgetPage.js | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/src/ui/widgets/newUserWidget/NewUserWidgetPage.js b/src/ui/widgets/newUserWidget/NewUserWidgetPage.js index 5e39fb962..0fb03e369 100644 --- a/src/ui/widgets/newUserWidget/NewUserWidgetPage.js +++ b/src/ui/widgets/newUserWidget/NewUserWidgetPage.js @@ -1,10 +1,9 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; +import { Grid, Row, Col } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import PageTitle from 'ui/internal-page/PageTitle'; import InternalPage from 'ui/internal-page/InternalPage'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import NewUserWidgetFormContainer from 'ui/widgets/newUserWidget/NewUserWidgetFormContainer'; import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; import { ROUTE_WIDGET_LIST } from 'app-init/router'; @@ -13,30 +12,18 @@ import { SUPERUSER_PERMISSION } from 'state/permissions/const'; export const NewUserWidgetPageBody = () => ( + - - -
    - - - - - - - - - - - -
    -
    -
    -
    - - - + +
    + From 6d575fa8fcbd02cfead1fdf1707216adf0e3dd2f Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 20 Dec 2024 09:20:57 +0100 Subject: [PATCH 114/211] refactor: move Pages/* breadcrumb --- src/ui/pages/add/PagesAddPage.js | 26 ++++++++------------------ src/ui/pages/clone/PagesClonePage.js | 26 ++++++++------------------ src/ui/pages/config/PageConfigPage.js | 13 ++----------- src/ui/pages/detail/PagesDetailPage.js | 21 +++++++-------------- src/ui/pages/edit/PagesEditPage.js | 26 ++++++++------------------ 5 files changed, 33 insertions(+), 79 deletions(-) diff --git a/src/ui/pages/add/PagesAddPage.js b/src/ui/pages/add/PagesAddPage.js index e0c792fc5..825725796 100644 --- a/src/ui/pages/add/PagesAddPage.js +++ b/src/ui/pages/add/PagesAddPage.js @@ -1,11 +1,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; +import { Grid, Row, Col } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import PagesAddFormContainer from 'ui/pages/add/PagesAddFormContainer'; import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; import AppTourContainer from 'ui/app-tour/AppTourContainer'; @@ -20,22 +19,13 @@ class PagesAddPage extends Component { render() { return ( + - - - - - - - - - - - - - - - diff --git a/src/ui/pages/clone/PagesClonePage.js b/src/ui/pages/clone/PagesClonePage.js index 737a03dba..7f943c38d 100644 --- a/src/ui/pages/clone/PagesClonePage.js +++ b/src/ui/pages/clone/PagesClonePage.js @@ -1,10 +1,9 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; +import { Grid, Row, Col } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import CloneFormContainer from 'ui/pages/clone/CloneFormContainer'; import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; import { ROUTE_PAGE_TREE } from 'app-init/router'; @@ -13,22 +12,13 @@ import { MANAGE_PAGES_PERMISSION } from 'state/permissions/const'; export const PagesClonePageBody = () => ( + - - - - - - - - - - - - - - - diff --git a/src/ui/pages/config/PageConfigPage.js b/src/ui/pages/config/PageConfigPage.js index 44872b848..20aecfa2f 100644 --- a/src/ui/pages/config/PageConfigPage.js +++ b/src/ui/pages/config/PageConfigPage.js @@ -22,10 +22,10 @@ import PageConfigGridContainer from 'ui/pages/config/PageConfigGridContainer'; import ToolbarPageConfigContainer from 'ui/pages/config/ToolbarPageConfigContainer'; import SelectedPageInfoTableContainer from 'ui/pages/common/SelectedPageInfoTableContainer'; import AppTourContainer from 'ui/app-tour/AppTourContainer'; -import { APP_TOUR_STARTED } from 'state/app-tour/const'; -import { PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED } from 'state/pages/const'; import PagesEditFormContainer from 'ui/pages/edit/PagesEditFormContainer'; import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; +import { APP_TOUR_STARTED } from 'state/app-tour/const'; +import { PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED } from 'state/pages/const'; const msgs = defineMessages({ appYes: { @@ -339,15 +339,6 @@ class PageConfigPage extends Component { xs={toolbarCollapsed ? 12 : 8} lg={toolbarCollapsed ? 12 : 9} > - {/* - - - - - - - */} - + - - - - - - - - - - - - + - - - - - - - - - - - - - - - From 815a6534f14bf075630f47eb0c66d307fbec363b Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 20 Dec 2024 09:38:40 +0100 Subject: [PATCH 115/211] refactor: move Pages/Templates breadcrumb --- .../page-templates/add/PageTemplateAddPage.js | 26 +++++----------- .../clone/PageTemplateClonePage.js | 30 +++++++------------ .../detail/PageTemplateDetailPage.js | 25 +++++----------- .../edit/PageTemplateEditPage.js | 26 +++++----------- 4 files changed, 34 insertions(+), 73 deletions(-) diff --git a/src/ui/page-templates/add/PageTemplateAddPage.js b/src/ui/page-templates/add/PageTemplateAddPage.js index 10d7e5718..dc86d1fb1 100644 --- a/src/ui/page-templates/add/PageTemplateAddPage.js +++ b/src/ui/page-templates/add/PageTemplateAddPage.js @@ -1,10 +1,9 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; +import { Grid, Row, Col } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import PageTemplateFormContainer from 'ui/page-templates/common/PageTemplateFormContainer'; import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; import { FORM_MODE_ADD } from 'state/page-templates/const'; @@ -14,22 +13,13 @@ import { SUPERUSER_PERMISSION } from 'state/permissions/const'; export const PageTemplateAddPageBody = () => ( + - - - - - - - - - - - - - - - diff --git a/src/ui/page-templates/clone/PageTemplateClonePage.js b/src/ui/page-templates/clone/PageTemplateClonePage.js index 2d97bab09..85c073b42 100644 --- a/src/ui/page-templates/clone/PageTemplateClonePage.js +++ b/src/ui/page-templates/clone/PageTemplateClonePage.js @@ -1,35 +1,25 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; +import { Grid, Row, Col } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import PageTemplateFormContainer from 'ui/page-templates/common/PageTemplateFormContainer'; import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; -import { FORM_MODE_CLONE } from 'state/page-templates/const'; -import { ROUTE_PAGE_TEMPLATE_LIST } from 'app-init/router'; import withPermissions from 'ui/auth/withPermissions'; +import { FORM_MODE_CLONE } from 'state/page-templates/const'; import { SUPERUSER_PERMISSION } from 'state/permissions/const'; +import { ROUTE_PAGE_TEMPLATE_LIST } from 'app-init/router'; export const PageTemplateClonePageBody = () => ( + - - - - - - - - - - - - - - - diff --git a/src/ui/page-templates/detail/PageTemplateDetailPage.js b/src/ui/page-templates/detail/PageTemplateDetailPage.js index 617736a0d..a0f73a60e 100644 --- a/src/ui/page-templates/detail/PageTemplateDetailPage.js +++ b/src/ui/page-templates/detail/PageTemplateDetailPage.js @@ -1,35 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb, Button } from 'patternfly-react'; +import { Grid, Row, Col, Button } from 'patternfly-react'; import { Link } from 'react-router-dom'; import { routeConverter } from '@entando/utils'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import SelectedPageTemplateDetailTableContainer from 'ui/page-templates/detail/SelectedPageTemplateDetailTableContainer'; import PageTemplatePageReferencesTableContainer from 'ui/page-templates/detail/PageTemplatePageReferencesTableContainer'; import { ROUTE_PAGE_TEMPLATE_LIST, ROUTE_PAGE_TEMPLATE_EDIT } from 'app-init/router'; export const PageTemplateDetailPageBody = ({ pageTemplateCode }) => ( + - - - - - - - - - - - - - - - diff --git a/src/ui/page-templates/edit/PageTemplateEditPage.js b/src/ui/page-templates/edit/PageTemplateEditPage.js index ef1ac2ff8..a09d94b72 100644 --- a/src/ui/page-templates/edit/PageTemplateEditPage.js +++ b/src/ui/page-templates/edit/PageTemplateEditPage.js @@ -1,10 +1,9 @@ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { Grid, Row, Col, Breadcrumb } from 'patternfly-react'; +import { Grid, Row, Col } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import PageTemplateFormContainer from 'ui/page-templates/common/PageTemplateFormContainer'; import ErrorsAlertContainer from 'ui/common/form/ErrorsAlertContainer'; import { FORM_MODE_EDIT } from 'state/page-templates/const'; @@ -14,22 +13,13 @@ import { SUPERUSER_PERMISSION } from 'state/permissions/const'; export const PageTemplateEditPageBody = () => ( + - - - - - - - - - - - - - - - From 9b6562379863f1991b705f550ae348d68e6e2a62 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 20 Dec 2024 10:19:53 +0100 Subject: [PATCH 116/211] refactor: HeadersBreadcrumb --- sass/widgets/common/WidgetPage.scss | 4 +-- src/ui/internal-page/HeaderBreadcrumb.js | 24 +++++++++++---- src/ui/widgets/edit/EditWidgetPage.js | 39 +++++++----------------- 3 files changed, 30 insertions(+), 37 deletions(-) diff --git a/sass/widgets/common/WidgetPage.scss b/sass/widgets/common/WidgetPage.scss index d2a434fd1..1b194986a 100644 --- a/sass/widgets/common/WidgetPage.scss +++ b/sass/widgets/common/WidgetPage.scss @@ -16,9 +16,7 @@ } &__header { - padding: 20px; - border-bottom: solid 2px $color-grey-border; - background-color: $color-white; + padding-inline: 20px; } &__body { diff --git a/src/ui/internal-page/HeaderBreadcrumb.js b/src/ui/internal-page/HeaderBreadcrumb.js index 34bafee55..d03a472ac 100644 --- a/src/ui/internal-page/HeaderBreadcrumb.js +++ b/src/ui/internal-page/HeaderBreadcrumb.js @@ -1,10 +1,10 @@ -/* eslint-disable react/prop-types */ import React from 'react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; -import Icon from 'ui/common/Icon'; -import { FormattedMessage } from 'react-intl'; import { createPortal } from 'react-dom'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; import { Breadcrumb } from 'patternfly-react'; +import BreadcrumbItem from 'ui/common/BreadcrumbItem'; +import Icon from 'ui/common/Icon'; const HeaderBreadcrumb = ({ breadcrumbs, ...props }) => { const breadcrumbContainer = document.getElementById('header-breadcrumbs'); @@ -20,13 +20,25 @@ const HeaderBreadcrumb = ({ breadcrumbs, ...props }) => { /> App Builder - {breadcrumbs.map(({ label, ...rest }) => ( + {breadcrumbs.map(({ label, customLabel = '', ...rest }) => ( - + {label && } + {customLabel && { customLabel }} ))} , breadcrumbContainer, ); }; +HeaderBreadcrumb.propTypes = { + breadcrumbs: PropTypes.arrayOf(PropTypes.shape({ + label: PropTypes.string, + to: PropTypes.string, + active: PropTypes.boolean, + customLabel: PropTypes.string, + })).isRequired, + +}; + + export default HeaderBreadcrumb; diff --git a/src/ui/widgets/edit/EditWidgetPage.js b/src/ui/widgets/edit/EditWidgetPage.js index 79e0bd376..a6371cdc4 100644 --- a/src/ui/widgets/edit/EditWidgetPage.js +++ b/src/ui/widgets/edit/EditWidgetPage.js @@ -1,11 +1,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; -import { Breadcrumb } from 'patternfly-react'; -import BreadcrumbItem from 'ui/common/BreadcrumbItem'; import InternalPage from 'ui/internal-page/InternalPage'; import PageTitle from 'ui/internal-page/PageTitle'; +import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import EditWidgetFormContainer from 'ui/widgets/edit/EditWidgetFormContainer'; import { ROUTE_WIDGET_LIST } from 'app-init/router'; @@ -17,33 +15,18 @@ class EditWidgetPage extends Component { render() { return ( +
    -
    -
    - - - - - - - - - - - - {this.props.widgetName} - - -
    -
    -
    -
    -
    -
    - -
    + +
    +
    -
    From 336ab4b2d51beeefd4103c6e34972e235964541f Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 20 Dec 2024 10:33:00 +0100 Subject: [PATCH 117/211] minor style change Users/Restriction --- sass/patternfly.scss | 9 +++++++++ sass/users/restrictions/RestrictionsForm.scss | 6 ++++++ 2 files changed, 15 insertions(+) diff --git a/sass/patternfly.scss b/sass/patternfly.scss index 925277b5b..19c0a656e 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -111,6 +111,15 @@ $fa-square-o: '\f096'; background: $color-pf-black-100; } +.bootstrap-switch { + border-radius: $radius-xxs; + border: 1px solid $color-content-07; +} + +.bootstrap-switch-handle-on.bootstrap-switch-primary { + background-color: $color-brand-primary; +} + .btn-transparent { border: 0; outline: none; diff --git a/sass/users/restrictions/RestrictionsForm.scss b/sass/users/restrictions/RestrictionsForm.scss index 257b31d07..e99c05aa4 100644 --- a/sass/users/restrictions/RestrictionsForm.scss +++ b/sass/users/restrictions/RestrictionsForm.scss @@ -1,5 +1,7 @@ // sass-lint:disable class-name-format nesting-depth .UserRestrictionsPage { + font-family: Inter; + .form-horizontal { .control-label { text-align: left; @@ -13,5 +15,9 @@ .AppendedLabel { margin-left: 5px; } + + .btn-primary { + padding-inline: 16px; + } } } From 1ac4d3e56735ed995dd55991deae1c94db2491c6 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Fri, 20 Dec 2024 11:14:13 +0100 Subject: [PATCH 118/211] remove wrong z index --- sass/pages/config/PageConfigPage.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/sass/pages/config/PageConfigPage.scss b/sass/pages/config/PageConfigPage.scss index bb84026dc..5037f74eb 100644 --- a/sass/pages/config/PageConfigPage.scss +++ b/sass/pages/config/PageConfigPage.scss @@ -21,7 +21,6 @@ border-left: none; outline:none; font-weight: 500; - z-index: 2000; } li > a:hover, a:focus,a:active{ From 2cfbba251131b7785ef70a17881cf5a934309cd7 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Fri, 20 Dec 2024 11:52:00 +0100 Subject: [PATCH 119/211] update label alignment in settings tap --- sass/pages/common/PageForm.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/sass/pages/common/PageForm.scss b/sass/pages/common/PageForm.scss index e49272d7b..1d629a68b 100644 --- a/sass/pages/common/PageForm.scss +++ b/sass/pages/common/PageForm.scss @@ -22,4 +22,12 @@ content: "\f192"; vertical-align: middle; } + + .FormLabel{ + display: flex; + align-items: center; + flex: 1; + justify-content: flex-start; + text-align: left; + } } \ No newline at end of file From 42604c1299ae1114a28872c93f702deac995e11f Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 20 Dec 2024 14:20:11 +0100 Subject: [PATCH 120/211] add Lucide icon library --- package-lock.json | 29 +++++++++++++++++------------ package.json | 1 + 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index c29656a78..9c8b334f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4673,7 +4673,7 @@ "bootstrap-select": { "version": "1.12.2", "resolved": "https://registry.npmjs.org/bootstrap-select/-/bootstrap-select-1.12.2.tgz", - "integrity": "sha1-WNCVs/1YSzFEOGb745tv3U5OEqQ=", + "integrity": "sha512-Fj1VstB55LigEEYQb6ZOi/ok+uaqnslRxS8Qo9Q+F46WWDhhXAeNpjBhjEMlxQjPs9yqYZf2hf/mxVRWab8sow==", "optional": true, "requires": { "jquery": ">=1.8" @@ -4682,7 +4682,7 @@ "bootstrap-slider": { "version": "9.10.0", "resolved": "https://registry.npmjs.org/bootstrap-slider/-/bootstrap-slider-9.10.0.tgz", - "integrity": "sha1-EQPWvADPv6jPyaJZmrUYxVZD2j8=", + "integrity": "sha512-a9MtENtt4r3ttPW5mpIpOFmCaIsm37EGukOgw5cfHlxKvsUSN8AN9JtwKrKuqgEnxs86kUSsMvMn8kqewMorKw==", "optional": true }, "bootstrap-slider-without-jquery": { @@ -4693,13 +4693,13 @@ "bootstrap-switch": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz", - "integrity": "sha1-cOCusqh3wNx2aZHeEI4hcPwpov8=", + "integrity": "sha512-7YQo+Ir6gCUqC36FFp1Zvec5dRF/+obq+1drMtdIMi9Xc84Kx63Evi0kdcp4HfiGsZpiz6IskyYDNlSKcxsL7w==", "optional": true }, "bootstrap-touchspin": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/bootstrap-touchspin/-/bootstrap-touchspin-3.1.1.tgz", - "integrity": "sha1-l3nerHKq9Xfl52K4USx0fIcdlZc=", + "integrity": "sha512-o5pgzdr8Ma5hQKS3JE1uNq/jkx8qCG+KhJXSlvYCmX2wTxva2sS2Kq3idGN+tP5e1bZJQgkbqwP9TdEEx+R+6Q==", "optional": true }, "boxen": { @@ -6307,7 +6307,7 @@ "datatables.net-colreorder-bs": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/datatables.net-colreorder-bs/-/datatables.net-colreorder-bs-1.3.3.tgz", - "integrity": "sha1-Op3LCN7r612FQHlZHgbkk615OlM=", + "integrity": "sha512-+DPim/DhbSIqr2rhRvYNrAMFNZgl372PiKEAv5YeyjYMzc8+6kX8Vinpb3Bg0PDgEdPqEWqJ6H18pBCKhXppgg==", "optional": true, "requires": { "datatables.net-bs": ">=1.10.9", @@ -6834,7 +6834,7 @@ "drmonty-datatables-colvis": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/drmonty-datatables-colvis/-/drmonty-datatables-colvis-1.1.2.tgz", - "integrity": "sha1-lque37SGQ8wu3aP4e4iTPN7oEnw=", + "integrity": "sha512-1kL4fbsBEkQQTl83eQ8G/vRGcCiM6Hn3O8Tp473tG4YSsBDcxETDDSxb8qC+fQjHZ3jUCptWj3lG/L8rI6NBNw==", "optional": true, "requires": { "jquery": ">=1.7.0" @@ -9425,12 +9425,12 @@ "font-awesome": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", - "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==" }, "font-awesome-sass": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/font-awesome-sass/-/font-awesome-sass-4.7.0.tgz", - "integrity": "sha1-TtppPpFQCc4Asijglk3F7Km8NOE=", + "integrity": "sha512-apO2Nw3XP/Zv7fLxa+MnPnvJ/GdkH6qWrLrtN5oQrFL7RPprzHKROjN94jgyoxM+T7PQBhY9F/SwOKbBaLyXxg==", "optional": true }, "for-in": { @@ -9917,7 +9917,7 @@ "google-code-prettify": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/google-code-prettify/-/google-code-prettify-1.0.5.tgz", - "integrity": "sha1-n0d/Ik2/piNy5e+AOn4VdBBAAIQ=", + "integrity": "sha512-Y47Bw63zJKCuqTuhTZC1ct4e/0ADuMssxXhnrP8QHq71tE2aYBKG6wQwXr8zya0zIUd0mKN3XTlI5AME4qm6NQ==", "optional": true }, "got": { @@ -12957,7 +12957,7 @@ "jquery-match-height": { "version": "0.7.2", "resolved": "https://registry.npmjs.org/jquery-match-height/-/jquery-match-height-0.7.2.tgz", - "integrity": "sha1-+NnzulMU2qsQnPB0CGdL4gS+Xw4=", + "integrity": "sha512-qSyC0GBc4zUlgBcxfyyumJSVUm50T6XuJEIz59cKaI28VXMUT95mZ6KiIjhMIMbG8IiJhh65FtQO1XD42TAcwg==", "optional": true }, "js-levenshtein": { @@ -13612,6 +13612,11 @@ "yallist": "^2.1.2" } }, + "lucide-react": { + "version": "0.469.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz", + "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==" + }, "lz-string": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", @@ -13998,7 +14003,7 @@ "moment-timezone": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz", - "integrity": "sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=", + "integrity": "sha512-5cNPVUwaVJDCe9JM8m/qz17f9SkaI8rpnRUyDJi2K5HAd6EwhuQ3n5nLclZkNC/qJnomKgQH2TIu70Gy2dxFKA==", "optional": true, "requires": { "moment": ">= 2.6.0" @@ -15814,7 +15819,7 @@ "patternfly-bootstrap-combobox": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/patternfly-bootstrap-combobox/-/patternfly-bootstrap-combobox-1.1.7.tgz", - "integrity": "sha1-al48zRFwwhs8S0qhaKdBPh3btuE=", + "integrity": "sha512-6KptS6UnS8jOwLuqsjokiNUYjOf3G4bSahiSHhkQMdfvG0b4sZkUgOFWdMJ8zBXaZGVe8T324GQoXqiJdJxMuw==", "optional": true }, "patternfly-bootstrap-treeview": { diff --git a/package.json b/package.json index 70cf57b24..f0307aa9c 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "html-webpack-plugin": "^3.2.0", "keycloak-js": "^18.0.1", "lodash": "^4.17.21", + "lucide-react": "^0.469.0", "md5": "^2.3.0", "moment": "^2.22.1", "object-assign": "4.1.1", From ec40ed6c7fa4ac47ed805de782b252cf5eda7ecb Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 20 Dec 2024 14:58:45 +0100 Subject: [PATCH 121/211] fix: width internal-page container --- sass/internal-page/InternalPage.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index 68a032395..6c7872075 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -180,13 +180,13 @@ top: 40px; bottom: 0; left: #{$nav-pf-vertical-width + 15}; - width: calc(100% - #{$nav-pf-vertical-width} - 15px); + width: calc(100% - #{$nav-pf-vertical-width} - 25px); padding: 0; } .container-pf-nav-pf-vertical.collapsed-nav { //sass-lint:disable-line class-name-format force-element-nesting left: 40px; - width: calc(100% - 40px); + width: calc(100% - 50px); } .container-pf-nav-pf-vertical.hidden-nav { //sass-lint:disable-line class-name-format force-element-nesting @@ -361,7 +361,7 @@ display: flex; justify-content: space-between; align-items: center; - width: calc(100% - 40px); + width: calc(100% - 50px); float: right; .breadcrumb { From 59f073ca819e96093f6ff262d3f69fde9fd5951a Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Fri, 20 Dec 2024 16:29:20 +0100 Subject: [PATCH 122/211] refactor: Components/UX Fragments draft --- sass/common/CardList.scss | 11 ++++++-- sass/fragments/list/_ListFragmentPage.scss | 1 + sass/internal-page/PageTitle.scss | 15 +++++++---- src/ui/common/CardItem.js | 9 ++++--- src/ui/common/CardList.js | 1 + src/ui/fragments/list/FragmentGrid.js | 6 +++-- .../fragments/list/FragmentGridContainer .js | 2 +- src/ui/fragments/list/FragmentListContent.js | 4 +-- src/ui/fragments/list/ListFragmentPage.js | 26 ++++++++++++------- 9 files changed, 50 insertions(+), 25 deletions(-) diff --git a/sass/common/CardList.scss b/sass/common/CardList.scss index 30df930ed..74e02ac7e 100644 --- a/sass/common/CardList.scss +++ b/sass/common/CardList.scss @@ -1,8 +1,11 @@ .CardList { display: grid; + grid-auto-flow: row; gap: 10px; padding: 20px; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(auto-fill, minmax(250px, 320px)); + grid-auto-rows: 1fr; + justify-content: space-between; background: rgba(249, 250, 251, 1); } @@ -44,8 +47,12 @@ align-items: center } -.CardItemLink { +.CardItemTitle { color: $color-brand-primary; + width: calc(100% - 10px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; font-size: 16px; font-weight: 500; } diff --git a/sass/fragments/list/_ListFragmentPage.scss b/sass/fragments/list/_ListFragmentPage.scss index 8f1735f01..1a4ea353c 100644 --- a/sass/fragments/list/_ListFragmentPage.scss +++ b/sass/fragments/list/_ListFragmentPage.scss @@ -47,6 +47,7 @@ .FragmentSearchForm{ display: flex; + gap: 8px; .form-group { margin-bottom: 0; diff --git a/sass/internal-page/PageTitle.scss b/sass/internal-page/PageTitle.scss index 6922234d3..0e7aabc8b 100644 --- a/sass/internal-page/PageTitle.scss +++ b/sass/internal-page/PageTitle.scss @@ -3,17 +3,22 @@ font-family: Inter; &.max-height { - ::after { - top: 56px; - } + ::after { + top: 56px; } + } + + &:not(.max-height) { + ::after { + top: 36px; + } + } - ::after { + &::after { content: ""; position: absolute; left: -10px; right: -10px; - top: 36px; border-bottom: 1px solid $color-neutral-grey; } diff --git a/src/ui/common/CardItem.js b/src/ui/common/CardItem.js index 67f396b36..ae0f6377d 100644 --- a/src/ui/common/CardItem.js +++ b/src/ui/common/CardItem.js @@ -12,6 +12,7 @@ const CardItem = ({ title, code, subtitle, + description, used, actions, route, @@ -24,12 +25,12 @@ const CardItem = ({
    {route ? - + {title} : - +
    {title} - +
    } {used &&
    {subtitle}
    + {description &&
    {description}
    }
    ); @@ -55,6 +57,7 @@ CardItem.propTypes = { title: PropTypes.string.isRequired, code: PropTypes.string.isRequired, subtitle: PropTypes.string, + description: PropTypes.string, used: PropTypes.number, actions: PropTypes.func, route: PropTypes.shape({ diff --git a/src/ui/common/CardList.js b/src/ui/common/CardList.js index a083be39e..d9d4453b8 100644 --- a/src/ui/common/CardList.js +++ b/src/ui/common/CardList.js @@ -12,6 +12,7 @@ const CardList = ({ list, actions, route }) => title={item.title} code={item.code} subtitle={item.subtitle} + description={item.description} used={item.used} route={route} actions={actions(item)} diff --git a/src/ui/fragments/list/FragmentGrid.js b/src/ui/fragments/list/FragmentGrid.js index 16b0dafa6..bcda0534f 100644 --- a/src/ui/fragments/list/FragmentGrid.js +++ b/src/ui/fragments/list/FragmentGrid.js @@ -63,10 +63,11 @@ class FragmentGrid extends Component { perPageOptions: [5, 10, 15, 25, 50, 100, 150], }; - const newFragments = fragments.map(f => ( + const fragmentsGridList = fragments.map(f => ( { title: f.code, subtitle: Object.is(f.widgetType, null) ? '' : f.widgetType.title, + description: f.pluginCode || '', ...f, })); @@ -79,7 +80,8 @@ class FragmentGrid extends Component { return ( - + + {/* TODO: remove useless props */} ( ); export const mapDispatchToProps = dispatch => ({ - onWillMount: (page = { page: 1, pageSize: 10 }, params) => { + onWillMount: (page = { page: 1, pageSize: 40 }, params) => { dispatch(fetchFragments(page, params)); }, onClickDelete: (fragment) => { diff --git a/src/ui/fragments/list/FragmentListContent.js b/src/ui/fragments/list/FragmentListContent.js index 3fea427db..d8ea53a4a 100644 --- a/src/ui/fragments/list/FragmentListContent.js +++ b/src/ui/fragments/list/FragmentListContent.js @@ -3,7 +3,7 @@ import { Row, Col, Button } from 'patternfly-react'; import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; import { ROUTE_FRAGMENT_ADD } from 'app-init/router'; -import FragmentListTableContainer from 'ui/fragments/list/FragmentListTableContainer'; +// import FragmentListTableContainer from 'ui/fragments/list/FragmentListTableContainer'; import FragmentGridContainer from 'ui/fragments/list/FragmentGridContainer '; const FragmentListContent = () => ( @@ -13,7 +13,7 @@ const FragmentListContent = () => ( - + {/* */} - + */}
    ); diff --git a/src/ui/fragments/list/ListFragmentPage.js b/src/ui/fragments/list/ListFragmentPage.js index 6a3591e7a..bf526f6f1 100644 --- a/src/ui/fragments/list/ListFragmentPage.js +++ b/src/ui/fragments/list/ListFragmentPage.js @@ -11,6 +11,8 @@ import withPermissions from 'ui/auth/withPermissions'; import Button from 'ui/common/Button'; import Icon from 'ui/common/Icon'; import { SUPERUSER_PERMISSION } from 'state/permissions/const'; +import { Link } from 'react-router-dom'; +import { ROUTE_FRAGMENT_ADD } from 'app-init/router'; const VIEW_LIST = 'list'; const VIEW_SETTINGS = 'settings'; @@ -51,16 +53,25 @@ export class ListFragmentPageBody extends Component { helpId="fragment.help" className="max-height" > - -
    - -
    - +
    + +
    + + + - - - - - - + +
    + + + + + + + + + + + + +
    +
    + + + + + + + +
    From 1e460b16c4807fdccfbdc8fcca2315bbe299c992 Mon Sep 17 00:00:00 2001 From: Virgilio Di Falco Date: Mon, 23 Dec 2024 12:11:15 +0100 Subject: [PATCH 126/211] fix border bottom in design sidebar tabs --- sass/pages/common/SeoInfo.scss | 17 +++++- sass/pages/config/ContentPages.scss | 2 + sass/pages/config/PageConfigPage.scss | 14 +++++ sass/pages/config/ToolbarPageConfig.scss | 1 + src/ui/pages/config/PageConfigPage.js | 68 +++++++++++++++++------- 5 files changed, 83 insertions(+), 19 deletions(-) diff --git a/sass/pages/common/SeoInfo.scss b/sass/pages/common/SeoInfo.scss index c9542c7aa..abe8c6090 100644 --- a/sass/pages/common/SeoInfo.scss +++ b/sass/pages/common/SeoInfo.scss @@ -6,13 +6,28 @@ } li.active a { - background-color: $color-pf-black-200; + background-color: white; color: $color-pf-black; font-weight: bold; } } // sass-lint:enable no-qualifying-elements, nesting-depth, force-element-nesting, class-name-format + .form-group{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + } + + .FormLabel{ + display: flex; + align-items: center; + flex: 1; + justify-content: flex-start; + text-align: left; + } + &__section { margin-bottom: 40px; padding: 20px 0; diff --git a/sass/pages/config/ContentPages.scss b/sass/pages/config/ContentPages.scss index 0807b8eb3..8af3fe6b9 100644 --- a/sass/pages/config/ContentPages.scss +++ b/sass/pages/config/ContentPages.scss @@ -18,6 +18,7 @@ color: $color-text-tertiary; font-size: 14px; height: 30px; + box-shadow: none; //@TODO - container outline on focus @@ -35,6 +36,7 @@ box-shadow: none !important; background-color: $color-neutral-grey; height: 100%; + border-radius: $radius-xxs; } // sass-lint:enable no-important class-name-format force-element-nesting diff --git a/sass/pages/config/PageConfigPage.scss b/sass/pages/config/PageConfigPage.scss index 994919b47..e85eb3089 100644 --- a/sass/pages/config/PageConfigPage.scss +++ b/sass/pages/config/PageConfigPage.scss @@ -9,11 +9,24 @@ padding-left: 0px; } + + &__tabs { margin-top: 0px; .nav-tabs{ + .__tabContainer{ + display: flex; + align-items: center; + gap: 8px; + + svg{ + width:20px; + height:20px; + } + } + li > a{ border-bottom: 2px solid $color-border-gray; border-top: none; @@ -71,6 +84,7 @@ border: 1.5px solid $color-brand-primary; } + flex-wrap: wrap; } diff --git a/sass/pages/config/ToolbarPageConfig.scss b/sass/pages/config/ToolbarPageConfig.scss index aa19121fc..1119374e6 100644 --- a/sass/pages/config/ToolbarPageConfig.scss +++ b/sass/pages/config/ToolbarPageConfig.scss @@ -131,6 +131,7 @@ background-color: #FFF; color: $color-primary-text; height: calc(100% + 1px); + border-bottom: 1px solid $color-neutral-grey; &:hover { diff --git a/src/ui/pages/config/PageConfigPage.js b/src/ui/pages/config/PageConfigPage.js index 20aecfa2f..b91c051de 100644 --- a/src/ui/pages/config/PageConfigPage.js +++ b/src/ui/pages/config/PageConfigPage.js @@ -1,6 +1,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { FormattedMessage, defineMessages, injectIntl, intlShape } from 'react-intl'; +import { + FormattedMessage, + defineMessages, + injectIntl, + intlShape, +} from 'react-intl'; import { Icon, Grid, @@ -25,7 +30,11 @@ import AppTourContainer from 'ui/app-tour/AppTourContainer'; import PagesEditFormContainer from 'ui/pages/edit/PagesEditFormContainer'; import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; import { APP_TOUR_STARTED } from 'state/app-tour/const'; -import { PAGE_STATUS_PUBLISHED, PAGE_STATUS_UNPUBLISHED } from 'state/pages/const'; +import { + PAGE_STATUS_PUBLISHED, + PAGE_STATUS_UNPUBLISHED, +} from 'state/pages/const'; +import { Settings, FilePen } from 'lucide-react'; const msgs = defineMessages({ appYes: { @@ -60,7 +69,8 @@ class PageConfigPage extends Component { this.toggleInfoTable = this.toggleInfoTable.bind(this); this.toggleEditingSettings = this.toggleEditingSettings.bind(this); this.openLinkPublishedPage = this.openLinkPublishedPage.bind(this); - this.handleToggleToolbarCollapse = this.handleToggleToolbarCollapse.bind(this); + this.handleToggleToolbarCollapse = + this.handleToggleToolbarCollapse.bind(this); } componentDidMount() { @@ -72,7 +82,9 @@ class PageConfigPage extends Component { if (nextProps.pageStatus !== 'draft') { this.setState({ statusChange: - nextProps.pageStatus !== this.props.pageStatus ? nextProps.pageStatus : null, + nextProps.pageStatus !== this.props.pageStatus + ? nextProps.pageStatus + : null, }); } const { match, onWillMount } = this.props; @@ -212,7 +224,9 @@ class PageConfigPage extends Component { 'btn-outlined-primary', ].join(' ')} onClick={() => onClickSaveSettings(selectedPageForm)} - disabled={pageSettingsButtonInvalid || pageSettingsButtonSubmitting} + disabled={ + pageSettingsButtonInvalid || pageSettingsButtonSubmitting + } > @@ -233,7 +247,10 @@ class PageConfigPage extends Component { > - + @@ -319,6 +336,19 @@ class PageConfigPage extends Component { ); } + const DesignerTab = () => ( +
    + + +
    + ); + const SettingsTab = () => ( +
    + + +
    + ); + return ( - - } - > + + }>
    {this.renderPageHeader()} @@ -364,10 +395,7 @@ class PageConfigPage extends Component {
    - } - > + }>
    {this.renderPageHeader()} @@ -408,7 +436,8 @@ class PageConfigPage extends Component { eventKey="1" className="PageConfigPage__on-the-fly-yes" onClick={() => - setSelectedPageOnTheFly && setSelectedPageOnTheFly(true) + setSelectedPageOnTheFly && + setSelectedPageOnTheFly(true) } > {TRANSLATED_YES} @@ -417,7 +446,8 @@ class PageConfigPage extends Component { eventKey="2" className="PageConfigPage__on-the-fly-no" onClick={() => - setSelectedPageOnTheFly && setSelectedPageOnTheFly(false) + setSelectedPageOnTheFly && + setSelectedPageOnTheFly(false) } > {TRANSLATED_NO} @@ -437,7 +467,9 @@ class PageConfigPage extends Component {
    } -
    +
    - diff --git a/src/ui/dashboard/PagesList.js b/src/ui/dashboard/PagesList.js index 97b199dfc..f414ce7e6 100644 --- a/src/ui/dashboard/PagesList.js +++ b/src/ui/dashboard/PagesList.js @@ -10,7 +10,7 @@ import { formatDate, hasAccess } from '@entando/utils'; import paginatorMessages from 'ui/paginatorMessages'; import { MANAGE_PAGES_PERMISSION } from 'state/permissions/const'; import ViewPermissionNoticeOverlay from 'ui/dashboard/ViewPermissionNoticeOverlay'; -import Icon from 'ui/common/Icon'; +import Icon from 'ui/common/icon/Icon'; import StatusBadge from 'ui/pages/common/StatusBadge'; class PagesList extends Component { @@ -121,15 +121,17 @@ class PagesList extends Component {

    - - +
    + + +

    diff --git a/src/ui/dashboard/UserManagement.js b/src/ui/dashboard/UserManagement.js index a23159946..f59da76d8 100644 --- a/src/ui/dashboard/UserManagement.js +++ b/src/ui/dashboard/UserManagement.js @@ -7,9 +7,8 @@ import { AggregateStatusCount, Button, } from 'patternfly-react'; -import Icon from 'ui/common/Icon'; +import Icon from 'ui/common/icon/Icon'; import { PermissionCheck, hasAccess } from '@entando/utils'; -import { Clearfix } from 'react-bootstrap'; import { Link } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; import { @@ -48,8 +47,10 @@ class UserManagement extends Component { - - +
    + + +
    - + -     diff --git a/src/ui/dashboard/UxPatterns.js b/src/ui/dashboard/UxPatterns.js index 5ee4cda42..285eb9645 100644 --- a/src/ui/dashboard/UxPatterns.js +++ b/src/ui/dashboard/UxPatterns.js @@ -7,9 +7,8 @@ import { AggregateStatusCount, Button, } from 'patternfly-react'; -import Icon from 'ui/common/Icon'; +import Icon from 'ui/common/icon/Icon'; import { hasAccess } from '@entando/utils'; -import { Clearfix } from 'react-bootstrap'; import { Link } from 'react-router-dom'; import { FormattedMessage } from 'react-intl'; @@ -34,8 +33,15 @@ class UxPatterns extends Component { - - +
    + + +
    {isSuperuser && ( )} -     diff --git a/src/ui/fragments/list/ListFragmentPage.js b/src/ui/fragments/list/ListFragmentPage.js index 368651b9c..82f3d04c3 100644 --- a/src/ui/fragments/list/ListFragmentPage.js +++ b/src/ui/fragments/list/ListFragmentPage.js @@ -9,7 +9,7 @@ import FragmentSearchFormContainer from 'ui/fragments/list/FragmentSearchFormCon import FragmentListContent from 'ui/fragments/list/FragmentListContent'; import withPermissions from 'ui/auth/withPermissions'; import Button from 'ui/common/Button'; -import Icon from 'ui/common/Icon'; +import Icon from 'ui/common/icon/Icon'; import { SUPERUSER_PERMISSION } from 'state/permissions/const'; import { Link } from 'react-router-dom'; import { ROUTE_FRAGMENT_ADD } from 'app-init/router'; diff --git a/src/ui/internal-page/HeaderBreadcrumb.js b/src/ui/internal-page/HeaderBreadcrumb.js index d03a472ac..1db0fcd8d 100644 --- a/src/ui/internal-page/HeaderBreadcrumb.js +++ b/src/ui/internal-page/HeaderBreadcrumb.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { Breadcrumb } from 'patternfly-react'; import BreadcrumbItem from 'ui/common/BreadcrumbItem'; -import Icon from 'ui/common/Icon'; +import Icon from 'ui/common/icon/Icon'; const HeaderBreadcrumb = ({ breadcrumbs, ...props }) => { const breadcrumbContainer = document.getElementById('header-breadcrumbs'); @@ -15,6 +15,7 @@ const HeaderBreadcrumb = ({ breadcrumbs, ...props }) => { diff --git a/src/ui/pages/list/PageTreePage.js b/src/ui/pages/list/PageTreePage.js index f8c4b68b4..ec5d92589 100644 --- a/src/ui/pages/list/PageTreePage.js +++ b/src/ui/pages/list/PageTreePage.js @@ -13,7 +13,7 @@ import Button from 'ui/common/Button'; import AppTourContainer from 'ui/app-tour/AppTourContainer'; import { ROUTE_PAGE_ADD } from 'app-init/router'; import { withPermissionValues } from 'ui/auth/withPermissions'; -import Icon from 'ui/common/Icon'; +import Icon from 'ui/common/icon/Icon'; import HeaderBreadcrumb from 'ui/internal-page/HeaderBreadcrumb'; diff --git a/src/ui/widgets/list/ListWidgetPage.js b/src/ui/widgets/list/ListWidgetPage.js index 3e9814fde..e6cbe0f69 100644 --- a/src/ui/widgets/list/ListWidgetPage.js +++ b/src/ui/widgets/list/ListWidgetPage.js @@ -9,7 +9,7 @@ import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; import { ROUTE_WIDGET_ADD } from 'app-init/router'; import DeleteWidgetModalContainer from 'ui/widgets/list/DeleteWidgetModalContainer'; -import Icon from 'ui/common/Icon'; +import Icon from 'ui/common/icon/Icon'; import Button from 'ui/common/Button'; import WidgetGridView from './WidgetGridView'; @@ -109,7 +109,7 @@ class ListWidgetPage extends Component { to={ROUTE_WIDGET_ADD} bsStyle="primary" > - + From 744c57d9dfd1fcb557b46c230009b14f0b7bde73 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Mon, 30 Dec 2024 16:46:56 +0100 Subject: [PATCH 133/211] feat: add dropdown-menu icons at Components/UX Fragments --- sass/common/Icon.scss | 15 +++++ sass/fragments/common/_FragmentForm.scss | 7 +++ sass/fragments/list/_ListFragmentPage.scss | 25 ++++++++ sass/variables.scss | 1 + src/ui/common/icon/Icon.js | 10 ++- src/ui/common/icon/IconMap.js | 4 +- src/ui/contents/list-card/ContentListCard.js | 2 +- src/ui/dashboard/Languages.js | 4 +- src/ui/dashboard/PagesList.js | 4 +- src/ui/dashboard/UserManagement.js | 4 +- src/ui/dashboard/UxPatterns.js | 4 +- .../fragments/list/FragmentListMenuActions.js | 61 +++++++++++-------- 12 files changed, 104 insertions(+), 37 deletions(-) diff --git a/sass/common/Icon.scss b/sass/common/Icon.scss index 9dca6d3e1..bb9f7bed1 100644 --- a/sass/common/Icon.scss +++ b/sass/common/Icon.scss @@ -1,3 +1,8 @@ +.Icon { + display: flex; + align-items: center; +} + .icon__colored-bg, .icon__colored-bg::before { display: flex; align-items: center; @@ -8,6 +13,16 @@ height: 32px; } +.lucide { + &:not(.primary) { + color: $color-text-tertiary; + } + + &.primary { + color: $color-brand-primary; + } +} + .icon-flipped-y { transform: scaleY(-1); } diff --git a/sass/fragments/common/_FragmentForm.scss b/sass/fragments/common/_FragmentForm.scss index cd49c3b15..b6ed7b8e8 100644 --- a/sass/fragments/common/_FragmentForm.scss +++ b/sass/fragments/common/_FragmentForm.scss @@ -8,3 +8,10 @@ color: $color-pf-black-300; font-size: 12px; } + +.FragmentForm__dropdown { + .dropdown-menu { + left: unset; + right: 0; + } +} \ No newline at end of file diff --git a/sass/fragments/list/_ListFragmentPage.scss b/sass/fragments/list/_ListFragmentPage.scss index dcc1a69be..1843cfe8b 100644 --- a/sass/fragments/list/_ListFragmentPage.scss +++ b/sass/fragments/list/_ListFragmentPage.scss @@ -6,8 +6,33 @@ margin: 2em 0 0 0; } + .dropdown-menu { + width: max-content; + padding: 8px; + + a { + display: flex; + align-items: center; + color: $color-text-secondary; + + &:hover { + text-decoration: none; + } + } + + .danger > a { + color: $color-error-primary; + } + } } + .FragmentListMenuAction__menu-item-container { + display: flex; + align-items: center; + gap: 8px; + padding: 4px; + } + // Bootstrap overrides .ListFragmentPage .nav-tabs > li.ListFragmentPage__header-tab > a { height: 57px; diff --git a/sass/variables.scss b/sass/variables.scss index 9dfbda702..2b5192081 100644 --- a/sass/variables.scss +++ b/sass/variables.scss @@ -22,6 +22,7 @@ $color-brand-secondary: #0041cc; $color-neutral-grey: #e4e7ec; $color-text-secondary: #344051; $color-text-tertiary: #637083; +$color-error-primary: #F64C4C; $color-dark-blue: #e5eeff; $color-border-blue: #40a6da; $color-dim-grey: #72767b; diff --git a/src/ui/common/icon/Icon.js b/src/ui/common/icon/Icon.js index 27040b4c3..65185af2b 100644 --- a/src/ui/common/icon/Icon.js +++ b/src/ui/common/icon/Icon.js @@ -15,12 +15,16 @@ const Icon = ({ case ('lucide'): const LucideIcon = IconMap[props.name]; return ( -
    - +
    +
    ); default: - return (); + return (); } }; diff --git a/src/ui/common/icon/IconMap.js b/src/ui/common/icon/IconMap.js index b9d5a1e5d..7b79bd310 100644 --- a/src/ui/common/icon/IconMap.js +++ b/src/ui/common/icon/IconMap.js @@ -1,4 +1,4 @@ -import { Users, Flag, Grid2x2Plus, Copy, AlignLeft, Plus } from 'lucide-react'; +import { Users, Flag, Grid2x2Plus, Copy, AlignLeft, Plus, Pencil, Trash2 } from 'lucide-react'; export default { users: Users, @@ -7,4 +7,6 @@ export default { pages: Copy, text: AlignLeft, plus: Plus, + pencil: Pencil, + bin: Trash2, }; diff --git a/src/ui/contents/list-card/ContentListCard.js b/src/ui/contents/list-card/ContentListCard.js index d3f5fbca3..7c6b7d279 100644 --- a/src/ui/contents/list-card/ContentListCard.js +++ b/src/ui/contents/list-card/ContentListCard.js @@ -166,7 +166,7 @@ class ContentListCard extends Component {

    - +
    {renderAddContentButton} diff --git a/src/ui/dashboard/Languages.js b/src/ui/dashboard/Languages.js index c718978ac..3e6dab2e4 100644 --- a/src/ui/dashboard/Languages.js +++ b/src/ui/dashboard/Languages.js @@ -31,7 +31,7 @@ class Languages extends Component {
    - +
    diff --git a/src/ui/dashboard/PagesList.js b/src/ui/dashboard/PagesList.js index f414ce7e6..a53ed6ee5 100644 --- a/src/ui/dashboard/PagesList.js +++ b/src/ui/dashboard/PagesList.js @@ -122,7 +122,7 @@ class PagesList extends Component {

    - +

    diff --git a/src/ui/dashboard/UserManagement.js b/src/ui/dashboard/UserManagement.js index f59da76d8..83490c58d 100644 --- a/src/ui/dashboard/UserManagement.js +++ b/src/ui/dashboard/UserManagement.js @@ -48,7 +48,7 @@ class UserManagement extends Component {
    - +
    - + diff --git a/src/ui/dashboard/UxPatterns.js b/src/ui/dashboard/UxPatterns.js index 285eb9645..1f4aaa1d9 100644 --- a/src/ui/dashboard/UxPatterns.js +++ b/src/ui/dashboard/UxPatterns.js @@ -38,7 +38,7 @@ class UxPatterns extends Component { type="lucide" name="components" background - className="icon-flipped-y" + className="icon-flipped-y primary" />

    @@ -49,7 +49,7 @@ class UxPatterns extends Component { componentClass={Link} to={ROUTE_WIDGET_ADD} > - + )} diff --git a/src/ui/fragments/list/FragmentListMenuActions.js b/src/ui/fragments/list/FragmentListMenuActions.js index 363c2b59d..23f983db6 100644 --- a/src/ui/fragments/list/FragmentListMenuActions.js +++ b/src/ui/fragments/list/FragmentListMenuActions.js @@ -10,6 +10,7 @@ import { ROUTE_FRAGMENT_CLONE, ROUTE_FRAGMENT_DETAIL, } from 'app-init/router'; +import Icon from 'ui/common/icon/Icon'; class FragmentListMenuActions extends Component { constructor(props) { @@ -37,30 +38,42 @@ class FragmentListMenuActions extends Component { ); return ( - - - - - - +
    + + +
    +
    + + +
    +
    + + +
    +
    + + + + +
    ); } From 55a15d6dc856e3914be2902d093aecb6259dd0f0 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 2 Jan 2025 10:01:44 +0100 Subject: [PATCH 134/211] minor style change --- sass/common/Icon.scss | 6 +++++ sass/dashboard/Cards.scss | 7 +++++- sass/internal-page/InternalPage.scss | 2 +- src/ui/common/icon/Icon.js | 2 +- src/ui/common/icon/IconMap.js | 3 ++- src/ui/dashboard/UserManagement.js | 21 +++++++++-------- src/ui/dashboard/UxPatterns.js | 33 +++++++++++++++------------ src/ui/widgets/list/ListWidgetPage.js | 2 +- 8 files changed, 46 insertions(+), 30 deletions(-) diff --git a/sass/common/Icon.scss b/sass/common/Icon.scss index bb9f7bed1..ef6548cdc 100644 --- a/sass/common/Icon.scss +++ b/sass/common/Icon.scss @@ -23,6 +23,12 @@ } } +.active { + .lucide { + color: $color-brand-primary; + } +} + .icon-flipped-y { transform: scaleY(-1); } diff --git a/sass/dashboard/Cards.scss b/sass/dashboard/Cards.scss index 2fd20da0f..3197336a5 100644 --- a/sass/dashboard/Cards.scss +++ b/sass/dashboard/Cards.scss @@ -3,6 +3,7 @@ .card-pf-body { display: flex; align-items: baseline; + gap: 24px; a { color: $color-text-tertiary; @@ -11,6 +12,11 @@ ::before { padding-right: 5px; } + + .card-pf-aggregate-status-container { + display: flex; + gap: 6px; + } } .card-pf { @@ -18,7 +24,6 @@ border-radius: $spacing-4; .fa { - &:not(:first-child) { margin-left: 15px; } diff --git a/sass/internal-page/InternalPage.scss b/sass/internal-page/InternalPage.scss index 6c7872075..059004cc9 100644 --- a/sass/internal-page/InternalPage.scss +++ b/sass/internal-page/InternalPage.scss @@ -361,7 +361,7 @@ display: flex; justify-content: space-between; align-items: center; - width: calc(100% - 50px); + width: calc(100% - 40px); float: right; .breadcrumb { diff --git a/src/ui/common/icon/Icon.js b/src/ui/common/icon/Icon.js index 65185af2b..50d1df95f 100644 --- a/src/ui/common/icon/Icon.js +++ b/src/ui/common/icon/Icon.js @@ -19,7 +19,7 @@ const Icon = ({
    ); diff --git a/src/ui/common/icon/IconMap.js b/src/ui/common/icon/IconMap.js index 7b79bd310..6f42bd630 100644 --- a/src/ui/common/icon/IconMap.js +++ b/src/ui/common/icon/IconMap.js @@ -1,4 +1,4 @@ -import { Users, Flag, Grid2x2Plus, Copy, AlignLeft, Plus, Pencil, Trash2 } from 'lucide-react'; +import { Users, Flag, Grid2x2Plus, Copy, AlignLeft, Plus, Pencil, Trash2, Box } from 'lucide-react'; export default { users: Users, @@ -9,4 +9,5 @@ export default { plus: Plus, pencil: Pencil, bin: Trash2, + box: Box, }; diff --git a/src/ui/dashboard/UserManagement.js b/src/ui/dashboard/UserManagement.js index 83490c58d..65b420b25 100644 --- a/src/ui/dashboard/UserManagement.js +++ b/src/ui/dashboard/UserManagement.js @@ -67,15 +67,17 @@ class UserManagement extends Component { - - - {users}  - - - - +
    + + + {users}  + + + + +
    {isSuperuser && ( - +
    {groups}  @@ -83,8 +85,7 @@ class UserManagement extends Component { - - )} +
    )}     diff --git a/src/ui/dashboard/UxPatterns.js b/src/ui/dashboard/UxPatterns.js index 1f4aaa1d9..96f78b36e 100644 --- a/src/ui/dashboard/UxPatterns.js +++ b/src/ui/dashboard/UxPatterns.js @@ -55,21 +55,24 @@ class UxPatterns extends Component { )} - - - {this.props.widgets}  - - - - - - - - {this.props.pageTemplates}  - - - - +
    + + + {this.props.widgets}  + + + + +
    +
    + + + {this.props.pageTemplates}  + + + + +
    diff --git a/src/ui/widgets/list/ListWidgetPage.js b/src/ui/widgets/list/ListWidgetPage.js index e6cbe0f69..46d1ab565 100644 --- a/src/ui/widgets/list/ListWidgetPage.js +++ b/src/ui/widgets/list/ListWidgetPage.js @@ -109,7 +109,7 @@ class ListWidgetPage extends Component { to={ROUTE_WIDGET_ADD} bsStyle="primary" > - + From d80bd8a4282ab561b1581206895c358b1a210f8e Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 2 Jan 2025 14:41:11 +0100 Subject: [PATCH 135/211] fix: delete UX Fragments action --- src/ui/common/CardList.js | 1 + src/ui/fragments/list/FragmentGrid.js | 15 ++++++--------- src/ui/fragments/list/FragmentListMenuActions.js | 2 -- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/ui/common/CardList.js b/src/ui/common/CardList.js index d9d4453b8..1bdc32061 100644 --- a/src/ui/common/CardList.js +++ b/src/ui/common/CardList.js @@ -9,6 +9,7 @@ const CardList = ({ list, actions, route }) =>
    {list.map(item => ( ( - { - title: f.code, - subtitle: Object.is(f.widgetType, null) ? '' : f.widgetType.title, - description: f.pluginCode || '', - ...f, - })); const messages = Object.keys(paginatorMessages).reduce((acc, curr) => ( { ...acc, [curr]: intl.formatMessage(paginatorMessages[curr]) } @@ -77,9 +70,13 @@ class FragmentGrid extends Component { const itemsStart = totalItems === 0 ? 0 : ((page - 1) * pageSize) + 1; const itemsEnd = Math.min(page * pageSize, totalItems); + const renderFragmentListMenuActions = props => ( + + ); + return ( - + ; - FragmentListMenuActions.propTypes = { onClickDelete: PropTypes.func, code: PropTypes.string.isRequired, From 4bffa76daaa234c5cde3ed983e8cb85103ac9e1e Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 2 Jan 2025 15:02:17 +0100 Subject: [PATCH 136/211] style patternfly modal-footer --- sass/patternfly.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/sass/patternfly.scss b/sass/patternfly.scss index a8cdc70f1..42cc469e9 100644 --- a/sass/patternfly.scss +++ b/sass/patternfly.scss @@ -318,10 +318,12 @@ $fa-square-o: '\f096'; li > a.disabled{ background: none; } - - } +.modal-footer { + display: flex; + justify-content: flex-end; +} // sass-lint:enable class-name-format From 8b00ef9e85f3e42ec1002cda77a3e6c964addf10 Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 2 Jan 2025 15:29:15 +0100 Subject: [PATCH 137/211] feat: add icons at MicroFE e Widget actions menu --- sass/widgets/list/WidgetListRow.scss | 21 ++++++++++++ src/ui/widgets/list/WidgetGridView.js | 48 +++++++++++++++++---------- 2 files changed, 51 insertions(+), 18 deletions(-) diff --git a/sass/widgets/list/WidgetListRow.scss b/sass/widgets/list/WidgetListRow.scss index 0e57c0e1d..5450ed4e4 100644 --- a/sass/widgets/list/WidgetListRow.scss +++ b/sass/widgets/list/WidgetListRow.scss @@ -8,4 +8,25 @@ .WidgetIcon { vertical-align: middle; } + + &__menu-item-container { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 10px; + + a { + display: flex; + align-items: center; + color: $color-text-secondary; + + &:hover { + text-decoration: none; + } + } + + .danger > a { + color: $color-error-primary; + } + } } diff --git a/src/ui/widgets/list/WidgetGridView.js b/src/ui/widgets/list/WidgetGridView.js index e61063547..c8a931352 100644 --- a/src/ui/widgets/list/WidgetGridView.js +++ b/src/ui/widgets/list/WidgetGridView.js @@ -6,6 +6,7 @@ import WidgetSectionTitle from 'ui/widgets/list/WidgetSectionTitle'; import { withPermissionValues } from 'ui/auth/withPermissions'; import { ROUTE_WIDGET_EDIT } from 'app-init/router'; import CardList from 'ui/common/CardList'; +import Icon from 'ui/common/icon/Icon'; export const WidgetGrid = ({ title, @@ -20,25 +21,36 @@ export const WidgetGrid = ({
    {item.hasConfig && ( - onNewUserWidget(item.code)} - > - - )} - onEdit(item.code)} - > - - +
    + + onNewUserWidget(item.code)} + > + + +
    + )} +
    + + onEdit(item.code)} + > + + +
    {!item.locked && item.used === 0 && ( - onDelete(item.code)} - > - - )} +
    + + onDelete(item.code)} + > + + +
    + )}
    ); From ae2ffd53626231c92fad8d748fb9d5c5c35157cd Mon Sep 17 00:00:00 2001 From: VanessaSirigu Date: Thu, 2 Jan 2025 17:57:02 +0100 Subject: [PATCH 138/211] style: add label at FragmentSearchForm --- sass/fragments/list/_ListFragmentPage.scss | 8 ++++++-- src/ui/fragments/list/FragmentSearchForm.js | 22 +++++++++++++++++---- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/sass/fragments/list/_ListFragmentPage.scss b/sass/fragments/list/_ListFragmentPage.scss index 1843cfe8b..579732b62 100644 --- a/sass/fragments/list/_ListFragmentPage.scss +++ b/sass/fragments/list/_ListFragmentPage.scss @@ -99,6 +99,10 @@ font-style: normal; } } + + &__select-default-value { + color: $color-mid-grey; + } } .FragmentGrid__container { @@ -107,8 +111,8 @@ border-radius: $radius-xxs; .content-view-pf-pagination { - border: none;; - border-top: 1px solid $color-border-grey + border: none; + border-top: 1px solid $color-border-grey; } } diff --git a/src/ui/fragments/list/FragmentSearchForm.js b/src/ui/fragments/list/FragmentSearchForm.js index 560066215..88a48b740 100644 --- a/src/ui/fragments/list/FragmentSearchForm.js +++ b/src/ui/fragments/list/FragmentSearchForm.js @@ -16,6 +16,14 @@ const msgs = defineMessages({ id: 'fragment.form.edit.plugin', defaultMessage: 'Edit Plugin', }, + widgetPlaceholder: { + id: 'fragment.form.edit.widgetType"', + defaultMessage: 'Widget type', + }, + pluginPlaceholder: { + id: 'fragment.form.edit.plugin', + defaultMessage: 'Plugin', + }, }); const widgetCategoryMsgs = defineMessages({ @@ -94,7 +102,11 @@ export class FragmentSearchFormBody extends Component { className="form-control" name="widgetType" > - +