Re: [PR] feat(Tabs): Rearange tabs when editing dashboard [superset]

[via GitHub]

korbit-ai[bot] commented on code in PR #35156:
URL: https://github.com/apache/superset/pull/35156#discussion_r2355765979


##########
superset-frontend/src/dashboard/components/gridComponents/TabsRenderer/TabsRenderer.tsx:
##########
@@ -66,8 +85,37 @@ export interface TabsRendererProps {
   handleClickTab: (index: number) => void;
   handleEdit: AntdTabsProps['onEdit'];
   tabBarPaddingLeft?: number;
+  onTabsReorder?: (oldIndex: number, newIndex: number) => void;
 }
 
+interface DraggableTabNodeProps extends React.HTMLAttributes<HTMLDivElement> {
+  'data-node-key': string;
+}
+
+const DraggableTabNode: React.FC<Readonly<DraggableTabNodeProps>> = ({
+  className,
+  ...props
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: props['data-node-key'],
+    });
+
+  const style: React.CSSProperties = {
+    ...props.style,
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: 'move',
+  };
+
+  return cloneElement(props.children as React.ReactElement, {
+    ref: setNodeRef,
+    style,
+    ...attributes,
+    ...listeners,
+  });
+};

Review Comment:
   ### Component File Separation <sub>![category 
Design](https://img.shields.io/badge/Design-0d9488)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   DraggableTabNode component is defined within the same file as TabsRenderer, 
but it's a separate concern that could be extracted into its own file.
   
   
   ###### Why this matters
   Keeping both components in the same file reduces code maintainability and 
reusability. The DraggableTabNode could potentially be reused in other parts of 
the application where drag-and-drop functionality is needed.
   
   ###### Suggested change ∙ *Feature Preview*
   Move DraggableTabNode to a new file:
   ```typescript
   // src/dashboard/components/DraggableTabNode.tsx
   export const DraggableTabNode: React.FC<Readonly<DraggableTabNodeProps>> = 
...
   
   // TabsRenderer.tsx
   import { DraggableTabNode } from '../DraggableTabNode';
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/28a9d59f-5704-4edf-960b-85ab2fa10c6e/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/28a9d59f-5704-4edf-960b-85ab2fa10c6e?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/28a9d59f-5704-4edf-960b-85ab2fa10c6e?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/28a9d59f-5704-4edf-960b-85ab2fa10c6e?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/28a9d59f-5704-4edf-960b-85ab2fa10c6e)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:e8d2e8d0-b6ad-4b6c-90a7-fdcdbcc15a9c -->
   
   
   [](e8d2e8d0-b6ad-4b6c-90a7-fdcdbcc15a9c)



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org