From 204a70f2a6bc65a9ec9dfc2b13de5c364dc39503 Mon Sep 17 00:00:00 2001
From: Artur Gaspar <artur@opencraft.com>
Date: Thu, 19 Oct 2023 14:07:29 -0300
Subject: [PATCH] fix: video editor spinners vertical alignment

The Editor component uses the pgn__modal-fullscreen class to be fullscreen,
but it is not structured like a Paragon FullscreenModal and the fullscreen
positioning style is not applied correctly, particularly in the case where
the content is smaller than the body - a vertically centred component will
be centred to the content size, not to the screen.

Here we directly apply the style that would have applied to the relevant
elements of a Paragon FullscreenModal.
---
 src/editors/Editor.jsx                        |  14 +-
 .../__snapshots__/Editor.test.jsx.snap        |  22 +-
 .../__snapshots__/index.test.jsx.snap         |  18 +-
 .../containers/EditorContainer/index.jsx      |   5 +-
 .../__snapshots__/index.test.jsx.snap         | 314 +++++++++---------
 .../containers/VideoUploadEditor/index.jsx    |  32 +-
 6 files changed, 221 insertions(+), 184 deletions(-)

diff --git a/src/editors/Editor.jsx b/src/editors/Editor.jsx
index d1b14cb38..9236e0474 100644
--- a/src/editors/Editor.jsx
+++ b/src/editors/Editor.jsx
@@ -31,9 +31,19 @@ export const Editor = ({
 
   const EditorComponent = supportedEditors[blockType];
   return (
-    <div className="d-flex flex-column">
+    <div
+      className="d-flex flex-column"
+      style={{
+        /* Positioned as a proper Paragon FullscreenModal should have been. */
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '100%',
+      }}
+    >
       <div
-        className="pgn__modal-fullscreen"
+        className="pgn__modal-fullscreen h-100"
         role="dialog"
         aria-label={blockType}
       >
diff --git a/src/editors/__snapshots__/Editor.test.jsx.snap b/src/editors/__snapshots__/Editor.test.jsx.snap
index 8c929ec63..8a314a651 100644
--- a/src/editors/__snapshots__/Editor.test.jsx.snap
+++ b/src/editors/__snapshots__/Editor.test.jsx.snap
@@ -3,10 +3,19 @@
 exports[`Editor render presents error message if no relevant editor found and ref ready 1`] = `
 <div
   className="d-flex flex-column"
+  style={
+    Object {
+      "height": "100%",
+      "left": 0,
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
 >
   <div
     aria-label="fAkEBlock"
-    className="pgn__modal-fullscreen"
+    className="pgn__modal-fullscreen h-100"
     role="dialog"
   >
     <FormattedMessage
@@ -21,10 +30,19 @@ exports[`Editor render presents error message if no relevant editor found and re
 exports[`Editor render snapshot: renders correct editor given blockType (html -> TextEditor) 1`] = `
 <div
   className="d-flex flex-column"
+  style={
+    Object {
+      "height": "100%",
+      "left": 0,
+      "position": "fixed",
+      "right": 0,
+      "top": 0,
+    }
+  }
 >
   <div
     aria-label="html"
-    className="pgn__modal-fullscreen"
+    className="pgn__modal-fullscreen h-100"
     role="dialog"
   >
     <TextEditor
diff --git a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
index 3241cf9a6..af7dec0b7 100644
--- a/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
@@ -2,7 +2,12 @@
 
 exports[`EditorContainer component render snapshot: initialized. enable save and pass to header 1`] = `
 <div
-  className="position-relative zindex-0"
+  className="d-flex flex-column position-relative zindex-0"
+  style={
+    Object {
+      "minHeight": "100%",
+    }
+  }
 >
   <BaseModal
     bodyStyle={null}
@@ -53,7 +58,7 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
     </div>
   </ModalDialog.Header>
   <ModalDialog.Body
-    className="pb-6"
+    className="pb-0 mb-6"
   >
     <h1>
       My test content
@@ -78,7 +83,12 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
 
 exports[`EditorContainer component render snapshot: not initialized. disable save and pass to header 1`] = `
 <div
-  className="position-relative zindex-0"
+  className="d-flex flex-column position-relative zindex-0"
+  style={
+    Object {
+      "minHeight": "100%",
+    }
+  }
 >
   <BaseModal
     bodyStyle={null}
@@ -129,7 +139,7 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav
     </div>
   </ModalDialog.Header>
   <ModalDialog.Body
-    className="pb-6"
+    className="pb-0 mb-6"
   />
   <injectIntl(ShimmedIntlComponent)
     disableSave={true}
diff --git a/src/editors/containers/EditorContainer/index.jsx b/src/editors/containers/EditorContainer/index.jsx
index f1a94a827..f4ac1a861 100644
--- a/src/editors/containers/EditorContainer/index.jsx
+++ b/src/editors/containers/EditorContainer/index.jsx
@@ -29,7 +29,8 @@ export const EditorContainer = ({
   const handleCancel = hooks.handleCancel({ onClose, returnFunction });
   return (
     <div
-      className="position-relative zindex-0"
+      className="d-flex flex-column position-relative zindex-0"
+      style={{ minHeight: '100%' }}
     >
       <BaseModal
         size="md"
@@ -64,7 +65,7 @@ export const EditorContainer = ({
           />
         </div>
       </ModalDialog.Header>
-      <ModalDialog.Body className="pb-6">
+      <ModalDialog.Body className="pb-0 mb-6">
         {isInitialized && children}
       </ModalDialog.Body>
       <EditorFooter
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
index a125e89bb..dcbdde965 100644
--- a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
@@ -4,165 +4,6 @@ exports[`VideoUploadEditor renders as expected with default behavior 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
-    <div>
-      <div>
-        <div
-          class="d-flex marked-area flex-column p-3"
-        >
-          <div
-            class="d-flex flex-column"
-          >
-            <div
-              class="d-flex justify-content-end flex-row"
-            >
-              <button
-                aria-label="Close"
-                class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
-                type="button"
-              >
-                <span
-                  class="btn-icon__icon-container"
-                >
-                  <span
-                    class="pgn__icon btn-icon__icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      focusable="false"
-                      height="24"
-                      role="img"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                </span>
-              </button>
-            </div>
-            <div
-              class="pgn__dropzone"
-              data-testid="dropzone-container"
-              role="presentation"
-              tabindex="0"
-            >
-              <input
-                accept="video/*,.mp4,.mov"
-                style="display: none;"
-                tabindex="-1"
-                type="file"
-              />
-              <div
-                class="d-flex flex-column justify-content-around align-items-center w-100"
-              >
-                <div
-                  class="d-flex flex-column"
-                >
-                  <div
-                    class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
-                  >
-                    <span
-                      class="pgn__icon text-muted"
-                      style="height: 2rem; width: 2rem;"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="none"
-                        focusable="false"
-                        height="24"
-                        role="img"
-                        viewBox="0 0 24 24"
-                        width="24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                  <div
-                    class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
-                  >
-                    <span>
-                      Drag and drop video here or click to upload
-                    </span>
-                    <span
-                      class="x-small align-self-center pt-2"
-                    >
-                      Upload MP4 or MOV files (5 GB max)
-                    </span>
-                  </div>
-                  <div
-                    class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
-                  >
-                    OR
-                  </div>
-                  <div
-                    class="zindex-9 video-id-prompt py-3"
-                  >
-                    <div
-                      class="input-group"
-                    >
-                      <div
-                        class="pgn__form-control-decorator-group m-0"
-                      >
-                        <input
-                          aria-describedby="basic-addon2"
-                          aria-label="Paste your video ID or URL"
-                          class="form-control"
-                          placeholder="Paste your video ID or URL"
-                          value=""
-                        />
-                      </div>
-                      <button
-                        aria-label="Submit"
-                        class="btn-icon btn-icon-primary btn-icon-inline position-absolute align-self-center text-muted bg-transparent shadow-none"
-                        style="margin-left: 20.25rem;"
-                        type="button"
-                      >
-                        <span
-                          class="btn-icon__icon-container"
-                        >
-                          <span
-                            class="pgn__icon btn-icon__icon"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              fill="none"
-                              focusable="false"
-                              height="24"
-                              role="img"
-                              viewBox="0 0 24 24"
-                              width="24"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
-                                fill="currentColor"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      ,
-    </div>
-  </body>,
-  "container": <div>
     <div>
       <div
         class="d-flex marked-area flex-column p-3"
@@ -316,6 +157,161 @@ Object {
           </div>
         </div>
       </div>
+      ,
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="d-flex marked-area flex-column p-3"
+    >
+      <div
+        class="d-flex flex-column"
+      >
+        <div
+          class="d-flex justify-content-end flex-row"
+        >
+          <button
+            aria-label="Close"
+            class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
+            type="button"
+          >
+            <span
+              class="btn-icon__icon-container"
+            >
+              <span
+                class="pgn__icon btn-icon__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="none"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+        <div
+          class="pgn__dropzone"
+          data-testid="dropzone-container"
+          role="presentation"
+          tabindex="0"
+        >
+          <input
+            accept="video/*,.mp4,.mov"
+            style="display: none;"
+            tabindex="-1"
+            type="file"
+          />
+          <div
+            class="d-flex flex-column justify-content-around align-items-center w-100"
+          >
+            <div
+              class="d-flex flex-column"
+            >
+              <div
+                class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
+              >
+                <span
+                  class="pgn__icon text-muted"
+                  style="height: 2rem; width: 2rem;"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div
+                class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
+              >
+                <span>
+                  Drag and drop video here or click to upload
+                </span>
+                <span
+                  class="x-small align-self-center pt-2"
+                >
+                  Upload MP4 or MOV files (5 GB max)
+                </span>
+              </div>
+              <div
+                class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
+              >
+                OR
+              </div>
+              <div
+                class="zindex-9 video-id-prompt py-3"
+              >
+                <div
+                  class="input-group"
+                >
+                  <div
+                    class="pgn__form-control-decorator-group m-0"
+                  >
+                    <input
+                      aria-describedby="basic-addon2"
+                      aria-label="Paste your video ID or URL"
+                      class="form-control"
+                      placeholder="Paste your video ID or URL"
+                      value=""
+                    />
+                  </div>
+                  <button
+                    aria-label="Submit"
+                    class="btn-icon btn-icon-primary btn-icon-inline position-absolute align-self-center text-muted bg-transparent shadow-none"
+                    style="margin-left: 20.25rem;"
+                    type="button"
+                  >
+                    <span
+                      class="btn-icon__icon-container"
+                    >
+                      <span
+                        class="pgn__icon btn-icon__icon"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          role="img"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     ,
   </div>,
diff --git a/src/editors/containers/VideoUploadEditor/index.jsx b/src/editors/containers/VideoUploadEditor/index.jsx
index 9dc31ab35..9c91260be 100644
--- a/src/editors/containers/VideoUploadEditor/index.jsx
+++ b/src/editors/containers/VideoUploadEditor/index.jsx
@@ -9,21 +9,23 @@ export const VideoUploadEditor = () => {
   const [loading, setLoading] = React.useState(false);
   const intl = useIntl();
 
-  return (
-    <div>
-      {(!loading) ? (
-        <div className="d-flex marked-area flex-column p-3">
-          <VideoUploader setLoading={setLoading} />
-        </div>
-      ) : (
-        <div className="text-center p-6">
-          <Spinner
-            animation="border"
-            className="m-3"
-            screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
-          />
-        </div>
-      )}
+  return (!loading) ? (
+    <div className="d-flex marked-area flex-column p-3">
+      <VideoUploader setLoading={setLoading} />
+    </div>
+  ) : (
+    <div style={{
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      transform: 'translate(-50%, -50%)',
+    }}
+    >
+      <Spinner
+        animation="border"
+        className="m-3"
+        screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
+      />
     </div>
   );
 };