Skip to content

Commit

Permalink
Merge branch 'develop' into feature/codeSyntaxHighlighting-CMEM-4545
Browse files Browse the repository at this point in the history
  • Loading branch information
robertisele authored Sep 28, 2023
2 parents cb1a23f + 395e774 commit 89dfc4c
Show file tree
Hide file tree
Showing 25 changed files with 1,699 additions and 2,754 deletions.
3 changes: 2 additions & 1 deletion .stylelintrc.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"extends": ["stylelint-config-standard-scss", "stylelint-config-recess-order"],
"rules": {
"scss/at-extend-no-missing-placeholder": null
"scss/at-extend-no-missing-placeholder": null,
"selector-class-pattern": null
}
}
15 changes: 15 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,24 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- add read-only mode
- add `height` parameter to set a fixed height of the editor
- add `wrapLines` option to control auto-wrapping long lines (the default for wrap long lines is set to false now)
- `<TextField />`:
- Parameter `escapeToBlur`: If set to true the input field blurs/de-focuces when the `Escape` key is pressed.
- `<Modal />`:
- Parameter `modalFocusable: boolean`: When `true` the outer `div` element of the modal can be focused by clicking on it.
This is needed e.g. when key (down, up) events should trigger on the modal in order
to bubble up to its parent elements.
- `<HandleTools />`: can be used as single handle content to add an context menu to handles
- `<NodeContent />`
- `introductionTime` parameter could be used to visualize the node was added or updated
- `<ReactFlow />`:
- Support disabling the react-flow hot keys via a React context, e.g. `Delete` etc.

### Fixed

- `<Modal />`:
- Escape key to close does not work anymore after clicking on the backdrop for `canOutsideClickClose=false` and `canEscapeKeyClose=true`.
- `<PropertyName />`
- provide `labelProps` to configure the automatically injected `Label` element when `PropertyName` is only a string
- `<Spacing />`
- allow other `div` attributes, e.g. `style`

Expand Down
21 changes: 11 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -107,40 +107,40 @@
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^7.0.9",
"@storybook/react-webpack5": "^7.0.9",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^12.1.2",
"@types/carbon-components-react": "^7.55.2",
"@types/codemirror": "^5.60.5",
"@types/color": "^3.0.2",
"@types/jest": "^24.9.1",
"@types/jest": "^29.5.4",
"@types/lodash": "^4.14.194",
"@typescript-eslint/eslint-plugin": "^5.59.11",
"@typescript-eslint/parser": "^5.59.11",
"babel-jest": "^27.5.1",
"babel-jest": "^29.7.0",
"chromatic": "^6.17.4",
"eslint": "^8.42.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-simple-import-sort": "^10.0.0",
"husky": "4",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-pnp-resolver": "^1.2.1",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-pnp-resolver": "^1.2.3",
"lint-staged": "^13.2.2",
"node-sass-package-importer": "^5.3.2",
"prettier": "^2.8.8",
"react-app-polyfill": "^3.0.0",
"react-lorem-ipsum": "^1.4.9",
"regenerator-runtime": "^0.13.9",
"rimraf": "^5.0.0",
"rimraf": "^5.0.1",
"sass": "^1.62.1",
"sass-loader": "^13.2.2",
"storybook": "^7.0.9",
"stylelint": "^15.7.0",
"stylelint-config-recess-order": "^4.2.0",
"stylelint-config-standard-scss": "^9.0.0",
"ts-node": "^10.9.1",
"tsc-esm-fix": "^2.20.13",
"tsc-esm-fix": "^2.20.15",
"typescript": "4.4.4",
"url-loader": "^4.1.1",
"yargs": "^17.7.2"
Expand All @@ -153,7 +153,8 @@
},
"resolutions": {
"**/@types/react": "^17.0.59",
"**/postcss": "^8.4.23"
"**/postcss": "^8.4.23",
"**/parse5": "^6.0.1"
},
"husky": {
"hooks": {
Expand Down Expand Up @@ -194,7 +195,7 @@
"testMatch": [
"<rootDir>/src/**/*(*.)@(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"testEnvironment": "jest-environment-jsdom",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
},
Expand Down
2 changes: 1 addition & 1 deletion scripts/compile-sass.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import tildeImporter from "node-sass-package-importer";
import yargs from "yargs";
import sassRenderSyncConfig from "./sassConfig";

const args = yargs(process.argv.slice(2)).argv;
const args = yargs(process.argv.slice(2)).argv as any;

const styles = sass.renderSync({
importer: tildeImporter(),
Expand Down
10 changes: 10 additions & 0 deletions src/cmem/react-flow/ReactFlow/ReactFlow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import * as graphConfig from "./../configuration/graph";
import * as workflowConfig from "./../configuration/workflow";
import * as linkingConfig from "./../configuration/linking";
import {useReactFlowScrollOnDrag} from "../extensions/scrollOnDragHook";
import {ReactFlowHotkeyContext} from "../extensions/ReactFlowHotkeyContext";

export interface ReactFlowProps extends ReactFlowOriginalProps {
/**
Expand Down Expand Up @@ -42,11 +43,16 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
},
ref) => {

/** If the hot keys should be disabled. By default, they are always disabled. */
const {hotKeysDisabled} = React.useContext(ReactFlowHotkeyContext)

const scrollOnDragFunctions = useReactFlowScrollOnDrag({
reactFlowProps: originalProps,
scrollOnDrag
})

const {selectionKeyCode, multiSelectionKeyCode, deleteKeyCode, zoomActivationKeyCode} = originalProps

const configReactFlow = {
unspecified: unspecifiedConfig,
graph: graphConfig,
Expand All @@ -61,6 +67,10 @@ export const ReactFlow = React.forwardRef<HTMLDivElement, ReactFlowProps>((
edgeTypes={ configReactFlow[configuration].edgeTypes }
{...originalProps}
{...scrollOnDragFunctions}
selectionKeyCode={hotKeysDisabled ? null : selectionKeyCode as any}
deleteKeyCode={hotKeysDisabled ? null : deleteKeyCode as any}
multiSelectionKeyCode={hotKeysDisabled ? null : multiSelectionKeyCode as any}
zoomActivationKeyCode={hotKeysDisabled ? null : zoomActivationKeyCode as any}
>
{ children }
<ReactFlowMarkers />
Expand Down
22 changes: 10 additions & 12 deletions src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { Tag, TagList, SimpleDialog, Icon, Button, FieldItem } from "./../../../index";
import getColorConfiguration from "../../../common/utils/getColorConfiguration";
import { CodeEditor } from "../../../extensions";
import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";

export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";

Expand Down Expand Up @@ -38,24 +39,22 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
([key, value]) => [key, value as string]
);
const {disableHotKeys} = React.useContext(ReactFlowHotkeyContext)

React.useEffect(() => {
disableHotKeys(true)

return () => {
disableHotKeys(false)
}
}, [])

React.useEffect(() => {
if (!color && noteColors[0][1]) {
setSelectedColor(noteColors[0][1]);
}
}, [color, noteColors]);

const wrapperDivProps: { [key: string]: (event: any) => any } = {
// Prevent react-flow from getting these events
onContextMenu: (event) => event.stopPropagation(),
onDrag: (event) => event.stopPropagation(),
onDragStart: (event) => event.stopPropagation(),
onDragEnd: (event) => event.stopPropagation(),
onMouseDown: (event) => event.stopPropagation(),
onMouseUp: (event) => event.stopPropagation(),
onClick: (event) => event.stopPropagation(),
};

const predefinedColorsMenu = (
<TagList>
{noteColors &&
Expand Down Expand Up @@ -88,7 +87,6 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
hasBorder
isOpen
onClose={onClose}
wrapperDivProps={wrapperDivProps}
actions={[
<Button
key="submit"
Expand Down
14 changes: 14 additions & 0 deletions src/cmem/react-flow/extensions/ReactFlowHotkeyContext.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";

export interface ReactFlowHotkeyContextProps {
/** Allows to disable hot keys. */
disableHotKeys: (enable: boolean) => any

/** If the hot keys are currently disabled. */
hotKeysDisabled: boolean
}

export const ReactFlowHotkeyContext = React.createContext<ReactFlowHotkeyContextProps>({
disableHotKeys: () => {},
hotKeysDisabled: false
})
55 changes: 34 additions & 21 deletions src/components/AutoSuggestion/tests/AutoSuggestion.test.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,50 @@
import React from "react";
import "@testing-library/jest-dom";
import {render} from "@testing-library/react";
import AutoSuggestion, {AutoSuggestionProps} from "../AutoSuggestion"
import { render } from "@testing-library/react";
import AutoSuggestion, { AutoSuggestionProps } from "../AutoSuggestion";

describe("AutoSuggestion", () => {
let props: AutoSuggestionProps
let props: AutoSuggestionProps;

beforeAll(() => {
document.createRange = () => {
const range = new Range();
range.getBoundingClientRect = jest.fn();
range.getClientRects = () => {
return {
item: () => null,
length: 0,
[Symbol.iterator]: jest.fn(),
};
};
return range;
};
});

beforeEach(() => {
props = {
label: "test value path",
initialValue: "",
onChange: jest.fn((value) => {
}),
onChange: jest.fn((value) => {}),
fetchSuggestions: jest.fn((inputString, cursorPosition) => undefined),
checkInput: jest.fn(inputString => ({
valid: true
checkInput: jest.fn((inputString) => ({
valid: true,
})),
onInputChecked: jest.fn(validInput => {
}),
onInputChecked: jest.fn((validInput) => {}),
validationErrorText: "",
clearIconText: "",
onFocusChange: jest.fn(hasFocus => {
}),
id: "test-auto-suggestion"
}
})
onFocusChange: jest.fn((hasFocus) => {}),
id: "test-auto-suggestion",
};
});

it("should render properly", () => {
const {container} = render(<AutoSuggestion {...props} />)
expect(container).not.toBeEmptyDOMElement()
})
const { container } = render(<AutoSuggestion {...props} />);
expect(container).not.toBeEmptyDOMElement();
});

it("should set label prop properly", () => {
const {getByText} = render(<AutoSuggestion {...props}/>)
expect(getByText(props.label!!)).toBeTruthy()
})
})
const { getByText } = render(<AutoSuggestion {...props} />);
expect(getByText(props.label!!)).toBeTruthy();
});
});
29 changes: 20 additions & 9 deletions src/components/AutoSuggestion/tests/SingleLineCodeEditor.test.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,37 @@
import React from "react";
import "@testing-library/jest-dom";
import { render } from "@testing-library/react";
import {
SingleLineCodeEditor,
SingleLineCodeEditorProps,
} from "../../../../index";
import { SingleLineCodeEditor, SingleLineCodeEditorProps } from "../../../../index";
import CodeMirror from "codemirror";
import { CLASSPREFIX as eccgui } from "../../../configuration/constants";

describe("SingleLineCodeEditor", () => {
let props: SingleLineCodeEditorProps,
codeMirrorEditorInstance: CodeMirror.Editor = null as any;

beforeAll(() => {
document.createRange = () => {
const range = new Range();
range.getBoundingClientRect = jest.fn();
range.getClientRects = () => {
return {
item: () => null,
length: 0,
[Symbol.iterator]: jest.fn(),
};
};
return range;
};
});

beforeEach(() => {
props = {
setEditorInstance: jest.fn((editor) => {
codeMirrorEditorInstance = editor;
}),
onChange: jest.fn((value) => {}),
onCursorChange: jest.fn((pos, coords) => {}),
mode: null,
mode: undefined,
initialValue: "",
onFocusChange: jest.fn((focused) => {}),
onKeyDown: jest.fn((event) => {}),
Expand Down Expand Up @@ -49,14 +62,12 @@ describe("SingleLineCodeEditor", () => {

it("should not allow user to create new lines", () => {
render(<SingleLineCodeEditor {...props} />);
codeMirrorEditorInstance
.getDoc()
.setValue("I'm entering a new line \n character");
codeMirrorEditorInstance.getDoc().setValue("I'm entering a new line \n character");
expect(codeMirrorEditorInstance.lineCount()).toBe(1);
});

it("should convert multiple lines to a single line", () => {
render(<SingleLineCodeEditor {...{...props, initialValue: "1\n2\n3"}} />);
render(<SingleLineCodeEditor {...{ ...props, initialValue: "1\n2\n3" }} />);
expect(codeMirrorEditorInstance.lineCount()).toBe(1);
});
});
Loading

0 comments on commit 89dfc4c

Please sign in to comment.