feat(explore): UX improvements for drag'n'dropping time column (#15740)

superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx

@@ -32,22 +32,28 @@ const StyledInfoTooltipWithTrigger = styled(InfoTooltipWithTrigger)`
   margin: 0 ${({ theme }) => theme.gridUnit}px;
 `;
 
-export default function Option(props: OptionProps) {
+export default function Option({
+  children,
+  index,
+  clickClose,
+  withCaret,
+  isExtra,
+  canDelete = true,
+}: OptionProps) {
   const theme = useTheme();
   return (
-    <OptionControlContainer
-      data-test="option-label"
-      withCaret={props.withCaret}
-    >
-      <CloseContainer
-        role="button"
-        data-test="remove-control-button"
-        onClick={() => props.clickClose(props.index)}
-      >
-        <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
-      </CloseContainer>
-      <Label data-test="control-label">{props.children}</Label>
-      {props.isExtra && (
+    <OptionControlContainer data-test="option-label" withCaret={withCaret}>
+      {canDelete && (
+        <CloseContainer
+          role="button"
+          data-test="remove-control-button"
+          onClick={() => clickClose(index)}
+        >
+          <Icons.XSmall iconColor={theme.colors.grayscale.light1} />
+        </CloseContainer>
+      )}
+      <Label data-test="control-label">{children}</Label>
+      {isExtra && (
         <StyledInfoTooltipWithTrigger
           icon="exclamation-triangle"
           placement="top"
@@ -58,7 +64,7 @@ export default function Option(props: OptionProps) {
               `)}
         />
       )}
-      {props.withCaret && (
+      {withCaret && (
         <CaretContainer>
           <Icons.CaretRight iconColor={theme.colors.grayscale.light1} />
         </CaretContainer>