Merge branch 'dev/7.0.x' into imprv/133910-141426-replace-spinner-pulse

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -2,10 +2,6 @@
 
 @use '@growi/ui/scss/atoms/btn-muted';
 
-.grw-mr-02em {
-  margin-right: 0.2em;
-}
-
 .grw-mx-02em {
   margin-right: 0.2em;
   margin-left: 0.2em;

apps/app/src/components/Common/PagePathNav/PagePathNav.tsx

@@ -29,9 +29,6 @@ type Props = {
 
 const CopyDropdown = dynamic(() => import('../CopyDropdown').then(mod => mod.CopyDropdown), { ssr: false });
 
-const RootSlash = (): JSX.Element => {
-  return <span className={styles['grw-mr-02em']}>/</span>;
-};
 const Separator = (): JSX.Element => {
   return <span className={styles['grw-mx-02em']}>/</span>;
 };
@@ -78,10 +75,7 @@ export const PagePathNav: FC<Props> = (props: Props) => {
       </div>
     );
     latterLink = (
-      <>
-        <RootSlash />
-        <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} isInTrash={isInTrash} />
-      </>
+      <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.former} isInTrash={isInTrash} />
     );
   }
 

apps/app/src/components/Icons/GrowiLogo.jsx

@@ -1,34 +1,40 @@
 import React, { memo } from 'react';
 
+import styles from './GrowiLogo.module.scss';
+
+const moduleClass = styles['grw-logo'];
+
 const GrowiLogo = memo(() => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 226.44 196.11"
-  >
-    <path
-      d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
-      className="group2"
+  <div className={`${moduleClass}`}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 226.44 196.11"
     >
-    </path>
-    <path
+      <path
+        d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
+        className="group2"
+      >
+      </path>
+      <path
       // eslint-disable-next-line max-len
-      d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
-      className="group1"
-    >
-    </path>
-  </svg>
+        d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
+        className="group1"
+      >
+      </path>
+      <path
+        d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
+        className="group1"
+      >
+      </path>
+      <path
+        d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
+        className="group1"
+      >
+      </path>
+    </svg>
+  </div>
 ));
 
 GrowiLogo.displayName = 'GrowiLogo';

apps/app/src/components/Icons/GrowiLogo.module.scss

@@ -0,0 +1,26 @@
+@use '@growi/core/scss/growi-official-colors';
+
+// == Colors
+.grw-logo :global {
+  // set transition for fill
+  svg, svg * {
+    transition: fill 0.8s ease-out;
+  }
+
+  fill: var(--grw-app-title-color, var(--bs-tertiary-color));
+}
+
+.grw-logo {
+  &:global {
+    &:hover {
+      .group1 {
+        fill: growi-official-colors.$growi-green;
+      }
+
+      .group2 {
+        fill: growi-official-colors.$growi-blue;
+      }
+    }
+  }
+}
+

apps/app/src/components/Layout/AdminLayout.tsx

@@ -1,8 +1,11 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
 import { AdminNavigation } from '../Admin/Common/AdminNavigation';
+import GrowiLogo from '../Icons/GrowiLogo';
 
 import { RawLayout } from './RawLayout';
 
@@ -29,7 +32,12 @@ const AdminLayout = ({
       <div className={`admin-page ${styles['admin-page']}`}>
 
         <header className="py-0 container-fluid">
-          <h1 className="p-3 fs-2">{componentTitle}</h1>
+          <h1 className="p-3 fs-2 d-flex align-items-center">
+            <Link href="/" className="d-block mb-1 me-2">
+              <GrowiLogo />
+            </Link>
+            {componentTitle}
+          </h1>
         </header>
         <div id="main" className="main">
           <div className="container-fluid">

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -201,9 +201,11 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
     try {
       mutateWaitingSaveProcessing(true);
+      const isRevisionIdRequiredForPageUpdate = currentPage?.revision?.origin === undefined;
 
       const { page } = await updatePage({
         pageId,
+        revisionId: isRevisionIdRequiredForPageUpdate ? currentRevisionId : undefined,
         body: codeMirrorEditor?.getDoc() ?? '',
         grant: grantData?.grant,
         origin: Origin.Editor,

apps/app/src/components/ReactMarkdownComponents/Header.module.scss

@@ -7,6 +7,7 @@
   .revision-head-edit-button {
     margin-left: 0.5em;
     font-size: 0.6em;
+    user-select: none;
     opacity: 0;
   }
 }

apps/app/src/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -85,27 +85,6 @@
 
 // == Colors
 .grw-app-title :global {
-  .grw-logo {
-    // set transition for fill
-    svg, svg * {
-      transition: fill 0.8s ease-out;
-    }
-
-    fill: var(--grw-app-title-color, var(--bs-tertiary-color));
-
-    &:hover {
-      svg {
-        .group1 {
-          fill: growi-official-colors.$growi-green;
-        }
-
-        .group2 {
-          fill: growi-official-colors.$growi-blue;
-        }
-      }
-    }
-  }
-
   .grw-site-name {
     --bs-link-color-rgb: var(--grw-app-title-color-rgb, var(--bs-tertiary-color-rgb));
     --bs-link-opacity: 0.5;

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropdownItem.tsx

@@ -11,6 +11,7 @@ type Props = {
   acceptedUploadFileType: AcceptedUploadFileType,
   children?: ReactNode,
   onUpload?: (files: File[]) => void,
+  onClose?: () => void,
 }
 
 export const AttachmentsDropdownItem = (props: Props): JSX.Element => {
@@ -19,6 +20,7 @@ export const AttachmentsDropdownItem = (props: Props): JSX.Element => {
     acceptedUploadFileType,
     children,
     onUpload,
+    onClose,
   } = props;
 
   const {
@@ -26,17 +28,24 @@ export const AttachmentsDropdownItem = (props: Props): JSX.Element => {
     getInputProps,
     open,
   } = useFileDropzone({
-    onUpload,
+    // close after uploading
+    // https://github.com/weseek/growi/pull/8564
+    onUpload: (files: File[]) => { onUpload?.(files); onClose?.() },
     acceptedUploadFileType,
     dropzoneOpts: {
-      noClick: true, noDrag: true, noKeyboard: true,
+      noClick: true,
+      noDrag: true,
+      noKeyboard: true,
+      // close after cancelling
+      // https://github.com/weseek/growi/pull/8564
+      onFileDialogCancel: onClose,
     },
   });
 
   return (
     <div {...getRootProps()} className="dropzone">
       <input {...getInputProps()} />
-      <DropdownItem className="d-flex gap-2 align-items-center" onClick={open}>
+      <DropdownItem toggle={false} className="d-flex gap-2 align-items-center" onClick={open}>
         {children}
       </DropdownItem>
     </div>

packages/editor/src/components/CodeMirrorEditor/Toolbar/AttachmentsDropup.tsx

@@ -43,14 +43,14 @@ export const AttachmentsDropup = (props: Props): JSX.Element => {
           <DropdownItem divider />
 
           { acceptedUploadFileType === AcceptedUploadFileType.ALL && (
-            <AttachmentsDropdownItem acceptedUploadFileType={AcceptedUploadFileType.ALL} onUpload={onUpload}>
+            <AttachmentsDropdownItem acceptedUploadFileType={AcceptedUploadFileType.ALL} onUpload={onUpload} onClose={() => setOpen(false)}>
               <span className="material-symbols-outlined fs-5">attach_file</span>
               Files
             </AttachmentsDropdownItem>
           ) }
 
           { acceptedUploadFileType !== AcceptedUploadFileType.NONE && (
-            <AttachmentsDropdownItem acceptedUploadFileType={AcceptedUploadFileType.IMAGE} onUpload={onUpload}>
+            <AttachmentsDropdownItem acceptedUploadFileType={AcceptedUploadFileType.IMAGE} onUpload={onUpload} onClose={() => setOpen(false)}>
               <span className="material-symbols-outlined fs-5">image</span>
               Images
             </AttachmentsDropdownItem>