From 3a16b0cc58ca91f5f49e5c1d42a75af656607a9d Mon Sep 17 00:00:00 2001 From: Max Thonagel <12283268+thoniTUB@users.noreply.github.com> Date: Thu, 19 Jan 2023 12:30:54 +0100 Subject: [PATCH 1/2] Revert "Merge pull request #2873 from bakdata/fix-merge-conflict-typo" This reverts commit bea802e139ecbdaa8978b37eba82c5ec4d7b7d4e, reversing changes made to 53e5b6fb658f6077a69acde0430388d8d8107527. --- .../js/external-forms/form-concept-group/FormConceptNode.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx b/frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx index fb1d709bb7..b4d6910392 100644 --- a/frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx +++ b/frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx @@ -122,7 +122,7 @@ const FormConceptNode: FC = ({ : undefined; return ( - + { ref.current = instance; From 44ee89083f770fe7cc86f4836715314be7d00a76 Mon Sep 17 00:00:00 2001 From: Max Thonagel <12283268+thoniTUB@users.noreply.github.com> Date: Thu, 19 Jan 2023 12:31:30 +0100 Subject: [PATCH 2/2] Revert "Merge branch 'develop' into master" This reverts commit 53e5b6fb658f6077a69acde0430388d8d8107527, reversing changes made to e1339e20f9d5b743fba3ddd35a513bda4b7d1b27. --- frontend/package.json | 2 - frontend/server.js | 11 --- .../form-concept-group/FormConceptNode.tsx | 71 +++++++++--------- frontend/src/js/pane/TabNavigation.tsx | 27 +++---- .../small-tab-navigation/HoverNavigatable.tsx | 60 --------------- .../SmallTabNavigationButton.tsx | 24 +++--- .../js/standard-query-editor/QueryNode.tsx | 73 ++++++++----------- .../QueryNodeActions.tsx | 2 +- frontend/yarn.lock | 5 -- 9 files changed, 85 insertions(+), 190 deletions(-) delete mode 100644 frontend/src/js/small-tab-navigation/HoverNavigatable.tsx diff --git a/frontend/package.json b/frontend/package.json index c347d39c2e..ce4c9db856 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,7 +13,6 @@ "build": "INLINE_RUNTIME_CHUNK=false react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject", - "format": "prettier --eslint-config-path ./.eslintrc.js --write '**/*.{js,jsx,ts,tsx,json,css}'", "heroku-postbuild": "yarn run build", "lint": "eslint --ext .ts --ext .tsx src/", "checkformat": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css}\"", @@ -44,7 +43,6 @@ "compression": "^1.7.4", "date-fns": "^2.28.0", "downshift": "^6.1.7", - "express-rate-limit": "^6.7.0", "file-saver": "^2.0.5", "helmet": "^5.0.2", "i18next": "^21.6.11", diff --git a/frontend/server.js b/frontend/server.js index 321d175370..f0a345fc22 100644 --- a/frontend/server.js +++ b/frontend/server.js @@ -8,11 +8,8 @@ const compression = require("compression"); const helmet = require("helmet"); const cors = require("cors"); const path = require("path"); -const rateLimit = require('express-rate-limit'); const PORT = process.env.PORT || 8000; -// Maximum requests per minute -const requestsPerMinute = process.env.REQUESTS_PER_MINUTE || 1000; app.use( helmet({ @@ -23,14 +20,6 @@ app.disable("x-powered-by"); app.use(compression()); app.use(cors()); -// set up rate limiter: default maximum of 1000 requests per minute -app.use( - rateLimit({ - windowMs: 60 * 1000, // 1 minute - max: requestsPerMinute - }) -); - app.use(express.static(path.resolve(__dirname, "build"))); app.get("*", (req, res) => res.sendFile(path.join(__dirname, "build", "index.html")) diff --git a/frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx b/frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx index b4d6910392..11915a7df6 100644 --- a/frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx +++ b/frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx @@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next"; import { getWidthAndHeight } from "../../app/DndProvider"; import IconButton from "../../button/IconButton"; -import { HoverNavigatable } from "../../small-tab-navigation/HoverNavigatable"; import { getRootNodeLabel } from "../../standard-query-editor/helper"; import type { DragItemConceptTreeNode } from "../../standard-query-editor/types"; import WithTooltip from "../../tooltip/WithTooltip"; @@ -122,44 +121,40 @@ const FormConceptNode: FC = ({ : undefined; return ( - - { - ref.current = instance; - drag(instance); - }} - active={hasNonDefaultSettings || hasFilterValues} - onClick={onClick} - > -
- - <> - {rootNodeLabel && {rootNodeLabel}} - - {conceptNode && !!conceptNode.description && ( - {conceptNode.description} - )} - + { + ref.current = instance; + drag(instance); + }} + active={hasNonDefaultSettings || hasFilterValues} + onClick={onClick} + > +
+ + <> + {rootNodeLabel && {rootNodeLabel}} + + {conceptNode && !!conceptNode.description && ( + {conceptNode.description} + )} + + +
+ + {expand && expand.expandable && ( + + { + e.stopPropagation(); + expand.onClick(); + }} + /> -
- - {expand && expand.expandable && ( - - { - e.stopPropagation(); - expand.onClick(); - }} - /> - - )} - - - + )} + + ); }; diff --git a/frontend/src/js/pane/TabNavigation.tsx b/frontend/src/js/pane/TabNavigation.tsx index 8c29cf9ce9..98581fb120 100644 --- a/frontend/src/js/pane/TabNavigation.tsx +++ b/frontend/src/js/pane/TabNavigation.tsx @@ -2,7 +2,6 @@ import styled from "@emotion/styled"; import { FC } from "react"; import FaIcon from "../icon/FaIcon"; -import { HoverNavigatable } from "../small-tab-navigation/HoverNavigatable"; import WithTooltip from "../tooltip/WithTooltip"; const Root = styled("div")` @@ -69,28 +68,20 @@ const TabNavigation: FC = ({ onClickTab, dataTestId, }) => { - function createClickHandler(key: string) { - return () => { - if (key !== activeTab) { - onClickTab(key); - } - }; - } - return ( {tabs.map(({ key, label, tooltip, loading }) => { return ( - - - {label} - {loading && } - - + { + if (key !== activeTab) onClickTab(key); + }} + > + {label} + {loading && } + ); })} diff --git a/frontend/src/js/small-tab-navigation/HoverNavigatable.tsx b/frontend/src/js/small-tab-navigation/HoverNavigatable.tsx deleted file mode 100644 index 0d2ff66f7a..0000000000 --- a/frontend/src/js/small-tab-navigation/HoverNavigatable.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import styled from "@emotion/styled"; -import { ReactNode, useState } from "react"; -import { useDrop } from "react-dnd"; - -import { DNDType } from "../common/constants/dndTypes"; - -interface PropsT { - triggerNavigate: () => void; - children: ReactNode; - className?: string; -} - -const Root = styled("div")<{ - isOver?: boolean; -}>` - background-color: ${({ theme, isOver }) => - isOver ? `${theme.col.grayVeryLight}` : "inherit"}; - position: relative; - display: inline-flex; -`; - -// estimated to feel responsive, but not too quick -const TIME_UNTIL_NAVIGATE = 600; - -export const HoverNavigatable = ({ - triggerNavigate, - children, - className, -}: PropsT) => { - // Type Number is in Browser, however local typescript does not recognize it - let [timeout, setTimeoutVariable] = useState(null); - const [{ isOver }, drop] = useDrop({ - accept: [ - DNDType.FORM_CONFIG, - DNDType.CONCEPT_TREE_NODE, - DNDType.PREVIOUS_QUERY, - DNDType.PREVIOUS_SECONDARY_ID_QUERY, - ], - hover: (_, monitor) => { - if (timeout == null) { - setTimeoutVariable( - setTimeout(() => { - setTimeoutVariable(null); - if (monitor.isOver()) { - triggerNavigate(); - } - }, TIME_UNTIL_NAVIGATE), - ); - } - }, - collect: (monitor) => ({ - isOver: monitor.isOver(), - }), - }); - return ( - - {children} - - ); -}; diff --git a/frontend/src/js/small-tab-navigation/SmallTabNavigationButton.tsx b/frontend/src/js/small-tab-navigation/SmallTabNavigationButton.tsx index b790c0a89e..a8f2917658 100644 --- a/frontend/src/js/small-tab-navigation/SmallTabNavigationButton.tsx +++ b/frontend/src/js/small-tab-navigation/SmallTabNavigationButton.tsx @@ -2,8 +2,6 @@ import { useTheme, Theme, css } from "@emotion/react"; import styled from "@emotion/styled"; import { forwardRef } from "react"; -import { HoverNavigatable } from "./HoverNavigatable"; - const bottomBorderBase = css` content: ""; position: absolute; @@ -78,18 +76,16 @@ const SmallTabNavigationButton = forwardRef( const highlightColor = valueToColor(theme, value); return ( - - - + ); }, ); diff --git a/frontend/src/js/standard-query-editor/QueryNode.tsx b/frontend/src/js/standard-query-editor/QueryNode.tsx index 2e0f1dbbf9..54ede04e56 100644 --- a/frontend/src/js/standard-query-editor/QueryNode.tsx +++ b/frontend/src/js/standard-query-editor/QueryNode.tsx @@ -14,7 +14,6 @@ import { nodeIsConceptQueryNode, } from "../model/node"; import { isQueryExpandable } from "../model/query"; -import { HoverNavigatable } from "../small-tab-navigation/HoverNavigatable"; import AdditionalInfoHoverable from "../tooltip/AdditionalInfoHoverable"; import QueryNodeActions from "./QueryNodeActions"; @@ -22,17 +21,13 @@ import QueryNodeContent from "./QueryNodeContent"; import { getRootNodeLabel } from "./helper"; import { StandardQueryNodeT } from "./types"; -const FlexHoverNavigatable = styled(HoverNavigatable)` - display: flex; - width: 100%; -`; - const Root = styled("div")<{ active?: boolean; }>` position: relative; width: 100%; margin: 0 auto; + background-color: white; display: grid; grid-template-columns: 1fr auto; @@ -175,8 +170,6 @@ const QueryNode = ({ onExpandClick(node.query); }, [onExpandClick, node]); - const onClick = !!node.error ? () => {} : () => onEditClick(andIdx, orIdx); - const label = nodeIsConceptQueryNode(node) ? node.label : node.label || node.id; @@ -187,39 +180,37 @@ const QueryNode = ({ : undefined; const QueryNodeRoot = ( - - { - ref.current = instance; - drag(instance); - }} - active={hasNonDefaultSettings || hasFilterValues} - onClick={node.error ? undefined : () => onEditClick(andIdx, orIdx)} - > - - - - + { + ref.current = instance; + drag(instance); + }} + active={hasNonDefaultSettings || hasFilterValues} + onClick={node.error ? undefined : () => onEditClick(andIdx, orIdx)} + > + + + ); if (nodeIsConceptQueryNode(node)) { diff --git a/frontend/src/js/standard-query-editor/QueryNodeActions.tsx b/frontend/src/js/standard-query-editor/QueryNodeActions.tsx index c2f070cafd..be0e8dd2b6 100644 --- a/frontend/src/js/standard-query-editor/QueryNodeActions.tsx +++ b/frontend/src/js/standard-query-editor/QueryNodeActions.tsx @@ -18,7 +18,7 @@ const StyledFaIcon = styled(FaIcon)` `; const StyledIconButton = styled(IconButton)` - padding: 4px 6px 4px; + padding: 0px 6px 4px; `; const RelativeContainer = styled.div` diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 9dd3563fed..13d7d44004 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -7519,11 +7519,6 @@ expect@^27.5.1: jest-matcher-utils "^27.5.1" jest-message-util "^27.5.1" -express-rate-limit@^6.7.0: - version "6.7.0" - resolved "https://registry.yarnpkg.com/express-rate-limit/-/express-rate-limit-6.7.0.tgz#6aa8a1bd63dfe79702267b3af1161a93afc1d3c2" - integrity sha512-vhwIdRoqcYB/72TK3tRZI+0ttS8Ytrk24GfmsxDXK9o9IhHNO5bXRiXQSExPQ4GbaE5tvIS7j1SGrxsuWs+sGA== - express@^4.17.1, express@^4.17.2: version "4.17.2" resolved "https://registry.yarnpkg.com/express/-/express-4.17.2.tgz#c18369f265297319beed4e5558753cc8c1364cb3"