MINOR: fix the right panel visible after expanded is closed (#21338)

* fix the right panel visible after expanded is closed

* remove the unwanted loops and use leftPanel from above memo

(cherry picked from commit 82e8358cd9aae7e1b9fcfc66639fd4427b63523d)

openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/EntityRightCollapsablePanel.spec.ts

@@ -0,0 +1,85 @@
+/*
+ *  Copyright 2025 Collate.
+ *  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 test, { expect } from '@playwright/test';
+import { TableClass } from '../../support/entity/TableClass';
+import { createNewPage, redirectToHomePage } from '../../utils/common';
+
+// use the admin user to login
+test.use({ storageState: 'playwright/.auth/admin.json' });
+
+const table = new TableClass();
+
+test.beforeAll('Setup pre-requests', async ({ browser }) => {
+  const { apiContext, afterAction } = await createNewPage(browser);
+  await table.create(apiContext);
+  await afterAction();
+});
+
+test.afterAll('Cleanup', async ({ browser }) => {
+  const { apiContext, afterAction } = await createNewPage(browser);
+  await table.delete(apiContext);
+  await afterAction();
+});
+
+test.beforeEach(async ({ page }) => {
+  await redirectToHomePage(page);
+  await table.visitEntityPage(page);
+});
+
+test('Show and Hide Right Collapsable Panel', async ({ page }) => {
+  // Click on the tab expand button to hide the right collapsable panel
+  await page.click('[data-testid="tab-expand-button"]');
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.DataProducts"]')
+  ).not.toBeVisible();
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.Tags"]')
+  ).not.toBeVisible();
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.GlossaryTerms"]')
+  ).not.toBeVisible();
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.CustomProperties"]')
+  ).not.toBeVisible();
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.TableConstraints"]')
+  ).not.toBeVisible();
+
+  // Click on the tab expand button to show the right collapsable panel
+  await page.click('[data-testid="tab-expand-button"]');
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.DataProducts"]')
+  ).toBeVisible();
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.Tags"]')
+  ).toBeVisible();
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.GlossaryTerms"]')
+  ).toBeVisible();
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.CustomProperties"]')
+  ).toBeVisible();
+
+  await expect(
+    page.locator('[data-testid="KnowledgePanel.TableConstraints"]')
+  ).toBeVisible();
+});

openmetadata-ui/src/main/resources/ui/src/components/Customization/GenericProvider/GenericProvider.tsx

@@ -179,7 +179,12 @@ export const GenericProvider = <T extends Omit<EntityReference, 'type'>>({
         ? prev
         : expandedLayout.current || prev;
 
-      // Update the layout with new width
+      if (isTabExpanded) {
+        // When expanded, only return the left panel widget with updated width
+        return leftPanelWidget ? [{ ...leftPanelWidget, w: targetWidth }] : [];
+      }
+
+      // When not expanded, return all widgets with original width
       return sourceLayout.map((widget) => ({
         ...widget,
         w: widget.i.startsWith(DetailPageWidgetKeys.LEFT_PANEL)

openmetadata-ui/src/main/resources/ui/src/components/common/IconButtons/EditIconButton.tsx

@@ -117,6 +117,7 @@ export const AlignRightIconButton = ({
     <Tooltip title={title}>
       <Button
         className={classNames('border-none tab-expand-icon', className)}
+        data-testid="tab-expand-button"
         icon={<ExpandIcon />}
         size={size}
         type="text"