Changing File from JSX to TSX (#1946)

* Changing File from JSX to TSX

* Making tag prop optional in button component.

* Addressing review comments.

* Addressing review comments.

openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/CustomNode.component.tsx

@@ -12,18 +12,20 @@
  */
 
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
-import { Handle } from 'react-flow-renderer';
+import React, { CSSProperties, Fragment } from 'react';
+import { Handle, Position, HandleProps } from 'react-flow-renderer';
 
 const handleStyles = { borderRadius: '50%', position: 'absolute', top: 10 };
-const getHandle = (nodeType, isConnectable) => {
+const getHandle = (
+  nodeType: string,
+  isConnectable: HandleProps['isConnectable']
+) => {
   if (nodeType === 'output') {
     return (
       <Handle
         isConnectable={isConnectable}
-        position="left"
-        style={{ ...handleStyles, left: '-14px' }}
+        position={Position.Left}
+        style={{ ...handleStyles, left: '-14px' } as CSSProperties}
         type="target"
       />
     );
@@ -31,8 +33,8 @@ const getHandle = (nodeType, isConnectable) => {
     return (
       <Handle
         isConnectable={isConnectable}
-        position="right"
-        style={{ ...handleStyles, right: '-14px' }}
+        position={Position.Right}
+        style={{ ...handleStyles, right: '-14px' } as CSSProperties}
         type="source"
       />
     );
@@ -41,14 +43,14 @@ const getHandle = (nodeType, isConnectable) => {
       <Fragment>
         <Handle
           isConnectable={isConnectable}
-          position="left"
-          style={{ ...handleStyles, left: '-14px' }}
+          position={Position.Left}
+          style={{ ...handleStyles, left: '-14px' } as CSSProperties}
           type="target"
         />
         <Handle
           isConnectable={isConnectable}
-          position="right"
-          style={{ ...handleStyles, right: '-14px' }}
+          position={Position.Right}
+          style={{ ...handleStyles, right: '-14px' } as CSSProperties}
           type="source"
         />
       </Fragment>
@@ -56,7 +58,8 @@ const getHandle = (nodeType, isConnectable) => {
   }
 };
 
-const CustomNode = (props) => {
+/* eslint-disable-next-line */
+const CustomNode = (props: any) => {
   /* eslint-disable-next-line */
   const { data, type, isConnectable } = props;
   /* eslint-disable-next-line */
@@ -75,7 +78,7 @@ const CustomNode = (props) => {
         })}
         id="table-columns">
         <div className="tw-flex tw-flex-col tw-gap-y-1">
-          {columns?.map((c) => (
+          {columns?.map((c: { name: string }) => (
             <p
               className="tw-p-1 tw-rounded tw-border tw-text-grey-body"
               key={c.name}>
@@ -88,17 +91,4 @@ const CustomNode = (props) => {
   );
 };
 
-CustomNode.propTypes = {
-  type: PropTypes.string.isRequired,
-  isConnectable: PropTypes.bool.isRequired,
-  data: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    columns: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string.isRequired,
-      })
-    ),
-  }),
-};
-
 export default CustomNode;

openmetadata-ui/src/main/resources/ui/src/components/buttons/Button/Button.interface.ts

@@ -39,13 +39,13 @@ export interface ButtonAsButtonProps
 export interface ButtonAsAnchorProps
   extends Props,
     React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  tag: 'a';
+  tag?: 'a';
 }
 
 export interface ButtonAsOtherProps
   extends Props,
     React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  tag: string;
+  tag?: string;
 }
 
 export type ButtonProps =

openmetadata-ui/src/main/resources/ui/src/components/buttons/Button/Button.tsx

@@ -70,7 +70,7 @@ Button.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   disabled: PropTypes.bool,
-  tag: PropTypes.string.isRequired,
+  tag: PropTypes.string,
   size: PropTypes.oneOf(['large', 'regular', 'small', 'x-small', 'custom']),
   theme: PropTypes.oneOf(['default', 'primary']),
   type: PropTypes.oneOf(['button', 'submit', 'reset']),

openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/ToolBarOptions.tsx

@@ -11,14 +11,14 @@
  *  limitations under the License.
  */
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { EditorState, Modifier, SelectionState } from 'draft-js';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import PopOver from '../popover/PopOver';
 
-/*eslint-disable  */
-
-const getSelectedText = (editorState) => {
+const getSelectedText = (editorState: any) => {
   const selection = editorState.getSelection();
   const anchorKey = selection.getAnchorKey();
   const currentContent = editorState.getCurrentContent();
@@ -31,7 +31,7 @@ const getSelectedText = (editorState) => {
   return selectedText;
 };
 
-const updateEditorSelection = (eState, offsetDiff) => {
+const updateEditorSelection = (eState: any, offsetDiff: any) => {
   const selection = eState.getSelection();
   const newFocusOffset = selection.focusOffset + offsetDiff;
 
@@ -53,7 +53,7 @@ export class Bold extends Component {
   };
 
   makeBold = () => {
-    const { editorState, onChange } = this.props;
+    const { editorState, onChange } = this.props as any;
     const selectedText = getSelectedText(editorState);
 
     const contentState = Modifier.replaceText(
@@ -102,7 +102,7 @@ export class Link extends Component {
   };
 
   makeLink = () => {
-    const { editorState, onChange } = this.props;
+    const { editorState, onChange } = this.props as any;
 
     const selectedText = getSelectedText(editorState);
 
@@ -150,7 +150,7 @@ export class Italic extends Component {
   };
 
   makeItalic = () => {
-    const { editorState, onChange } = this.props;
+    const { editorState, onChange } = this.props as any;
     const selectedText = getSelectedText(editorState);
 
     const contentState = Modifier.replaceText(
@@ -197,7 +197,7 @@ export class Heading extends Component {
   };
 
   makeHeading = () => {
-    const { editorState, onChange } = this.props;
+    const { editorState, onChange } = this.props as any;
     const selectedText = getSelectedText(editorState);
 
     const contentState = Modifier.replaceText(
@@ -240,13 +240,9 @@ export class ULLIST extends Component {
   };
 
   makeLIST = () => {
-    const { editorState, onChange } = this.props;
+    const { editorState, onChange } = this.props as any;
     const selectedText = getSelectedText(editorState);
     const selection = editorState.getSelection();
-    const currentKey = selection.getStartKey();
-    const currentBlock = editorState
-      .getCurrentContent()
-      .getBlockForKey(currentKey);
     const text = selectedText.startsWith('- ')
       ? selectedText.replaceAll('- ', '')
       : `${
@@ -284,8 +280,7 @@ export class OLLIST extends Component {
   };
 
   makeLIST = () => {
-    const { editorState, onChange } = this.props;
-    const selectedText = getSelectedText(editorState);
+    const { editorState, onChange } = this.props as any;
     const selection = editorState.getSelection();
     const currentKey = selection.getStartKey();
     const currentBlock = editorState
@@ -298,7 +293,6 @@ export class OLLIST extends Component {
     for (const txt of textArr) {
       len += txt.length;
       if (len >= selection.focusOffset) {
-        const index = textArr.indexOf(txt);
         break;
       }
       len++;
@@ -368,7 +362,7 @@ export class Info extends Component {
           position="left"
           size="small"
           trigger="mouseenter">
-          <i className="fas fa-info-circle"></i>
+          <i className="fas fa-info-circle" />
         </PopOver>
       </div>
     );

openmetadata-ui/src/main/resources/ui/src/components/common/toggle-switch/ToggleSwitch.test.tsx

@@ -19,7 +19,7 @@ describe('Test Toggle Switch Component', () => {
   it('Renders the Toggle Switch with the label sent to it', async () => {
     const handleToggle = jest.fn();
     const { findByText } = render(
-      <ToggleSwitch label="Test Label" onToggle={handleToggle} />
+      <ToggleSwitch isEnabled label="Test Label" onToggle={handleToggle} />
     );
     const labelElement = await findByText('Test Label');
 
@@ -29,9 +29,11 @@ describe('Test Toggle Switch Component', () => {
   it('Changes the checked state on click on the toggle switch', async () => {
     const handleToggle = jest.fn();
     const { findByTestId } = render(
-      <ToggleSwitch label="Test Label" onToggle={handleToggle} />
+      <ToggleSwitch isEnabled label="Test Label" onToggle={handleToggle} />
     );
-    const toggleSwitchElement = await findByTestId('toggle-checkbox');
+    const toggleSwitchElement = (await findByTestId(
+      'toggle-checkbox'
+    )) as HTMLInputElement;
 
     expect(toggleSwitchElement.checked).toBe(false);
 
@@ -45,7 +47,9 @@ describe('Test Toggle Switch Component', () => {
     const { findByTestId } = render(
       <ToggleSwitch isEnabled label="Test Label" onToggle={handleToggle} />
     );
-    const toggleSwitchElement = await findByTestId('toggle-checkbox');
+    const toggleSwitchElement = (await findByTestId(
+      'toggle-checkbox'
+    )) as HTMLInputElement;
 
     expect(toggleSwitchElement.checked).toBe(true);
   });

openmetadata-ui/src/main/resources/ui/src/contexts/ToastContext.tsx

@@ -11,16 +11,22 @@
  *  limitations under the License.
  */
 
-import propTypes from 'prop-types';
-import React, { createContext, useCallback, useState } from 'react';
+import React, { createContext, ReactNode, useCallback, useState } from 'react';
 import Toaster from '../components/common/toaster/Toaster';
 
-const ToastContext = createContext();
+interface Toast {
+  variant: string;
+  body: string;
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ToastContext = createContext((_value: Toast) => {
+  return;
+});
 
 export default ToastContext;
 
-export const ToastContextProvider = ({ children }) => {
-  const [toasts, setToasts] = useState([]);
+export const ToastContextProvider = ({ children }: { children: ReactNode }) => {
+  const [toasts, setToasts] = useState<Array<Toast>>([]);
 
   const addToast = useCallback(
     function (toast) {
@@ -38,7 +44,3 @@ export const ToastContextProvider = ({ children }) => {
     </ToastContext.Provider>
   );
 };
-
-ToastContextProvider.propTypes = {
-  children: propTypes.object,
-};