Show filterContainer if "UIComponent.filterContainer" is enabled (#10381)

Signed-off-by: Mikhail Aheichyk <[email protected]>
Co-authored-by: Mikhail Aheichyk <[email protected]>

Author: maheichyk

res/css/structures/_LeftPanel.pcss

@@ -185,6 +185,10 @@ $roomListCollapsedWidth: 68px;
             }
         }
 
+        .mx_RoomListHeader:first-child {
+            margin-top: 12px;
+        }
+
         .mx_LeftPanel_roomListWrapper {
             /* Make the y-scrollbar more responsive */
             padding-right: 2px;

src/components/structures/LeftPanel.tsx

@@ -393,7 +393,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         return (
             <div className={containerClasses}>
                 <div className="mx_LeftPanel_roomListContainer">
-                    {this.renderSearchDialExplore()}
+                    {shouldShowComponent(UIComponent.FilterContainer) && this.renderSearchDialExplore()}
                     {this.renderBreadcrumbs()}
                     {!this.props.isMinimized && <RoomListHeader onVisibilityChange={this.refreshStickyHeaders} />}
                     <UserOnboardingButton

src/settings/UIFeature.ts

@@ -64,4 +64,9 @@ export enum UIComponent {
      * and integrations to the room, such as from the room information card.
      */
     AddIntegrations = "UIComponent.addIntegrations",
+
+    /**
+     * Component that lead to the user being able to search, dial, explore rooms
+     */
+    FilterContainer = "UIComponent.filterContainer",
 }

test/components/structures/LeftPanel-test.tsx

@@ -0,0 +1,54 @@
+/*
+Copyright 2023 Mikhail Aheichyk
+Copyright 2023 Nordeck IT + Consulting GmbH.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import { mocked } from "jest-mock";
+
+import LeftPanel from "../../../src/components/structures/LeftPanel";
+import PageType from "../../../src/PageTypes";
+import ResizeNotifier from "../../../src/utils/ResizeNotifier";
+import { shouldShowComponent } from "../../../src/customisations/helpers/UIComponents";
+import { UIComponent } from "../../../src/settings/UIFeature";
+
+jest.mock("../../../src/customisations/helpers/UIComponents", () => ({
+    shouldShowComponent: jest.fn(),
+}));
+
+describe("LeftPanel", () => {
+    function renderComponent(): RenderResult {
+        return render(
+            <LeftPanel isMinimized={false} pageType={PageType.RoomView} resizeNotifier={new ResizeNotifier()} />,
+        );
+    }
+
+    it("does not show filter container when disabled by UIComponent customisations", () => {
+        mocked(shouldShowComponent).mockReturnValue(false);
+        renderComponent();
+        expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.FilterContainer);
+        expect(screen.queryByRole("button", { name: /search/i })).not.toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Explore rooms" })).not.toBeInTheDocument();
+    });
+
+    it("renders filter container when enabled by UIComponent customisations", () => {
+        mocked(shouldShowComponent).mockReturnValue(true);
+        renderComponent();
+        expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.FilterContainer);
+        expect(screen.getByRole("button", { name: /search/i })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Explore rooms" })).toBeInTheDocument();
+    });
+});