#17021: fix the widget placement when adding new (#17151)

* fix the widget placement when adding new

* change the placement logic and fix the added widget check in add model if removed

* minor fix

openmetadata-ui/src/main/resources/ui/src/components/MyData/CustomizableComponents/AddWidgetModal/AddWidgetModal.test.tsx

@@ -113,6 +113,24 @@ describe('AddWidgetModal component', () => {
     expect(screen.queryByTestId('TotalAssets-check-icon')).toBeNull();
   });
 
+  it('AddWidgetModal should not display check icons in the tab labels only if widget includes EmptyWidgetPlaceholder with it', async () => {
+    await act(async () => {
+      render(
+        <AddWidgetModal
+          {...mockProps}
+          addedWidgetsList={[
+            'KnowledgePanel.ActivityFeed',
+            'KnowledgePanel.Following-EmptyWidgetPlaceholder',
+          ]}
+        />
+      );
+    });
+
+    expect(screen.getByTestId('ActivityFeed-check-icon')).toBeInTheDocument();
+    expect(screen.queryByTestId('Following-check-icon')).toBeNull();
+    expect(screen.queryByTestId('KPI-check-icon')).toBeNull();
+  });
+
   it('AddWidgetModal should call handleAddWidget when clicked on add widget button', async () => {
     await act(async () => {
       render(<AddWidgetModal {...mockProps} />);

openmetadata-ui/src/main/resources/ui/src/components/MyData/CustomizableComponents/AddWidgetModal/AddWidgetModal.tsx

@@ -83,8 +83,10 @@ function AddWidgetModal({
           label: (
             <Space data-testid={`${widget.name}-widget-tab-label`}>
               <span>{widget.name}</span>
-              {addedWidgetsList.some((w) =>
-                w.startsWith(widget.fullyQualifiedName)
+              {addedWidgetsList.some(
+                (w) =>
+                  w.startsWith(widget.fullyQualifiedName) &&
+                  !w.includes('EmptyWidgetPlaceholder')
               ) && (
                 <CheckOutlined
                   className="m-l-xs"

openmetadata-ui/src/main/resources/ui/src/mocks/CustomizablePage.mock.ts

@@ -153,3 +153,60 @@ export const mockCustomizePageClassBase = {
 
 export const mockShowErrorToast = jest.fn();
 export const mockShowSuccessToast = jest.fn();
+
+export const mockCurrentAddWidget = [
+  {
+    h: 6,
+    i: 'KnowledgePanel.ActivityFeed',
+    w: 3,
+    x: 0,
+    y: 0,
+    static: false,
+  },
+  {
+    h: 3,
+    i: 'KnowledgePanel.RecentlyViewed',
+    w: 1,
+    x: 3,
+    y: 3,
+    static: false,
+  },
+  {
+    h: 2,
+    i: 'ExtraWidget.EmptyWidgetPlaceholder',
+    w: 4,
+    x: 0,
+    y: 6,
+    isDraggable: false,
+    static: false,
+  },
+];
+
+export const mockAddWidgetReturnValues = [
+  {
+    h: 6,
+    i: 'KnowledgePanel.ActivityFeed',
+    static: false,
+    w: 3,
+    x: 0,
+    y: 0,
+  },
+  {
+    h: 3,
+    i: 'KnowledgePanel.RecentlyViewed',
+    static: false,
+    w: 1,
+    x: 3,
+    y: 3,
+  },
+  {
+    h: 2,
+    i: 'ExtraWidget.EmptyWidgetPlaceholder',
+    isDraggable: false,
+    static: false,
+    w: 4,
+    x: 0,
+    y: 100,
+  },
+  { h: 3, i: 'KnowledgePanel.Following-1', static: false, w: 1, x: 0, y: 6 },
+];

openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.test.tsx

@@ -0,0 +1,31 @@
+/*
+ *  Copyright 2024 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 { mockWidget } from '../mocks/AddWidgetTabContent.mock';
+import {
+  mockAddWidgetReturnValues,
+  mockCurrentAddWidget,
+} from '../mocks/CustomizablePage.mock';
+import { getAddWidgetHandler } from './CustomizableLandingPageUtils';
+
+describe('getAddWidgetHandler function', () => {
+  it('should add new widget at EmptyWidgetPlaceholder place to be in the bottom', () => {
+    const result = getAddWidgetHandler(
+      mockWidget,
+      'ExtraWidget.EmptyWidgetPlaceholder',
+      1,
+      3
+    )(mockCurrentAddWidget);
+
+    expect(result).toEqual(mockAddWidgetReturnValues);
+  });
+});

openmetadata-ui/src/main/resources/ui/src/utils/CustomizableLandingPageUtils.tsx

@@ -55,13 +55,17 @@ export const getAddWidgetHandler =
     if (
       placeholderWidgetKey === LandingPageWidgetKeys.EMPTY_WIDGET_PLACEHOLDER
     ) {
+      const emptyWidgetPlaceholder = currentLayout.find(
+        (item) => item.i === LandingPageWidgetKeys.EMPTY_WIDGET_PLACEHOLDER
+      ) ?? { x: 0, y: 99 };
+
       return [
         ...moveEmptyWidgetToTheEnd(currentLayout),
         {
           w: widgetWidth,
           h: widgetHeight,
-          x: 0,
-          y: 0,
+          x: emptyWidgetPlaceholder.x,
+          y: emptyWidgetPlaceholder.y,
           i: widgetFQN,
           static: false,
         },