This is an automated email from the ASF dual-hosted git repository.
rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 3580dc6cad chore(ts): Migrate Divider.jsx to Divider.tsx [SIP-36]
(#36335)
3580dc6cad is described below
commit 3580dc6cad743f7d639b9f37c648bcd2a5e7e9fd
Author: Amy Li <[email protected]>
AuthorDate: Fri Jan 23 17:30:03 2026 -0500
chore(ts): Migrate Divider.jsx to Divider.tsx [SIP-36] (#36335)
Co-authored-by: Mona Lisa <[email protected]>
---
.../Divider/{Divider.test.jsx => Divider.test.tsx} | 17 ++++------
.../Divider/{Divider.jsx => Divider.tsx} | 37 +++++++++++-----------
2 files changed, 25 insertions(+), 29 deletions(-)
diff --git
a/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.test.jsx
b/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.test.tsx
similarity index 83%
rename from
superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.test.jsx
rename to
superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.test.tsx
index e6ff744c9a..7657d8ea9b 100644
---
a/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.test.jsx
+++
b/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.test.tsx
@@ -24,11 +24,11 @@ import {
DASHBOARD_GRID_TYPE,
} from 'src/dashboard/util/componentTypes';
import { screen, render, userEvent } from 'spec/helpers/testing-library';
-import Divider from './Divider';
+import Divider, { DividerProps } from './Divider';
-// eslint-disable-next-line no-restricted-globals -- TODO: Migrate from
describe blocks
+// eslint-disable-next-line no-restricted-globals -- TODO: migrate from
describe blocks
describe('Divider', () => {
- const props = {
+ const baseProps: DividerProps = {
id: 'id',
parentId: 'parentId',
component: newComponentFactory(DIVIDER_TYPE),
@@ -36,14 +36,12 @@ describe('Divider', () => {
parentComponent: newComponentFactory(DASHBOARD_GRID_TYPE),
index: 0,
editMode: false,
- handleComponentDrop() {},
- deleteComponent() {},
+ handleComponentDrop: jest.fn(),
+ deleteComponent: (id: string, parentId: string) => {},
};
- const setup = overrideProps =>
- // We have to wrap provide DragDropContext for the underlying DragDroppable
- // otherwise we cannot assert on DragDroppable children
- render(<Divider {...props} {...overrideProps} />, {
+ const setup = (overrideProps: Partial<DividerProps> = {}) =>
+ render(<Divider {...baseProps} {...overrideProps} />, {
useDnd: true,
});
@@ -64,7 +62,6 @@ describe('Divider', () => {
expect(screen.queryByTestId('hover-menu')).not.toBeInTheDocument();
expect(screen.queryByRole('button')).not.toBeInTheDocument();
- // we cannot set props on the Divider because of the WithDragDropContext
wrapper
setup({ editMode: true });
expect(screen.getByTestId('hover-menu')).toBeInTheDocument();
expect(screen.getByRole('button').firstChild).toHaveAttribute(
diff --git
a/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.jsx
b/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx
similarity index 77%
rename from
superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.jsx
rename to
superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx
index 7ee829f676..a241f3dd62 100644
---
a/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.jsx
+++
b/superset-frontend/src/dashboard/components/gridComponents/Divider/Divider.tsx
@@ -16,31 +16,32 @@
* specific language governing permissions and limitations
* under the License.
*/
+
import { PureComponent } from 'react';
-import PropTypes from 'prop-types';
import { css, styled } from '@apache-superset/core/ui';
import { Draggable } from '../../dnd/DragDroppable';
import HoverMenu from '../../menu/HoverMenu';
import DeleteComponentButton from '../../DeleteComponentButton';
-import { componentShape } from '../../../util/propShapes';
+import type { ConnectDragSource } from 'react-dnd';
+import type { LayoutItem } from 'src/dashboard/types';
-const propTypes = {
- id: PropTypes.string.isRequired,
- parentId: PropTypes.string.isRequired,
- component: componentShape.isRequired,
- depth: PropTypes.number.isRequired,
- parentComponent: componentShape.isRequired,
- index: PropTypes.number.isRequired,
- editMode: PropTypes.bool.isRequired,
- handleComponentDrop: PropTypes.func.isRequired,
- deleteComponent: PropTypes.func.isRequired,
-};
+export interface DividerProps {
+ id: string;
+ parentId: string;
+ component: LayoutItem;
+ depth: number;
+ parentComponent: LayoutItem;
+ index: number;
+ editMode: boolean;
+ handleComponentDrop: (dropResult: unknown) => void;
+ deleteComponent: (id: string, parentId: string) => void;
+}
const DividerLine = styled.div`
${({ theme }) => css`
width: 100%;
- padding: ${theme.sizeUnit * 2}px 0; /* this is padding not margin to
enable a larger mouse target */
+ padding: ${theme.sizeUnit * 2}px 0;
background-color: transparent;
&:after {
@@ -62,8 +63,8 @@ const DividerLine = styled.div`
`}
`;
-class Divider extends PureComponent {
- constructor(props) {
+class Divider extends PureComponent<DividerProps> {
+ constructor(props: DividerProps) {
super(props);
this.handleDeleteComponent = this.handleDeleteComponent.bind(this);
}
@@ -93,7 +94,7 @@ class Divider extends PureComponent {
onDrop={handleComponentDrop}
editMode={editMode}
>
- {({ dragSourceRef }) => (
+ {({ dragSourceRef }: { dragSourceRef: ConnectDragSource }) => (
<div ref={dragSourceRef}>
{editMode && (
<HoverMenu position="left">
@@ -108,6 +109,4 @@ class Divider extends PureComponent {
}
}
-Divider.propTypes = propTypes;
-
export default Divider;
