Conform to the naming policy - AppsContainer resizer (#11042)

* Add a snapshot to track AppTile in AppsDrawer

* Conform to the naming policy - AppsContainer resizer

* Nest 'mx_AppsContainer_resizer_container_handle' to enforce the style

- mx_AppsContainer_resizer
- mx_AppsContainer_resizer_container
- mx_AppsContainer_resizer_container_handle

* Rename "mx_AppsContainer_resizer" to "mx_AppsDrawer_resizer"

PersistentVResizer is defined by mx_AppsDrawer (see const "classes")

cypress/e2e/widgets/layout.spec.ts

@@ -102,7 +102,7 @@ describe("Widget Layout", () => {
     it("manually resize the height of the top container layout", () => {
         cy.get('iframe[title="widget"]').invoke("height").should("be.lessThan", 250);
 
-        cy.get(".mx_AppsContainer_resizerHandle")
+        cy.get(".mx_AppsDrawer_resizer_container_handle")
             .trigger("mousedown")
             .trigger("mousemove", { clientX: 0, clientY: 550, force: true })
             .trigger("mouseup", { clientX: 0, clientY: 550, force: true });

res/css/views/rooms/_AppsDrawer.pcss

@@ -32,43 +32,47 @@ limitations under the License.
     overflow: hidden;
     flex-grow: 1;
 
-    .mx_AppsContainer_resizerHandleContainer {
+    .mx_AppsDrawer_resizer {
+        margin-bottom: var(--container-gap-width);
+    }
+
+    .mx_AppsDrawer_resizer_container {
         width: 100%;
         height: 10px;
         display: block;
         position: relative;
-    }
 
-    .mx_AppsContainer_resizerHandle {
+        .mx_AppsDrawer_resizer_container_handle {
-        cursor: ns-resize;
+            cursor: ns-resize;
 
-        /* Override styles from library, making the whole area the target area */
+            /* Override styles from library, making the whole area the target area */
-        width: 100% !important;
+            width: 100% !important;
-        height: 100% !important;
+            height: 100% !important;
 
-        /* This is positioned directly below frame */
+            /* This is positioned directly below frame */
-        position: absolute;
-        bottom: 50% !important; /* override from library */
-
-        /* We then render the pill handle in an ::after to keep it in the handle's */
-        /* area without being a massive line across the screen */
-        &::after {
-            content: "";
             position: absolute;
-            border-radius: 3px;
+            bottom: 50% !important; /* override from library */
 
-            height: 4px;
+            /* We then render the pill handle in an ::after to keep it in the handle's */
-            bottom: 0;
+            /* area without being a massive line across the screen */
+            &::after {
+                content: "";
+                position: absolute;
+                border-radius: 3px;
 
-            /* Together, these make the bar 64px wide */
+                height: 4px;
-            /* These are also overridden from the library */
+                bottom: 0;
-            left: calc(50% - 32px);
+
-            right: calc(50% - 32px);
+                /* Together, these make the bar 64px wide */
+                /* These are also overridden from the library */
+                left: calc(50% - 32px);
+                right: calc(50% - 32px);
+            }
         }
     }
 
     &:hover {
-        .mx_AppsContainer_resizerHandle::after {
+        .mx_AppsDrawer_resizer_container_handle::after {
             opacity: 0.8;
             background: $primary-content;
         }
@@ -123,10 +127,6 @@ limitations under the License.
     }
 }
 
-.mx_AppsContainer_resizer {
-    margin-bottom: var(--container-gap-width);
-}
-
 .mx_AppsContainer {
     display: flex;
     flex-direction: row;

src/components/views/rooms/AppsDrawer.tsx

@@ -283,9 +283,9 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
                     room={this.props.room}
                     minHeight={100}
                     maxHeight={this.props.maxHeight - 50}
-                    handleClass="mx_AppsContainer_resizerHandle"
+                    className="mx_AppsDrawer_resizer"
-                    handleWrapperClass="mx_AppsContainer_resizerHandleContainer"
+                    handleWrapperClass="mx_AppsDrawer_resizer_container"
-                    className="mx_AppsContainer_resizer"
+                    handleClass="mx_AppsDrawer_resizer_container_handle"
                     resizeNotifier={this.props.resizeNotifier}
                 >
                     {appContainers}
@@ -358,9 +358,9 @@ const PersistentVResizer: React.FC<IPersistentResizerProps> = ({
 
                 resizeNotifier.stopResizing();
             }}
+            className={className}
             handleWrapperClass={handleWrapperClass}
             handleClasses={{ bottom: handleClass }}
-            className={className}
             enable={{ bottom: true }}
         >
             {children}

test/components/views/elements/AppTile-test.tsx

@@ -327,6 +327,9 @@ describe("AppTile", () => {
         expect(renderResult.getByText("Example 1")).toBeInTheDocument();
         expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
 
+        const { asFragment } = renderResult;
+        expect(asFragment()).toMatchSnapshot(); // Take snapshot of AppsDrawer with AppTile
+
         // We want to verify that as we move the widget to the center container,
         // the widget frame remains running.
 

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -162,3 +162,119 @@ exports[`AppTile for a pinned widget should render 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`AppTile preserves non-persisted widget on container move 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_AppsDrawer"
+  >
+    <div
+      class="mx_AppsDrawer_resizer"
+      style="position: relative; user-select: auto; width: auto; height: 280px; max-height: 576px; min-height: 100px; box-sizing: border-box; flex-shrink: 0;"
+    >
+      <div
+        class="mx_AppsContainer"
+      >
+        <div
+          class="mx_AppTileFullWidth"
+          id="1"
+        >
+          <div
+            class="mx_AppTileMenuBar"
+          >
+            <span
+              class="mx_AppTileMenuBar_title"
+              style="pointer-events: none;"
+            >
+              <span>
+                <img
+                  alt=""
+                  class="mx_BaseAvatar mx_BaseAvatar_image mx_WidgetAvatar"
+                  data-testid="avatar-img"
+                  loading="lazy"
+                  src="image-file-stub"
+                  style="width: 20px; height: 20px;"
+                />
+                <b>
+                  Example 1
+                </b>
+                <span />
+              </span>
+            </span>
+            <span
+              class="mx_AppTileMenuBar_widgets"
+            >
+              <div
+                class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+                role="button"
+                tabindex="0"
+                title="Maximise"
+              >
+                <div
+                  class="mx_Icon mx_Icon_12"
+                />
+              </div>
+              <div
+                class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+                role="button"
+                tabindex="0"
+                title="Minimise"
+              >
+                <div
+                  class="mx_Icon mx_Icon_12"
+                />
+              </div>
+              <div
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Options"
+                class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+                role="button"
+                tabindex="0"
+                title="Options"
+              >
+                <div
+                  class="mx_Icon mx_Icon_12"
+                />
+              </div>
+            </span>
+          </div>
+          <div
+            class="mx_AppTileBody mx_AppTile_loading"
+          >
+            <div
+              class="mx_AppTileBody_fadeInSpinner"
+            >
+              <div
+                class="mx_Spinner"
+              >
+                <div
+                  class="mx_Spinner_Msg"
+                >
+                  Loading…
+                </div>
+                 
+                <div
+                  aria-label="Loading…"
+                  class="mx_Spinner_icon"
+                  data-testid="spinner"
+                  role="progressbar"
+                  style="width: 32px; height: 32px;"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_AppsDrawer_resizer_container"
+      >
+        <div
+          class="mx_AppsDrawer_resizer_container_handle"
+          style="position: absolute; user-select: none; width: 100%; height: 10px; left: 0px; cursor: row-resize; bottom: -5px;"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;