diff --git a/packages/components/src/Inject/Inject.component.tsx b/packages/components/src/Inject/Inject.component.tsx index 67c2d484dd..76993975a9 100644 --- a/packages/components/src/Inject/Inject.component.tsx +++ b/packages/components/src/Inject/Inject.component.tsx @@ -50,7 +50,7 @@ function Inject({ getComponent, component, ...props }: InjectProps) { Inject.map = function injectMap( getComponent: GetComponentType, array: InjectConfig[], - CustomInject: (props: InjectProps) => JSX.Element | null = Inject, + CustomInject: FunctionComponent = Inject, ): JSX.Element[] { return array.map((props, index) => ( @@ -162,7 +162,7 @@ Inject.getReactElement = function getReactElement( } return ; } - return data; // We do not throw anything, proptypes should do the job + return null; // We do not throw anything, proptypes should do the job }; // @ts-ignore Inject.getReactElement.propTypes = PropTypes.oneOfType([ diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx index 6535b3636c..963a2f1aee 100644 --- a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -15,10 +15,12 @@ type BreadcrumbsLink = { label: string; href: string; target?: string; + as: never; }; type BreadcrumbsRouterLink = { label: string; + href: never; target?: string; as: ReactElement; }; @@ -38,12 +40,13 @@ function BreadcrumbLink({ link: BreadcrumbsLink | BreadcrumbsRouterLink; isLastLink: boolean; }) { - const destinationProps = 'href' in link ? { href: link.href } : { as: link.as }; + // const destinationProps = 'href' in link ? { href: link.href } : { as: link.as }; return (
  • { - const refinedProp = - 'href' in collapsedLinks - ? { href: collapsedLinks.href } - : { as: collapsedLinks.as }; + // const refinedProp = + // 'href' in collapsedLinks + // ? { href: collapsedLinks.href } + // : { as: collapsedLinks.as }; return { - label: collapsedLinks.label, - target: collapsedLinks.target, + // label: collapsedLinks.label, + // target: collapsedLinks.target, type: 'link', - ...refinedProp, + ...collapsedLinks, }; })} > diff --git a/packages/design-system/src/components/Combobox/Combobox.tsx b/packages/design-system/src/components/Combobox/Combobox.tsx index 9e5cc23e51..208ac1fd67 100644 --- a/packages/design-system/src/components/Combobox/Combobox.tsx +++ b/packages/design-system/src/components/Combobox/Combobox.tsx @@ -1,4 +1,4 @@ -import { useState, useCallback, useEffect, useRef, FocusEvent } from 'react'; +import { useState, useCallback, useEffect, useRef, FocusEvent, KeyboardEvent } from 'react'; import { useTranslation } from 'react-i18next'; import { useId } from '../../useId'; @@ -20,7 +20,7 @@ export const Combobox = ({ values, ...rest }: ComboboxProps) => { const id = useId(rest.id); const boxId = useId(); const noValue = t('COMBOBOX_NOT_RESULT', 'No results found'); - const onKeydown = useCallback(e => { + const onKeydown = useCallback((e: KeyboardEvent) => { if (e.key === 'Escape') { setShow(false); } diff --git a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx index cfc678424a..3bbab688a6 100644 --- a/packages/design-system/src/components/Form/Primitives/Field/Field.tsx +++ b/packages/design-system/src/components/Form/Primitives/Field/Field.tsx @@ -69,7 +69,7 @@ const Field = forwardRef( return ( {LabelComponent} - {cloneElement(children, { id: fieldID, hasError, name, required, ...rest }, ref)} + {cloneElement(children, { id: fieldID, hasError, name, required, ref, ...rest })} {link && } {description && } diff --git a/packages/flow-designer/src/components/configuration/NodeType.component.ts b/packages/flow-designer/src/components/configuration/NodeType.component.ts index b4437fc26c..8761bf173e 100644 --- a/packages/flow-designer/src/components/configuration/NodeType.component.ts +++ b/packages/flow-designer/src/components/configuration/NodeType.component.ts @@ -1,8 +1,13 @@ -import type { ReactNode } from 'react'; +import type { ComponentType } from 'react'; import invariant from 'invariant'; +export type NodeTypeProps = { + type: string; + component: ComponentType; +}; + // eslint-disable-next-line @typescript-eslint/no-unused-vars -function NodeType({ type, component }: { type: string; component: ReactNode }) { +function NodeType({ type, component }: NodeTypeProps) { invariant( false, ' elements are for DataFlow configuration only and should not be rendered', diff --git a/packages/flow-designer/src/components/configuration/NodeType.test.tsx b/packages/flow-designer/src/components/configuration/NodeType.test.tsx index cdd46f998b..4ed84728d1 100644 --- a/packages/flow-designer/src/components/configuration/NodeType.test.tsx +++ b/packages/flow-designer/src/components/configuration/NodeType.test.tsx @@ -1,12 +1,13 @@ import { render } from '@testing-library/react'; import NodeType from './NodeType.component'; -const mockComponent = () =>
    ; +const MockComponent = () =>
    ; +MockComponent.displayName = 'MockComponent'; describe('Testing ', () => { it('should log an error if rendered', () => { expect(() => { - render(); + render(); }).toThrowError( ' elements are for DataFlow configuration only and should not be rendered', ); diff --git a/packages/flow-designer/src/components/link/LinksRenderer.component.tsx b/packages/flow-designer/src/components/link/LinksRenderer.component.tsx index 066748b382..62c0199aea 100644 --- a/packages/flow-designer/src/components/link/LinksRenderer.component.tsx +++ b/packages/flow-designer/src/components/link/LinksRenderer.component.tsx @@ -1,37 +1,26 @@ -import { Component } from 'react'; -import invariant from 'invariant'; -import get from 'lodash/get'; -import { LinkRecordMap, PortRecordMap, LinkRecord } from '../../customTypings/index.d'; +import { Component, ComponentType } from 'react'; +import { LinkRecordMap, PortRecordMap } from '../../customTypings/index.d'; type Props = { links: LinkRecordMap; ports: PortRecordMap; - linkTypeMap: Object; + linkTypeMap: Record }>; }; class LinksRender extends Component { - constructor(props: Props) { - super(props); - this.renderLink = this.renderLink.bind(this); - } - - renderLink(link: LinkRecord) { - const ConcreteLink = get((this.props.linkTypeMap as any)[link.getLinkType()], 'component'); - const source = this.props.ports.get(link.sourceId); - const target = this.props.ports.get(link.targetId); - if (!ConcreteLink) { - invariant( - false, - ` the defined link type in your graph model - hasn't been mapped into the dataflow configuration, - check LinkType documentation`, - ); - } - return ; - } - render() { - return {this.props.links.valueSeq().map(this.renderLink)}; + const links = this.props.links.toArray(); + return ( + + {links.map(link => { + const ConcreteLink = this.props.linkTypeMap[link.getLinkType()].component; + const source = this.props.ports.get(link.sourceId); + const target = this.props.ports.get(link.targetId); + + return ; + })} + + ); } } diff --git a/packages/flow-designer/src/components/node/NodesRenderer.component.tsx b/packages/flow-designer/src/components/node/NodesRenderer.component.tsx index 37e2df8aaa..42677a5700 100644 --- a/packages/flow-designer/src/components/node/NodesRenderer.component.tsx +++ b/packages/flow-designer/src/components/node/NodesRenderer.component.tsx @@ -5,7 +5,7 @@ import { NodeRecordMap, NodeRecord, Id, Position } from '../../customTypings/ind type Props = { nodes: NodeRecordMap; - nodeTypeMap: Object; + nodeTypeMap: object; startMoveNodeTo: (nodeId: Id, nodePosition: string) => void; moveNodeTo: (nodeId: Id, nodePosition: Position) => void; moveNodeToEnd: (nodeId: Id, nodePosition: Position) => void; @@ -41,7 +41,7 @@ class NodesRenderer extends Component { } render() { - return {this.props.nodes.valueSeq().map(this.renderNode)}; + return {this.props.nodes.toArray().map(this.renderNode)}; } } diff --git a/packages/flow-designer/src/components/port/AbstractPort.component.tsx b/packages/flow-designer/src/components/port/AbstractPort.component.tsx index 7c3d06595a..63878ffbbb 100644 --- a/packages/flow-designer/src/components/port/AbstractPort.component.tsx +++ b/packages/flow-designer/src/components/port/AbstractPort.component.tsx @@ -1,5 +1,5 @@ import { Component } from 'react'; -import type { MouseEventHandler, ReactChildren } from 'react'; +import type { MouseEventHandler, ReactNode } from 'react'; import { select } from 'd3'; import { Port, Position } from '../../api'; @@ -8,7 +8,7 @@ import { PortRecord } from '../../customTypings/index.d'; type Props = { port?: PortRecord; onClick?: MouseEventHandler; - children?: ReactChildren; + children?: ReactNode | ReactNode[]; }; class AbstractPort extends Component { diff --git a/packages/flow-designer/src/components/port/PortsRenderer.component.tsx b/packages/flow-designer/src/components/port/PortsRenderer.component.tsx index 39ea0b4fa3..9861a8aafd 100644 --- a/packages/flow-designer/src/components/port/PortsRenderer.component.tsx +++ b/packages/flow-designer/src/components/port/PortsRenderer.component.tsx @@ -3,14 +3,14 @@ import get from 'lodash/get'; import { Port } from '../../api'; import { PortRecord, PortRecordMap } from '../../customTypings/index.d'; -function PortsRenderer({ ports, portTypeMap }: { ports: PortRecordMap; portTypeMap: Object }) { +function PortsRenderer({ ports, portTypeMap }: { ports: PortRecordMap; portTypeMap: object }) { const renderPort = (port: PortRecord) => { const type = Port.getComponentType(port); const ConcretePort = get((portTypeMap as any)[type], 'component'); return ; }; - return {ports.valueSeq().map(renderPort)}; + return {ports.toArray().map(renderPort)}; } export default PortsRenderer; diff --git a/packages/flow-designer/src/customTypings/index.d.ts b/packages/flow-designer/src/customTypings/index.d.ts index 0b5e10192d..43f1957527 100644 --- a/packages/flow-designer/src/customTypings/index.d.ts +++ b/packages/flow-designer/src/customTypings/index.d.ts @@ -32,7 +32,7 @@ export interface PortGraphicalAttributes { export interface PortData { flowType: string; - properties?: {}; + properties?: object; } export interface Port { @@ -48,15 +48,15 @@ export interface NodeGraphicalAttributes { nodeType: string; label: string; description: string; - properties?: {}; + properties?: object; } export interface NodeData { datasetId: Id; - properties?: {}; + properties?: object; label: string; description: string; - datasetInfo?: {}; + datasetInfo?: object; } export interface Node { @@ -69,11 +69,11 @@ export interface Node { export interface LinkGraphicalAttributes { linkType: string; - properties?: {}; + properties?: object; } export interface LinkData { - properties?: {}; + properties?: object; } export interface Link { @@ -118,14 +118,14 @@ export type LinkRecord = Record & { /** $STATE */ export type PortRecordMap = Map; -export type NodeRecordMap = Map; +export type NodeRecordMap = Map; export type LinkRecordMap = Map; -type getStateNodes = (selector: ['nodes', Id]) => NodeRecord; -type getStatePorts = (selector: ['ports', Id]) => PortRecord; -type getStateLinks = (selector: ['links', Id]) => LinkRecord; -type getStateIn = (selector: ['in', Id]) => Id; -type getStateOut = (selector: ['out', Id]) => Id; +type GetStateNodes = (selector: ['nodes', Id]) => NodeRecord; +type GetStatePorts = (selector: ['ports', Id]) => PortRecord; +type GetStateLinks = (selector: ['links', Id]) => LinkRecord; +type GetStateIn = (selector: ['in', Id]) => Id; +type GetStateOut = (selector: ['out', Id]) => Id; export type State = { in: Map>; @@ -133,7 +133,7 @@ export type State = { transform: Transform; transformToApply?: Transform; out: Map>; - nodes: Map>; + nodes: Map>; ports: Map>; children: Map>; nodeTypes: Map>; @@ -169,7 +169,7 @@ export type PortAction = | { type: 'FLOWDESIGNER_PORT_SET_DATA'; portId: Id; - data: Object; + data: object; } | { type: 'FLOWDESIGNER_PORT_REMOVE_DATA';