fix: dashboard edit new layout elements add changes fixed

superset-frontend/src/pages/DvtDashboardEdit/components/DvtDashboardEditLayoutNewElement.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 {
+  StyledDashboardLayoutNew,
+  StyledDashboardLayoutNewIcon,
+  StyledDashboardLayoutNewLabel,
+} from '../dvtDashboardEdit.module';
+
+interface DvtDashboardEditLayoutNewElementProps {
+  type: 'tabs' | 'row' | 'column' | 'header' | 'text' | 'divider';
+}
+
+const DvtDashboardEditLayoutNewElement = ({
+  type = 'divider',
+}: DvtDashboardEditLayoutNewElementProps) => {
+  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
+    e.dataTransfer.setData('drag-drop-row-id', JSON.stringify({}));
+  };
+
+  const iconClassSwitch = () => {
+    switch (type) {
+      case 'tabs':
+        return 'fa fa-window-restore';
+      case 'row':
+        return 'fa fa-long-arrow-right';
+      case 'column':
+        return 'fa fa-long-arrow-down';
+      case 'header':
+        return 'fa fa-header';
+      case 'text':
+        return 'fa fa-font';
+      case 'divider':
+        return 'divider';
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <StyledDashboardLayoutNew draggable onDragStart={handleDragStart}>
+      <StyledDashboardLayoutNewIcon className={iconClassSwitch()} />
+      <StyledDashboardLayoutNewLabel>{type}</StyledDashboardLayoutNewLabel>
+    </StyledDashboardLayoutNew>
+  );
+};
+
+export default DvtDashboardEditLayoutNewElement;

superset-frontend/src/pages/DvtDashboardEdit/dvtDashboardEdit.module.tsx

@@ -210,6 +210,54 @@ const StyledNewAddRow = styled.div<StyledNewAddRowProps>`
     hovered && `border-top: 5px solid ${theme.colors.dvt.primary.base};`}
 `;
 
+const StyledDashboardLayoutNew = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 16px;
+  cursor: move;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.dvt.primary.light3};
+  }
+`;
+
+const StyledDashboardLayoutNewIcon = styled.div`
+  width: 40px;
+  height: 40px;
+  background-color: ${({ theme }) => theme.colors.dvt.primary.light2};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-size: 28px;
+  color: ${({ theme }) => theme.colors.dvt.primary.base};
+  position: relative;
+
+  &.fa.fa-window-restore {
+    font-size: 18px;
+  }
+
+  &.divider {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+      height: 2px;
+      background-color: ${({ theme }) => theme.colors.dvt.primary.base};
+    }
+  }
+`;
+
+const StyledDashboardLayoutNewLabel = styled.div`
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.dvt.text.label};
+  text-transform: capitalize;
+`;
+
 export {
   StyledDashboardEdit,
   StyledDashboard,
@@ -228,4 +276,7 @@ export {
   StyledDashboardDroppedRowGrid,
   StyledDashboardDroppedRowOptions,
   StyledNewAddRow,
+  StyledDashboardLayoutNew,
+  StyledDashboardLayoutNewIcon,
+  StyledDashboardLayoutNewLabel,
 };

superset-frontend/src/pages/DvtDashboardEdit/index.tsx

@@ -37,12 +37,6 @@ import DvtButton from 'src/components/DvtButton';
 import DvtInput from 'src/components/DvtInput';
 import DvtSelect from 'src/components/DvtSelect';
 import DvtIconDataLabel from 'src/components/DvtIconDataLabel';
-// import NewTabs from 'src/dashboard/components/gridComponents/new/NewTabs';
-import NewRow from 'src/dashboard/components/gridComponents/new/NewRow';
-// import NewColumn from 'src/dashboard/components/gridComponents/new/NewColumn';
-import NewHeader from 'src/dashboard/components/gridComponents/new/NewHeader';
-import NewMarkdown from 'src/dashboard/components/gridComponents/new/NewMarkdown';
-import NewDivider from 'src/dashboard/components/gridComponents/new/NewDivider';
 import DvtCheckbox from 'src/components/DvtCheckbox';
 import {
   StyledTab,
@@ -59,6 +53,7 @@ import {
 } from './dvtDashboardEdit.module';
 import DvtDashboardEditChart from './components/DvtDashboardEditChart';
 import DvtDashboardEditRow from './components/DvtDashboardEditRow';
+import DvtDashboardEditLayoutNewElement from './components/DvtDashboardEditLayoutNewElement';
 
 function DvtDashboardList() {
   const dispatch = useDispatch();
@@ -739,12 +734,12 @@ function DvtDashboardList() {
           )}
           {activeTab === 'layoutElements' && (
             <>
-              {/* <NewTabs /> */}
-              <NewRow />
-              {/* <NewColumn /> */}
-              <NewHeader />
-              <NewMarkdown />
-              <NewDivider />
+              <DvtDashboardEditLayoutNewElement type="tabs" />
+              <DvtDashboardEditLayoutNewElement type="row" />
+              <DvtDashboardEditLayoutNewElement type="column" />
+              <DvtDashboardEditLayoutNewElement type="header" />
+              <DvtDashboardEditLayoutNewElement type="text" />
+              <DvtDashboardEditLayoutNewElement type="divider" />
             </>
           )}
         </StyledTab>