From 34a1f514a08819938362ce7ad393f35e24f80e21 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Thu, 12 Dec 2024 15:08:33 +0100 Subject: [PATCH 1/5] feat: enable full-screen editor for content entries --- .../src/ContentEntryEditorConfig.ts | 4 +- .../ContentEntryForm/ContentEntryForm.tsx | 7 +- .../ContentEntryForm/DefaultLayout.tsx | 37 +++--- .../ContentEntryForm/Header/Header.tsx | 8 +- .../ShowRevisionsList/ShowRevisionList.tsx | 19 +++ .../Header/ShowRevisionsList/index.tsx | 1 + .../contentEntries/ContentEntriesModule.tsx | 13 ++ .../views/contentEntries/ContentEntry.tsx | 2 +- .../FullScreenContentEntry.styled.tsx | 116 ++++++++++++++++++ .../FullScreenContentEntry.tsx | 101 +++++++++++++++ .../FullScreenContentEntryHeaderLeft.tsx | 46 +++++++ .../RevisionListDrawer/Header.tsx | 16 +++ .../RevisionListDrawer.styled.tsx | 18 +++ .../RevisionListDrawer/RevisionListDrawer.tsx | 34 +++++ .../RevisionListDrawer/index.ts | 1 + .../FullScreenContentEntry/index.ts | 1 + .../useFullScreenContentEntry.ts | 13 ++ .../RevisionsList/RevisionListDrawer.tsx | 0 packages/feature-flags/src/index.ts | 1 + packages/ui/src/Tabs/Tabs.tsx | 16 +-- webiny.project.ts | 3 +- 21 files changed, 423 insertions(+), 34 deletions(-) create mode 100644 packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/ShowRevisionList.tsx create mode 100644 packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/index.tsx create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.styled.tsx create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/Header.tsx create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.styled.tsx create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.tsx create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/index.ts create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/index.ts create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/useFullScreenContentEntry.ts create mode 100644 packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionListDrawer.tsx diff --git a/packages/app-headless-cms/src/ContentEntryEditorConfig.ts b/packages/app-headless-cms/src/ContentEntryEditorConfig.ts index 8b1b3333623..80e005bdc9c 100644 --- a/packages/app-headless-cms/src/ContentEntryEditorConfig.ts +++ b/packages/app-headless-cms/src/ContentEntryEditorConfig.ts @@ -7,6 +7,7 @@ import { useTemplate } from "~/admin/plugins/fieldRenderers/dynamicZone"; import { ContentEntryForm as BaseContentEntryForm } from "./admin/components/ContentEntryForm/ContentEntryForm"; +import { Header as ContentEntryFormHeader } from "./admin/components/ContentEntryForm/Header"; import { ContentEntryFormPreview } from "./admin/components/ContentEntryForm/ContentEntryFormPreview"; import { useContentEntryForm } from "./admin/components/ContentEntryForm/useContentEntryForm"; import { DefaultLayout } from "~/admin/components/ContentEntryForm/DefaultLayout"; @@ -21,7 +22,8 @@ export const ContentEntryEditorConfig = Object.assign(BaseContentEntryEditorConf useContentEntry, DefaultLayout, ContentEntryForm: Object.assign(BaseContentEntryForm, { - useContentEntryForm + useContentEntryForm, + Header: ContentEntryFormHeader }), ContentEntryFormPreview }), diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryForm.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryForm.tsx index 13f5aa2a7d7..ddb191b7494 100644 --- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryForm.tsx +++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/ContentEntryForm.tsx @@ -18,7 +18,7 @@ const FormWrapper = styled("div")({ overflow: "auto" }); -export interface ContentEntryFormProps { +export interface ContentEntryFormProps extends React.HTMLAttributes { entry: Partial; /** * This callback is executed when an entry, or a revision, are created. @@ -45,7 +45,8 @@ export const ContentEntryForm = makeDecoratable( persistEntry, onAfterCreate, setSaveEntry, - header = true + header = true, + ...props }: ContentEntryFormProps) => { const formElementRef = useRef(null); const { model } = useModel(); @@ -78,7 +79,7 @@ export const ContentEntryForm = makeDecoratable( > {header ? header : null} - + {formRenderer ? ( ) : ( diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/DefaultLayout.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/DefaultLayout.tsx index 0c5b4114a9b..f03278109a0 100644 --- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/DefaultLayout.tsx +++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/DefaultLayout.tsx @@ -4,22 +4,27 @@ import { Bind } from "@webiny/form"; import { CmsModel } from "@webiny/app-headless-cms-common/types"; import { Fields } from "~/admin/components/ContentEntryForm/Fields"; -export interface DefaultLayoutProps { +export interface DefaultLayoutProps extends React.HTMLAttributes { model: CmsModel; } -export const DefaultLayout = makeDecoratable("DefaultLayout", ({ model }: DefaultLayoutProps) => { - return ( - - ); -}); +export const DefaultLayout = makeDecoratable( + "DefaultLayout", + ({ model, ...props }: DefaultLayoutProps) => { + return ( +
+ +
+ ); + } +); diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/Header.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/Header.tsx index 1205dfd1933..190e659db3d 100644 --- a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/Header.tsx +++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/Header.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Buttons } from "@webiny/app-admin"; +import { Buttons, makeDecoratable } from "@webiny/app-admin"; import { useContentEntryEditorConfig } from "~/admin/config/contentEntries"; @@ -20,11 +20,11 @@ const Actions = styled.div` align-items: center; `; -export const Header = () => { +export const Header = makeDecoratable("ContentEntryFormHeader", () => { const { buttonActions } = useContentEntryEditorConfig(); return ( - +
@@ -34,4 +34,4 @@ export const Header = () => { ); -}; +}); diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/ShowRevisionList.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/ShowRevisionList.tsx new file mode 100644 index 00000000000..ad8f164e6a2 --- /dev/null +++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/ShowRevisionList.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { ReactComponent as ListIcon } from "@material-design-icons/svg/outlined/checklist.svg"; +import { ContentEntryEditorConfig } from "~/admin/config/contentEntries"; +import { useFullScreenContentEntry } from "~/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/useFullScreenContentEntry"; + +export const ShowRevisionList = () => { + const { openRevisionList } = useFullScreenContentEntry(); + const { useOptionsMenuItem } = ContentEntryEditorConfig.Actions.MenuItemAction; + const { OptionsMenuItem } = useOptionsMenuItem(); + + return ( + } + label={"Show entry revisions"} + onAction={() => openRevisionList(true)} + data-testid={"cms.content-form.header.show-revisions"} + /> + ); +}; diff --git a/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/index.tsx b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/index.tsx new file mode 100644 index 00000000000..2537ddf160e --- /dev/null +++ b/packages/app-headless-cms/src/admin/components/ContentEntryForm/Header/ShowRevisionsList/index.tsx @@ -0,0 +1 @@ +export * from "./ShowRevisionList"; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesModule.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesModule.tsx index a6dbc26d84f..eac632bf4d1 100644 --- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesModule.tsx +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntriesModule.tsx @@ -33,6 +33,9 @@ import { ShowConfirmationOnDelete } from "~/admin/components/Decorators/ShowConf import { ShowConfirmationOnPublish } from "~/admin/components/Decorators/ShowConfirmationOnPublish"; import { ShowConfirmationOnUnpublish } from "~/admin/components/Decorators/ShowConfirmationOnUnpublish"; import { ShowConfirmationOnDeleteRevision } from "~/admin/components/Decorators/ShowConfirmationOnDeleteRevision"; +import { FullScreenContentEntry } from "~/admin/views/contentEntries/ContentEntry/FullScreenContentEntry"; +import { ShowRevisionList } from "~/admin/components/ContentEntryForm/Header/ShowRevisionsList"; +import { featureFlags } from "@webiny/feature-flags"; const { Browser } = ContentEntryListConfig; const { Actions } = ContentEntryEditorConfig; @@ -111,7 +114,17 @@ export const ContentEntriesModule = () => { } /> } /> } /> + {/* + The following Menu Action registration is needed + only when the 'allowCmsFullScreenEditor' feature is enabled. + */} + } + remove={!featureFlags.allowCmsFullScreenEditor} + /> + ); }; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry.tsx index 5f625d758e3..b97f0536d51 100644 --- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry.tsx +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry.tsx @@ -51,7 +51,7 @@ export const ContentEntry = makeDecoratable("ContentEntry", () => { return ( - + ` + font-family: var(--mdc-typography-font-family); + font-size: 20px; + line-height: 1.4em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + opacity: ${props => (props.isNewEntry ? 0.3 : 1)}; +`; + +export const EntryVersion = styled.span` + font-size: 20px; + color: var(--mdc-theme-text-secondary-on-background); + margin-left: 5px; + line-height: 120%; + + @media (max-width: 800px) { + display: none; + } +`; + +export const EntryMeta = styled.div` + height: 20px; + margin: -2px 2px 2px 2px; + + @media (max-width: 960px) { + display: none; + } +`; + +/** + * FORM + */ +export const FullScreenContentEntryContent = styled.div` + overflow-y: scroll; + height: calc(100vh - 64px); + margin-top: 64px; +`; + +export const FullScreenContentEntryContentFormWrapper = styled.div` + display: flex; + justify-content: center; +`; + +export const FullScreenContentEntryContentFormInner = styled.div` + flex-shrink: 1; + flex-basis: 920px; +`; + +export const FullScreenContentEntryContentFormInnerCss = css` + height: 100% !important; +`; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx new file mode 100644 index 00000000000..a4851041708 --- /dev/null +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx @@ -0,0 +1,101 @@ +import React, { useState } from "react"; +import { createPortal } from "react-dom"; +import { featureFlags } from "@webiny/feature-flags"; +import { CircularProgress } from "@webiny/ui/Progress"; +import { useContentEntry } from "~/admin/views/contentEntries/hooks"; +import { RevisionListDrawer } from "./RevisionListDrawer"; +import { FullScreenContentEntryHeaderLeft } from "./FullScreenContentEntryHeaderLeft"; +import { + FullScreenContentEntryContainer, + FullScreenContentEntryContent, + FullScreenContentEntryContentFormInner, + FullScreenContentEntryContentFormInnerCss, + FullScreenContentEntryContentFormWrapper, + FullScreenContentEntryHeader, + FullScreenContentEntryHeaderContent +} from "./FullScreenContentEntry.styled"; +import { FullScreenContentEntryProvider } from "./useFullScreenContentEntry"; +import { ContentEntryEditorConfig } from "~/ContentEntryEditorConfig"; + +const { ContentEntry } = ContentEntryEditorConfig; + +const FullScreenContentEntryDecorator = ContentEntry.createDecorator(Original => { + return function ContentEntry() { + if (!featureFlags.allowCmsFullScreenEditor) { + return ; + } + + const { loading } = useContentEntry(); + const [isRevisionListOpen, openRevisionList] = useState(false); + + return ( + + + + + + + + {/* + Empty div to relocate Entry Form Header via React Portal in full-screen mode. + Ensures layout flexibility without disrupting React context and state. + */} +
+ + + {loading && } + + + + + + + + + + + ); + }; +}); + +const FullScreenContentEntryFormDecorator = ContentEntry.ContentEntryForm.createDecorator( + Original => { + return function ContentEntryForm(props) { + if (!featureFlags.allowCmsFullScreenEditor) { + return ; + } + + return ; + }; + } +); + +const FullScreenContentEntryFormHeaderDecorator = + ContentEntry.ContentEntryForm.Header.createDecorator(Original => { + return function ContentEntryFormHeader() { + if (!featureFlags.allowCmsFullScreenEditor) { + return ; + } + + const headerRightElement = document.getElementById("cms-content-entry-header-right"); + + if (!headerRightElement) { + return ; + } + + return createPortal(, headerRightElement); + }; + }); + +export const FullScreenContentEntry = () => { + return ( + <> + + + + + ); +}; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx new file mode 100644 index 00000000000..f8fd37a94e7 --- /dev/null +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx @@ -0,0 +1,46 @@ +import React, { useMemo } from "react"; +import { ReactComponent as BackIcon } from "@material-design-icons/svg/round/arrow_back.svg"; +import { useNavigateFolder } from "@webiny/app-aco"; +import { IconButton } from "@webiny/ui/Button"; +import { Typography } from "@webiny/ui/Typography"; +import { useModel } from "~/admin/components/ModelProvider"; +import { useContentEntry } from "~/admin/views/contentEntries/hooks"; +import { + EntryMeta, + EntryTitle, + EntryVersion, + TitleWrapper, + EntryName +} from "./FullScreenContentEntry.styled"; + +export const FullScreenContentEntryHeaderLeft = () => { + const { model } = useModel(); + const { entry } = useContentEntry(); + const { navigateToFolder, currentFolderId } = useNavigateFolder(); + + const title = useMemo( + () => entry?.meta?.title || `New ${model.name}`, + [entry.meta, model.name] + ); + const isNewEntry = useMemo(() => !entry.meta?.title, [entry.meta]); + const version = useMemo(() => entry.meta?.version ?? null, [entry.meta]); + const status = useMemo(() => entry.meta?.status ?? null, [entry.meta]); + const modelName = useMemo(() => model.name, [model.name]); + + return ( + <> + navigateToFolder(currentFolderId)} icon={} /> + + + + {`Model: ${modelName} ${status ? `(status: ${status})` : ""}`} + + + + {title} + {version && {`(v${version})`}} + + + + ); +}; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/Header.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/Header.tsx new file mode 100644 index 00000000000..8eec81d8e04 --- /dev/null +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/Header.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { ReactComponent as CloseIcon } from "@material-design-icons/svg/outlined/close.svg"; +import { SimpleFormHeader } from "@webiny/app-admin/components/SimpleForm"; +import { CloseButton } from "./RevisionListDrawer.styled"; + +interface HeaderProps { + onClose: () => void; +} + +export const Header = ({ onClose }: HeaderProps) => { + return ( + + } onClick={onClose} /> + + ); +}; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.styled.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.styled.tsx new file mode 100644 index 00000000000..f9ca52c29c2 --- /dev/null +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.styled.tsx @@ -0,0 +1,18 @@ +import styled from "@emotion/styled"; +import { IconButton } from "@webiny/ui/Button"; +import { DrawerRight } from "@webiny/ui/Drawer"; + +export const Drawer = styled(DrawerRight)` + width: 1000px; + max-width: 100vw; + z-index: 25; + + & ~ .mdc-drawer-scrim { + z-index: 24; + } +`; + +export const CloseButton = styled(IconButton)` + position: absolute; + top: 15px; +`; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.tsx new file mode 100644 index 00000000000..301ae779b22 --- /dev/null +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/RevisionListDrawer.tsx @@ -0,0 +1,34 @@ +import React from "react"; +// @ts-expect-error +import { useHotkeys } from "react-hotkeyz"; +import { DrawerContent } from "@webiny/ui/Drawer"; +import { RevisionsList } from "~/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionsList"; +import { featureFlags } from "@webiny/feature-flags"; +import { useFullScreenContentEntry } from "../useFullScreenContentEntry"; +import { Header } from "./Header"; +import { Drawer } from "./RevisionListDrawer.styled"; + +export const RevisionListDrawer = () => { + const { isRevisionListOpen, openRevisionList } = useFullScreenContentEntry(); + + if (!featureFlags.allowCmsFullScreenEditor) { + return null; + } + + useHotkeys({ + zIndex: 55, + disabled: !isRevisionListOpen, + keys: { + esc: () => openRevisionList(false) + } + }); + + return ( + openRevisionList(false)} modal dismissible> + +
openRevisionList(false)} /> + + + + ); +}; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/index.ts b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/index.ts new file mode 100644 index 00000000000..8374a82ebb4 --- /dev/null +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/RevisionListDrawer/index.ts @@ -0,0 +1 @@ +export * from "./RevisionListDrawer"; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/index.ts b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/index.ts new file mode 100644 index 00000000000..34fb1299742 --- /dev/null +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/index.ts @@ -0,0 +1 @@ +export * from "./FullScreenContentEntry"; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/useFullScreenContentEntry.ts b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/useFullScreenContentEntry.ts new file mode 100644 index 00000000000..ca99ed82874 --- /dev/null +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/useFullScreenContentEntry.ts @@ -0,0 +1,13 @@ +import { createGenericContext } from "@webiny/app"; + +export interface FullScreenContentEntryContext { + isRevisionListOpen: boolean; + openRevisionList: (open: boolean) => void; +} + +const { Provider, useHook } = createGenericContext( + "FullScreenContentEntryContext" +); + +export const useFullScreenContentEntry = useHook; +export const FullScreenContentEntryProvider = Provider; diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionListDrawer.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/RevisionsList/RevisionListDrawer.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/packages/feature-flags/src/index.ts b/packages/feature-flags/src/index.ts index 6b323751509..ec9609c9076 100644 --- a/packages/feature-flags/src/index.ts +++ b/packages/feature-flags/src/index.ts @@ -1,6 +1,7 @@ export type FeatureFlags> = { experimentalAdminOmniSearch?: boolean; allowCmsLegacyRichTextInput?: boolean; + allowCmsFullScreenEditor?: boolean; newWatchCommand?: boolean; } & TFeatureFlags; diff --git a/packages/ui/src/Tabs/Tabs.tsx b/packages/ui/src/Tabs/Tabs.tsx index 6e46b5d6ffd..d5f6a1f3670 100644 --- a/packages/ui/src/Tabs/Tabs.tsx +++ b/packages/ui/src/Tabs/Tabs.tsx @@ -1,9 +1,9 @@ -import React, { createContext, PropsWithChildren, useMemo, useState } from "react"; +import React, { createContext, useMemo, useState } from "react"; import classNames from "classnames"; import { TabBar, Tab as RmwcTab } from "@rmwc/tabs"; import { TabProps } from "./Tab"; -export type TabsProps = PropsWithChildren<{ +export interface TabsProps extends React.HTMLAttributes { /** * Append a class name. */ @@ -23,7 +23,7 @@ export type TabsProps = PropsWithChildren<{ * Tab ID for the testing. */ "data-testid"?: string; -}>; +} const disabledStyles: Record = { opacity: 0.5, @@ -44,11 +44,11 @@ export const TabsContext = createContext(undefined); /** * Use Tabs component to display a list of choices, once the handler is triggered. */ -export const Tabs = (props: TabsProps) => { +export const Tabs = ({ children, value, onActivate, className, ...props }: TabsProps) => { const [activeTabIndex, setActiveIndex] = useState(0); const [tabs, setTabs] = useState([]); - const activeIndex = props.value !== undefined ? props.value : activeTabIndex; + const activeIndex = value !== undefined ? value : activeTabIndex; /* We need to generate a key like this to trigger a proper component re-render when child tabs change. */ const tabBar = ( @@ -58,7 +58,7 @@ export const Tabs = (props: TabsProps) => { activeTabIndex={activeIndex} onActivate={evt => { setActiveIndex(evt.detail.index); - props.onActivate && props.onActivate(evt.detail.index); + onActivate && onActivate(evt.detail.index); }} > {tabs.map(item => { @@ -121,10 +121,10 @@ export const Tabs = (props: TabsProps) => { ); return ( -
+
{tabBar}
{content}
- {props.children} + {children}
); }; diff --git a/webiny.project.ts b/webiny.project.ts index f385bf68f4c..d579f4a2a5b 100644 --- a/webiny.project.ts +++ b/webiny.project.ts @@ -56,6 +56,7 @@ export default { featureFlags: { experimentalAdminOmniSearch: true, - newWatchCommand: true + newWatchCommand: true, + allowCmsFullScreenEditor: true } }; From 3a57698a12197e8dd33e23165207e9ff71333a3f Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Thu, 12 Dec 2024 18:27:05 +0100 Subject: [PATCH 2/5] refactor(app-record-locking): simplify loading state UI --- .../ContentEntryGuard.tsx | 37 +---- yarn.lock | 126 +++++++++++++++++- 2 files changed, 126 insertions(+), 37 deletions(-) diff --git a/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryGuard.tsx b/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryGuard.tsx index de853504a71..c2d3e6d9e05 100644 --- a/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryGuard.tsx +++ b/packages/app-record-locking/src/components/HeadlessCmsContentEntry/ContentEntryGuard.tsx @@ -1,35 +1,10 @@ +import React, { useEffect, useState } from "react"; import { useRecordLocking } from "~/hooks"; -import { Elevation } from "@webiny/ui/Elevation"; import { CircularProgress } from "@webiny/ui/Progress"; -import { css } from "emotion"; -import styled from "@emotion/styled"; -import React, { useEffect, useState } from "react"; import { LockedRecord } from "../LockedRecord"; import { IRecordLockingLockRecord } from "~/types"; import { CmsContentEntry, CmsModel } from "@webiny/app-headless-cms/types"; -const DetailsContainer = styled("div")({ - height: "calc(100% - 10px)", - overflow: "hidden", - position: "relative", - nav: { - backgroundColor: "var(--mdc-theme-surface)" - } -}); - -const RenderBlock = styled("div")({ - position: "relative", - zIndex: 0, - backgroundColor: "var(--mdc-theme-background)", - height: "100%", - padding: 25 -}); - -const elevationStyles = css({ - position: "relative", - height: "100%" -}); - export interface IContentEntryGuardProps { loading: boolean; entry: CmsContentEntry; @@ -57,15 +32,7 @@ export const ContentEntryGuard = (props: IContentEntryGuardProps) => { }, [entry.id, loading]); if (locked === undefined) { - return ( - - - - - - - - ); + return ; } else if (locked) { return ; } diff --git a/yarn.lock b/yarn.lock index 64ad3e40a18..bb0ba9fb52e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4807,6 +4807,29 @@ __metadata: languageName: node linkType: hard +"@demo/admin@npm:1.0.0, @demo/admin@workspace:extensions/admin": + version: 0.0.0-use.local + resolution: "@demo/admin@workspace:extensions/admin" + dependencies: + "@emotion/styled": "npm:^11.11.5" + "@types/lodash": "npm:^4.17.5" + "@webiny/app-admin": "npm:0.0.0" + "@webiny/app-headless-cms": "npm:0.0.0" + "@webiny/app-headless-cms-common": "npm:0.0.0" + lodash: "npm:^4.17.21" + react: "npm:18.2.0" + languageName: unknown + linkType: soft + +"@demo/website@workspace:extensions/website": + version: 0.0.0-use.local + resolution: "@demo/website@workspace:extensions/website" + dependencies: + "@webiny/react-rich-text-lexical-renderer": "npm:0.0.0" + "@webiny/react-router": "npm:0.0.0" + languageName: unknown + linkType: soft + "@dnd-kit/accessibility@npm:^3.1.0": version: 3.1.0 resolution: "@dnd-kit/accessibility@npm:3.1.0" @@ -4975,6 +4998,25 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.13.5": + version: 11.13.5 + resolution: "@emotion/babel-plugin@npm:11.13.5" + dependencies: + "@babel/helper-module-imports": "npm:^7.16.7" + "@babel/runtime": "npm:^7.18.3" + "@emotion/hash": "npm:^0.9.2" + "@emotion/memoize": "npm:^0.9.0" + "@emotion/serialize": "npm:^1.3.3" + babel-plugin-macros: "npm:^3.1.0" + convert-source-map: "npm:^1.5.0" + escape-string-regexp: "npm:^4.0.0" + find-root: "npm:^1.1.0" + source-map: "npm:^0.5.7" + stylis: "npm:4.2.0" + checksum: 10/cd310568314d886ca328e504f84c4f7f9c7f092ea34a2b43fdb61f84665bf301ba2ef49e0fd1e7ded3d81363d9bbefbb32674ce88b317cfb64db2b65e5ff423f + languageName: node + linkType: hard + "@emotion/cache@npm:^10.0.27": version: 10.0.29 resolution: "@emotion/cache@npm:10.0.29" @@ -5034,6 +5076,13 @@ __metadata: languageName: node linkType: hard +"@emotion/hash@npm:^0.9.2": + version: 0.9.2 + resolution: "@emotion/hash@npm:0.9.2" + checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387 + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.1.1, @emotion/is-prop-valid@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" @@ -5043,6 +5092,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^1.3.0": + version: 1.3.1 + resolution: "@emotion/is-prop-valid@npm:1.3.1" + dependencies: + "@emotion/memoize": "npm:^0.9.0" + checksum: 10/abbc5c7bf4017415da5b06067fc0b4771d1f22cf94ec37fd54c07b3bd1bcffbda2405ca686e7ee64a9cfc51461262b712f724850e838775347a949f72949ad03 + languageName: node + linkType: hard + "@emotion/memoize@npm:0.7.4": version: 0.7.4 resolution: "@emotion/memoize@npm:0.7.4" @@ -5064,6 +5122,13 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.9.0": + version: 0.9.0 + resolution: "@emotion/memoize@npm:0.9.0" + checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1 + languageName: node + linkType: hard + "@emotion/react@npm:11.10.8": version: 11.10.8 resolution: "@emotion/react@npm:11.10.8" @@ -5124,6 +5189,19 @@ __metadata: languageName: node linkType: hard +"@emotion/serialize@npm:^1.3.3": + version: 1.3.3 + resolution: "@emotion/serialize@npm:1.3.3" + dependencies: + "@emotion/hash": "npm:^0.9.2" + "@emotion/memoize": "npm:^0.9.0" + "@emotion/unitless": "npm:^0.10.0" + "@emotion/utils": "npm:^1.4.2" + csstype: "npm:^3.0.2" + checksum: 10/44a2e06fc52dba177d9cf720f7b2c5d45ee4c0d9c09b78302d9a625e758d728ef3ae26f849237fec6f70e9eeb7d87e45a65028e944dc1f877df97c599f1cdaee + languageName: node + linkType: hard + "@emotion/sheet@npm:0.9.4": version: 0.9.4 resolution: "@emotion/sheet@npm:0.9.4" @@ -5158,6 +5236,26 @@ __metadata: languageName: node linkType: hard +"@emotion/styled@npm:^11.11.5": + version: 11.14.0 + resolution: "@emotion/styled@npm:11.14.0" + dependencies: + "@babel/runtime": "npm:^7.18.3" + "@emotion/babel-plugin": "npm:^11.13.5" + "@emotion/is-prop-valid": "npm:^1.3.0" + "@emotion/serialize": "npm:^1.3.3" + "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.2.0" + "@emotion/utils": "npm:^1.4.2" + peerDependencies: + "@emotion/react": ^11.0.0-rc.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/64bb3fd8c5d3042ba803eb2052fddf8e057b927682677f8fc41ecfe2b1abcc0da03944fde79fac8f2f55a56383d5c9547b93d4641bb51452cf59415c02dd9b10 + languageName: node + linkType: hard + "@emotion/stylis@npm:0.8.5": version: 0.8.5 resolution: "@emotion/stylis@npm:0.8.5" @@ -5172,6 +5270,13 @@ __metadata: languageName: node linkType: hard +"@emotion/unitless@npm:^0.10.0": + version: 0.10.0 + resolution: "@emotion/unitless@npm:0.10.0" + checksum: 10/6851c16edce01c494305f43b2cad7a26b939a821131b7c354e49b8e3b012c8810024755b0f4a03ef51117750309e55339825a97bd10411fb3687e68904769106 + languageName: node + linkType: hard + "@emotion/unitless@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/unitless@npm:0.8.0" @@ -5195,6 +5300,15 @@ __metadata: languageName: node linkType: hard +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.2.0": + version: 1.2.0 + resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.2.0" + peerDependencies: + react: ">=16.8.0" + checksum: 10/2374999db8d53ef661d61ed1026c42a849632e4f03826f7eba0314c1d92ae342161d737f5045453aa46dd4008e13ccefeba68d3165b667dfad8e5784fcb0c643 + languageName: node + linkType: hard + "@emotion/utils@npm:0.11.3": version: 0.11.3 resolution: "@emotion/utils@npm:0.11.3" @@ -5216,6 +5330,13 @@ __metadata: languageName: node linkType: hard +"@emotion/utils@npm:^1.4.2": + version: 1.4.2 + resolution: "@emotion/utils@npm:1.4.2" + checksum: 10/e5f3b8bca066b3361a7ad9064baeb9d01ed1bf51d98416a67359b62cb3affec6bb0249802c4ed11f4f8030f93cc4b67506909420bdb110adec6983d712897208 + languageName: node + linkType: hard + "@emotion/weak-memoize@npm:0.2.5": version: 0.2.5 resolution: "@emotion/weak-memoize@npm:0.2.5" @@ -10710,7 +10831,7 @@ __metadata: languageName: node linkType: hard -"@types/lodash@npm:^4.17.13": +"@types/lodash@npm:^4.17.13, @types/lodash@npm:^4.17.5": version: 4.17.13 resolution: "@types/lodash@npm:4.17.13" checksum: 10/ddb34e20810c71be2d9445bcc4b64ec25b83976738454de709854b79c7f655b03704b76235445699956d65012987720e0e429a35489de65495cdb5420202d905 @@ -15799,7 +15920,7 @@ __metadata: languageName: unknown linkType: soft -"@webiny/react-rich-text-lexical-renderer@workspace:packages/react-rich-text-lexical-renderer": +"@webiny/react-rich-text-lexical-renderer@npm:0.0.0, @webiny/react-rich-text-lexical-renderer@workspace:packages/react-rich-text-lexical-renderer": version: 0.0.0-use.local resolution: "@webiny/react-rich-text-lexical-renderer@workspace:packages/react-rich-text-lexical-renderer" dependencies: @@ -16431,6 +16552,7 @@ __metadata: version: 0.0.0-use.local resolution: "admin@workspace:apps/admin" dependencies: + "@demo/admin": "npm:1.0.0" "@editorjs/delimiter": "npm:^1.2.0" "@editorjs/list": "npm:^1.6.0" "@editorjs/quote": "npm:^2.4.0" From 01f395ed2c902011968b16b55cb8e1a8a3329e5a Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Thu, 12 Dec 2024 18:41:38 +0100 Subject: [PATCH 3/5] chore: revert deps --- yarn.lock | 126 +----------------------------------------------------- 1 file changed, 2 insertions(+), 124 deletions(-) diff --git a/yarn.lock b/yarn.lock index bb0ba9fb52e..64ad3e40a18 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4807,29 +4807,6 @@ __metadata: languageName: node linkType: hard -"@demo/admin@npm:1.0.0, @demo/admin@workspace:extensions/admin": - version: 0.0.0-use.local - resolution: "@demo/admin@workspace:extensions/admin" - dependencies: - "@emotion/styled": "npm:^11.11.5" - "@types/lodash": "npm:^4.17.5" - "@webiny/app-admin": "npm:0.0.0" - "@webiny/app-headless-cms": "npm:0.0.0" - "@webiny/app-headless-cms-common": "npm:0.0.0" - lodash: "npm:^4.17.21" - react: "npm:18.2.0" - languageName: unknown - linkType: soft - -"@demo/website@workspace:extensions/website": - version: 0.0.0-use.local - resolution: "@demo/website@workspace:extensions/website" - dependencies: - "@webiny/react-rich-text-lexical-renderer": "npm:0.0.0" - "@webiny/react-router": "npm:0.0.0" - languageName: unknown - linkType: soft - "@dnd-kit/accessibility@npm:^3.1.0": version: 3.1.0 resolution: "@dnd-kit/accessibility@npm:3.1.0" @@ -4998,25 +4975,6 @@ __metadata: languageName: node linkType: hard -"@emotion/babel-plugin@npm:^11.13.5": - version: 11.13.5 - resolution: "@emotion/babel-plugin@npm:11.13.5" - dependencies: - "@babel/helper-module-imports": "npm:^7.16.7" - "@babel/runtime": "npm:^7.18.3" - "@emotion/hash": "npm:^0.9.2" - "@emotion/memoize": "npm:^0.9.0" - "@emotion/serialize": "npm:^1.3.3" - babel-plugin-macros: "npm:^3.1.0" - convert-source-map: "npm:^1.5.0" - escape-string-regexp: "npm:^4.0.0" - find-root: "npm:^1.1.0" - source-map: "npm:^0.5.7" - stylis: "npm:4.2.0" - checksum: 10/cd310568314d886ca328e504f84c4f7f9c7f092ea34a2b43fdb61f84665bf301ba2ef49e0fd1e7ded3d81363d9bbefbb32674ce88b317cfb64db2b65e5ff423f - languageName: node - linkType: hard - "@emotion/cache@npm:^10.0.27": version: 10.0.29 resolution: "@emotion/cache@npm:10.0.29" @@ -5076,13 +5034,6 @@ __metadata: languageName: node linkType: hard -"@emotion/hash@npm:^0.9.2": - version: 0.9.2 - resolution: "@emotion/hash@npm:0.9.2" - checksum: 10/379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387 - languageName: node - linkType: hard - "@emotion/is-prop-valid@npm:^1.1.1, @emotion/is-prop-valid@npm:^1.2.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" @@ -5092,15 +5043,6 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^1.3.0": - version: 1.3.1 - resolution: "@emotion/is-prop-valid@npm:1.3.1" - dependencies: - "@emotion/memoize": "npm:^0.9.0" - checksum: 10/abbc5c7bf4017415da5b06067fc0b4771d1f22cf94ec37fd54c07b3bd1bcffbda2405ca686e7ee64a9cfc51461262b712f724850e838775347a949f72949ad03 - languageName: node - linkType: hard - "@emotion/memoize@npm:0.7.4": version: 0.7.4 resolution: "@emotion/memoize@npm:0.7.4" @@ -5122,13 +5064,6 @@ __metadata: languageName: node linkType: hard -"@emotion/memoize@npm:^0.9.0": - version: 0.9.0 - resolution: "@emotion/memoize@npm:0.9.0" - checksum: 10/038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1 - languageName: node - linkType: hard - "@emotion/react@npm:11.10.8": version: 11.10.8 resolution: "@emotion/react@npm:11.10.8" @@ -5189,19 +5124,6 @@ __metadata: languageName: node linkType: hard -"@emotion/serialize@npm:^1.3.3": - version: 1.3.3 - resolution: "@emotion/serialize@npm:1.3.3" - dependencies: - "@emotion/hash": "npm:^0.9.2" - "@emotion/memoize": "npm:^0.9.0" - "@emotion/unitless": "npm:^0.10.0" - "@emotion/utils": "npm:^1.4.2" - csstype: "npm:^3.0.2" - checksum: 10/44a2e06fc52dba177d9cf720f7b2c5d45ee4c0d9c09b78302d9a625e758d728ef3ae26f849237fec6f70e9eeb7d87e45a65028e944dc1f877df97c599f1cdaee - languageName: node - linkType: hard - "@emotion/sheet@npm:0.9.4": version: 0.9.4 resolution: "@emotion/sheet@npm:0.9.4" @@ -5236,26 +5158,6 @@ __metadata: languageName: node linkType: hard -"@emotion/styled@npm:^11.11.5": - version: 11.14.0 - resolution: "@emotion/styled@npm:11.14.0" - dependencies: - "@babel/runtime": "npm:^7.18.3" - "@emotion/babel-plugin": "npm:^11.13.5" - "@emotion/is-prop-valid": "npm:^1.3.0" - "@emotion/serialize": "npm:^1.3.3" - "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.2.0" - "@emotion/utils": "npm:^1.4.2" - peerDependencies: - "@emotion/react": ^11.0.0-rc.0 - react: ">=16.8.0" - peerDependenciesMeta: - "@types/react": - optional: true - checksum: 10/64bb3fd8c5d3042ba803eb2052fddf8e057b927682677f8fc41ecfe2b1abcc0da03944fde79fac8f2f55a56383d5c9547b93d4641bb51452cf59415c02dd9b10 - languageName: node - linkType: hard - "@emotion/stylis@npm:0.8.5": version: 0.8.5 resolution: "@emotion/stylis@npm:0.8.5" @@ -5270,13 +5172,6 @@ __metadata: languageName: node linkType: hard -"@emotion/unitless@npm:^0.10.0": - version: 0.10.0 - resolution: "@emotion/unitless@npm:0.10.0" - checksum: 10/6851c16edce01c494305f43b2cad7a26b939a821131b7c354e49b8e3b012c8810024755b0f4a03ef51117750309e55339825a97bd10411fb3687e68904769106 - languageName: node - linkType: hard - "@emotion/unitless@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/unitless@npm:0.8.0" @@ -5300,15 +5195,6 @@ __metadata: languageName: node linkType: hard -"@emotion/use-insertion-effect-with-fallbacks@npm:^1.2.0": - version: 1.2.0 - resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.2.0" - peerDependencies: - react: ">=16.8.0" - checksum: 10/2374999db8d53ef661d61ed1026c42a849632e4f03826f7eba0314c1d92ae342161d737f5045453aa46dd4008e13ccefeba68d3165b667dfad8e5784fcb0c643 - languageName: node - linkType: hard - "@emotion/utils@npm:0.11.3": version: 0.11.3 resolution: "@emotion/utils@npm:0.11.3" @@ -5330,13 +5216,6 @@ __metadata: languageName: node linkType: hard -"@emotion/utils@npm:^1.4.2": - version: 1.4.2 - resolution: "@emotion/utils@npm:1.4.2" - checksum: 10/e5f3b8bca066b3361a7ad9064baeb9d01ed1bf51d98416a67359b62cb3affec6bb0249802c4ed11f4f8030f93cc4b67506909420bdb110adec6983d712897208 - languageName: node - linkType: hard - "@emotion/weak-memoize@npm:0.2.5": version: 0.2.5 resolution: "@emotion/weak-memoize@npm:0.2.5" @@ -10831,7 +10710,7 @@ __metadata: languageName: node linkType: hard -"@types/lodash@npm:^4.17.13, @types/lodash@npm:^4.17.5": +"@types/lodash@npm:^4.17.13": version: 4.17.13 resolution: "@types/lodash@npm:4.17.13" checksum: 10/ddb34e20810c71be2d9445bcc4b64ec25b83976738454de709854b79c7f655b03704b76235445699956d65012987720e0e429a35489de65495cdb5420202d905 @@ -15920,7 +15799,7 @@ __metadata: languageName: unknown linkType: soft -"@webiny/react-rich-text-lexical-renderer@npm:0.0.0, @webiny/react-rich-text-lexical-renderer@workspace:packages/react-rich-text-lexical-renderer": +"@webiny/react-rich-text-lexical-renderer@workspace:packages/react-rich-text-lexical-renderer": version: 0.0.0-use.local resolution: "@webiny/react-rich-text-lexical-renderer@workspace:packages/react-rich-text-lexical-renderer" dependencies: @@ -16552,7 +16431,6 @@ __metadata: version: 0.0.0-use.local resolution: "admin@workspace:apps/admin" dependencies: - "@demo/admin": "npm:1.0.0" "@editorjs/delimiter": "npm:^1.2.0" "@editorjs/list": "npm:^1.6.0" "@editorjs/quote": "npm:^2.4.0" From ae64ee8a23de51ba534c2a3b3cb352f3a37169a8 Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Thu, 12 Dec 2024 18:50:39 +0100 Subject: [PATCH 4/5] chore: remove deps --- packages/app-record-locking/package.json | 1 - yarn.lock | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/app-record-locking/package.json b/packages/app-record-locking/package.json index dc84743a946..fc4148d7b09 100644 --- a/packages/app-record-locking/package.json +++ b/packages/app-record-locking/package.json @@ -30,7 +30,6 @@ "apollo-client": "^2.6.10", "apollo-link": "^1.2.14", "crypto-hash": "^3.0.0", - "emotion": "10.0.27", "graphql-tag": "^2.12.6", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/yarn.lock b/yarn.lock index 64ad3e40a18..e4d0c8aa98b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14306,7 +14306,6 @@ __metadata: apollo-client: "npm:^2.6.10" apollo-link: "npm:^1.2.14" crypto-hash: "npm:^3.0.0" - emotion: "npm:10.0.27" graphql-tag: "npm:^2.12.6" react: "npm:18.2.0" react-dom: "npm:18.2.0" From 4c3e3c38c3fd031894c58dea451a633dd566195d Mon Sep 17 00:00:00 2001 From: Leonardo Giacone Date: Mon, 16 Dec 2024 09:13:45 +0100 Subject: [PATCH 5/5] fix: various fixes --- .../FullScreenContentEntry.tsx | 16 ++++----------- .../FullScreenContentEntryHeaderLeft.tsx | 20 +++++++------------ 2 files changed, 11 insertions(+), 25 deletions(-) diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx index a4851041708..e0b7a4928ca 100644 --- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx @@ -21,10 +21,6 @@ const { ContentEntry } = ContentEntryEditorConfig; const FullScreenContentEntryDecorator = ContentEntry.createDecorator(Original => { return function ContentEntry() { - if (!featureFlags.allowCmsFullScreenEditor) { - return ; - } - const { loading } = useContentEntry(); const [isRevisionListOpen, openRevisionList] = useState(false); @@ -64,10 +60,6 @@ const FullScreenContentEntryDecorator = ContentEntry.createDecorator(Original => const FullScreenContentEntryFormDecorator = ContentEntry.ContentEntryForm.createDecorator( Original => { return function ContentEntryForm(props) { - if (!featureFlags.allowCmsFullScreenEditor) { - return ; - } - return ; }; } @@ -76,10 +68,6 @@ const FullScreenContentEntryFormDecorator = ContentEntry.ContentEntryForm.create const FullScreenContentEntryFormHeaderDecorator = ContentEntry.ContentEntryForm.Header.createDecorator(Original => { return function ContentEntryFormHeader() { - if (!featureFlags.allowCmsFullScreenEditor) { - return ; - } - const headerRightElement = document.getElementById("cms-content-entry-header-right"); if (!headerRightElement) { @@ -91,6 +79,10 @@ const FullScreenContentEntryFormHeaderDecorator = }); export const FullScreenContentEntry = () => { + if (!featureFlags.allowCmsFullScreenEditor) { + return null; + } + return ( <> diff --git a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx index f8fd37a94e7..76f31528962 100644 --- a/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx +++ b/packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntryHeaderLeft.tsx @@ -1,9 +1,8 @@ -import React, { useMemo } from "react"; +import React from "react"; import { ReactComponent as BackIcon } from "@material-design-icons/svg/round/arrow_back.svg"; import { useNavigateFolder } from "@webiny/app-aco"; import { IconButton } from "@webiny/ui/Button"; import { Typography } from "@webiny/ui/Typography"; -import { useModel } from "~/admin/components/ModelProvider"; import { useContentEntry } from "~/admin/views/contentEntries/hooks"; import { EntryMeta, @@ -14,18 +13,13 @@ import { } from "./FullScreenContentEntry.styled"; export const FullScreenContentEntryHeaderLeft = () => { - const { model } = useModel(); - const { entry } = useContentEntry(); + const { entry, contentModel } = useContentEntry(); const { navigateToFolder, currentFolderId } = useNavigateFolder(); - const title = useMemo( - () => entry?.meta?.title || `New ${model.name}`, - [entry.meta, model.name] - ); - const isNewEntry = useMemo(() => !entry.meta?.title, [entry.meta]); - const version = useMemo(() => entry.meta?.version ?? null, [entry.meta]); - const status = useMemo(() => entry.meta?.status ?? null, [entry.meta]); - const modelName = useMemo(() => model.name, [model.name]); + const title = entry?.meta?.title || `New ${contentModel.name}`; + const isNewEntry = !entry.meta?.title; + const version = entry.meta?.version ?? null; + const status = entry.meta?.status ?? null; return ( <> @@ -33,7 +27,7 @@ export const FullScreenContentEntryHeaderLeft = () => { - {`Model: ${modelName} ${status ? `(status: ${status})` : ""}`} + {`Model: ${contentModel.name} ${status ? `(status: ${status})` : ""}`}