Merge pull request #1403 from vivid-planet/merge-main-into-next

Merge main into next

.changeset/fuzzy-years-switch.md

@@ -0,0 +1,5 @@
+---
+"@comet/cms-admin": minor
+---
+
+Show LinearProgress instead of CircularProgress when polling after initially loading the page tree

.changeset/tough-islands-share.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Add a FinalFormSaveButton component

docs/docs/getting-started/how-to-start/index.md

@@ -7,13 +7,7 @@ sidebar_position: 2
 
 To create a new COMET DXP application, execute the following command in your OS command line:
 
-`npx create-comet-app`
-
-:::info
-
-Further configuration options, such as the application's name, are requested in the command line.
-
-:::
+`npx @comet/create-app <project-name>`
 
 ## Installation
 

docs/docs/overview/packages-tools.md

@@ -111,10 +111,6 @@ Provides a component for selecting colors in forms, built with react-final-form.
 
 - [ ] @Manuel Blum add Tools Overview
 
-### @comet/create-comet-app
-
-- [ ] @Manuel Blum add create-comet-app docs
-
 ---
 
 ## Deployment from Packages

packages/admin/admin-stories/src/docs/components/Toolbar/stories/FinalFormSaveButton.stories.tsx

@@ -0,0 +1,83 @@
+import {
+    Field,
+    FinalForm,
+    FinalFormInput,
+    MainContent,
+    Toolbar,
+    ToolbarActions,
+    ToolbarBackButton,
+    ToolbarFillSpace,
+    ToolbarTitleItem,
+    useStackApi,
+    useStackSwitchApi,
+} from "@comet/admin";
+import { FinalFormSaveButton } from "@comet/admin/lib/FinalFormSaveButton";
+import { Button, Typography } from "@mui/material";
+import { storiesOf } from "@storybook/react";
+import * as React from "react";
+
+import { apolloSwapiStoryDecorator } from "../../../../apollo-story.decorator";
+import { storyRouterDecorator } from "../../../../story-router.decorator";
+import { toolbarDecorator } from "../toolbar.decorator";
+
+storiesOf("stories/components/Toolbar/Final Form Save Button", module)
+    .addDecorator(apolloSwapiStoryDecorator())
+    .addDecorator(toolbarDecorator())
+    .addDecorator(storyRouterDecorator())
+    .add("Final Form Save Button", () => {
+        function delay(ms: number) {
+            return new Promise((resolve) => setTimeout(resolve, ms));
+        }
+        return (
+            <FinalForm
+                mode="edit"
+                onSubmit={async () => {
+                    // add your form-submit function here
+                    console.log("saving async...");
+
+                    await delay(500); // simulate asynchronous submitting
+
+                    console.log("saving successful");
+                }}
+                onAfterSubmit={(values, form) => {
+                    form.reset(values);
+                }}
+            >
+                {() => {
+                    const stackSwitchApi = useStackSwitchApi();
+                    const stackApi = useStackApi();
+                    const canGoBack = stackApi && stackApi.breadCrumbs.length > 1;
+
+                    return (
+                        <>
+                            <Toolbar>
+                                <ToolbarBackButton />
+                                <ToolbarTitleItem>Final Form Save Button</ToolbarTitleItem>
+                                <ToolbarFillSpace />
+                                <ToolbarActions>
+                                    {canGoBack ? (
+                                        <FinalFormSaveButton />
+                                    ) : (
+                                        <Button
+                                            variant="contained"
+                                            color="primary"
+                                            onClick={() => {
+                                                stackSwitchApi?.activatePage("automaticTitleDetail", "details");
+                                            }}
+                                        >
+                                            <Typography>Go To Details</Typography>
+                                        </Button>
+                                    )}
+                                </ToolbarActions>
+                            </Toolbar>
+                            {canGoBack && (
+                                <MainContent>
+                                    <Field label="Title" placeholder="Title" name="title" component={FinalFormInput} />
+                                </MainContent>
+                            )}
+                        </>
+                    );
+                }}
+            </FinalForm>
+        );
+    });

packages/admin/admin/src/FinalFormSaveButton.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { useForm, useFormState } from "react-final-form";
+import { FormattedMessage } from "react-intl";
+
+import { SaveButton } from "./common/buttons/save/SaveButton";
+import { messages } from "./messages";
+
+interface FinalFormSaveButtonProps {
+    message?: React.ReactNode;
+}
+
+export const FinalFormSaveButton = ({ message = <FormattedMessage {...messages.save} /> }: FinalFormSaveButtonProps) => {
+    const form = useForm();
+    const { pristine, hasValidationErrors, submitting, hasSubmitErrors } = useFormState();
+
+    const isDisabled = pristine || hasValidationErrors || submitting;
+
+    return (
+        <SaveButton
+            disabled={isDisabled}
+            color="primary"
+            variant="contained"
+            saving={submitting}
+            hasErrors={hasSubmitErrors}
+            onClick={() => {
+                if (!isDisabled) form.submit();
+            }}
+        >
+            {message}
+        </SaveButton>
+    );
+};

packages/admin/admin/src/index.ts

@@ -64,6 +64,7 @@ export { useErrorDialog, UseErrorDialogReturn } from "./error/errordialog/useErr
 export { createFetch, FetchContext, FetchProvider, useFetch } from "./fetchProvider/fetch";
 export { FileIcon } from "./fileIcons/FileIcon";
 export { FinalForm, FinalFormSubmitEvent, useFormApiRef } from "./FinalForm";
+export { FinalFormSaveButton } from "./FinalFormSaveButton";
 export {
     FinalFormSaveCancelButtonsLegacy,
     FinalFormSaveCancelButtonsLegacyClassKey,

packages/admin/cms-admin/src/pages/pageTree/PageTree.tsx

@@ -1,6 +1,5 @@
 import { ObservableQuery, useApolloClient } from "@apollo/client";
 import { IEditDialogApi, UndoSnackbar, useSnackbarApi } from "@comet/admin";
-import { Divider } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import gql from "graphql-tag";
 import isEqual from "lodash.isequal";
@@ -318,7 +317,6 @@ const PageTree: React.ForwardRefRenderFunction<PageTreeRefApi, PageTreeProps> =
         <>
             <PageTreeDragLayer numberSelectedPages={selectedPages.length} />
             <Root>
-                <Divider />
                 <Table>
                     <AutoSizer>
                         {({ height, width }) => {

packages/admin/cms-admin/src/pages/pagesPage/PagesPage.tsx

@@ -14,7 +14,7 @@ import {
     useStoredState,
 } from "@comet/admin";
 import { Add } from "@comet/admin-icons";
-import { Box, Button, FormControlLabel, Paper, Switch } from "@mui/material";
+import { Box, Button, Divider, FormControlLabel, LinearProgress, Paper, Switch } from "@mui/material";
 import withStyles from "@mui/styles/withStyles";
 import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -180,18 +180,27 @@ export function PagesPage({
                                     />
                                 </ActionToolbarBox>
                                 <FullHeightPaper variant="outlined">
-                                    {loading ? (
+                                    {loading && isInitialLoad.current ? (
                                         <Loading behavior="fillParent" />
                                     ) : (
-                                        <PageTree
-                                            ref={refPageTree}
-                                            pages={pagesToRenderWithMatches}
-                                            editDialogApi={editDialogApi}
-                                            toggleExpand={toggleExpand}
-                                            onSelectChanged={onSelectChanged}
-                                            category={category}
-                                            siteUrl={siteConfig.url}
-                                        />
+                                        <>
+                                            <Divider />
+                                            {loading && !isInitialLoad.current ? (
+                                                <LinearProgress />
+                                            ) : (
+                                                /* Placeholder to avoid content jumping when the loading bar appears */
+                                                <Box sx={{ backgroundColor: "white", width: "100%", height: 2 }} />
+                                            )}
+                                            <PageTree
+                                                ref={refPageTree}
+                                                pages={pagesToRenderWithMatches}
+                                                editDialogApi={editDialogApi}
+                                                toggleExpand={toggleExpand}
+                                                onSelectChanged={onSelectChanged}
+                                                category={category}
+                                                siteUrl={siteConfig.url}
+                                            />
+                                        </>
                                     )}
                                 </FullHeightPaper>
                             </PageTreeContent>