diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx index 330c76a7..a29de2e2 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/exit-node.tsx @@ -1,7 +1,8 @@ -import { Handle, type Node, type NodeProps, NodeResizeControl, Position } from '@xyflow/react' +import { Handle, type Node, type NodeProps, NodeResizeControl, Position, useStore } from '@xyflow/react' import { ResizeIcon } from '~/routes/studio/canvas/nodetypes/frank-node' import { FlowConfig } from '~/routes/studio/canvas/flow.config' import { useSettingsStore } from '~/stores/settings-store' +import ZoomedOutNode from './zoomed-out-node' export type ExitNode = Node<{ subtype: string @@ -14,6 +15,20 @@ export default function ExitNodeComponent(properties: NodeProps) { const minNodeWidth = FlowConfig.EXIT_DEFAULT_WIDTH const minNodeHeight = FlowConfig.EXIT_DEFAULT_HEIGHT const gradientEnabled = useSettingsStore((state) => state.studio.gradient) + const zoom = useStore((state) => state.transform[2]) + const isCompact = zoom < 0.4 + + if (isCompact) { + return ( + + ) + } return ( <> diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx index 7cdc76c9..9faece23 100644 --- a/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/frank-node.tsx @@ -36,6 +36,7 @@ import { parseXsd, } from '~/utils/xsd-utils' import MissingRequirements from './components/missing-requirements' +import ZoomedOutNode from './zoomed-out-node' export type FrankNodeType = Node<{ subtype: string @@ -117,17 +118,6 @@ export default function FrankNode(properties: NodeProps) { return (dimensions.height - (properties.data.sourceHandles.length - 1) * handleSpacing) / 2 }, [dimensions.height, properties.data.sourceHandles.length]) - const COMPACT_INITIALS_BOX_SIZE = 160 - const COMPACT_PADDING_TOP = 8 - const COMPACT_HANDLE_SIZE = 15 - const COMPACT_HANDLE_GAP = 4 - - const compactXOffsetPx = - (FlowConfig.NODE_DEFAULT_WIDTH - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP - - const compactHandleTop = - COMPACT_PADDING_TOP + COMPACT_INITIALS_BOX_SIZE / 2 - COMPACT_HANDLE_SIZE / 2 + COMPACT_HANDLE_SIZE - const allForwardTypesUsed = useMemo(() => { if (availableHandleTypes.length === 0) return true @@ -406,107 +396,16 @@ export default function FrankNode(properties: NodeProps) { }, [draggedName, canAcceptChild, frankElement]) if (isCompact) { - const abbr = - properties.data.subtype.replaceAll(/[a-z]/g, '').slice(0, 4) || properties.data.subtype.slice(0, 2).toUpperCase() - return ( - <> -
-
- - {abbr} - -
- - - {properties.data.subtype} - - - {properties.data.name && ( - {properties.data.name} - )} - {properties.data.attributes && - Object.entries(properties.data.attributes).map(([key, value]) => ( - - {value || key} - - ))} -
- - {properties.data.subtype !== 'Receiver' && ( - <> -
- - - )} - - {properties.data.sourceHandles.length > 0 && ( -
- )} - - {properties.data.sourceHandles.map((handle) => ( - - ))} - + ) } diff --git a/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx b/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx new file mode 100644 index 00000000..f8091642 --- /dev/null +++ b/src/main/frontend/app/routes/studio/canvas/nodetypes/zoomed-out-node.tsx @@ -0,0 +1,140 @@ +import { Handle, Position } from '@xyflow/react' +import { FlowConfig } from '~/routes/studio/canvas/flow.config' + +const COMPACT_INITIALS_BOX_SIZE = 160 +const COMPACT_PADDING_TOP = 8 +const COMPACT_HANDLE_SIZE = 15 +const COMPACT_HANDLE_GAP = 4 + +export interface ZoomedOutNodeProps { + subtype: string + name?: string + attributes?: Record + colorVariable: string + selected?: boolean + showTargetHandle?: boolean + sourceHandles?: { type: string; index: number }[] + width?: number +} + +function getAbbreviation(subtype: string): string { + return subtype.replaceAll(/[a-z]/g, '').slice(0, 4) || subtype.slice(0, 2).toUpperCase() +} + +/** + * Compact representation of a node shown when the canvas is zoomed out far enough that the full + * node would be unreadable. Renders an initials box with the subtype, name attributes and the + * handles aligned under it. + */ +export default function ZoomedOutNode({ + subtype, + name, + attributes, + colorVariable, + selected, + showTargetHandle = true, + sourceHandles = [], + width = FlowConfig.NODE_DEFAULT_WIDTH, +}: Readonly) { + const abbr = getAbbreviation(subtype) + + const compactXOffsetPx = (width - COMPACT_INITIALS_BOX_SIZE) / 2 - COMPACT_HANDLE_SIZE - COMPACT_HANDLE_GAP + const compactHandleTop = + COMPACT_PADDING_TOP + COMPACT_INITIALS_BOX_SIZE / 2 - COMPACT_HANDLE_SIZE / 2 + COMPACT_HANDLE_SIZE + + return ( + <> +
+
+ + {abbr} + +
+ + {subtype} + + {name && {name}} + {attributes && + Object.entries(attributes).map(([key, value]) => ( + + {value || key} + + ))} +
+ + {showTargetHandle && ( + <> +
+ + + )} + + {sourceHandles.length > 0 && ( +
+ )} + + {sourceHandles.map((handle) => ( + + ))} + + ) +} diff --git a/src/main/frontend/app/utils/api.ts b/src/main/frontend/app/utils/api.ts index 3279a424..888e5994 100644 --- a/src/main/frontend/app/utils/api.ts +++ b/src/main/frontend/app/utils/api.ts @@ -1,7 +1,5 @@ -import variables from '../../environment/environment' - export function apiUrl(path: string): string { - return `${variables.apiBaseUrl}/api${path}` + return `/api${path}` } const getAnonymousSessionId = () => { diff --git a/src/main/frontend/environment/base.ts b/src/main/frontend/environment/base.ts deleted file mode 100644 index 299efc10..00000000 --- a/src/main/frontend/environment/base.ts +++ /dev/null @@ -1,9 +0,0 @@ -export interface EnvironmentVariables { - apiBaseUrl: string -} - -const base: EnvironmentVariables = { - apiBaseUrl: '', -} - -export default base diff --git a/src/main/frontend/environment/development.ts b/src/main/frontend/environment/development.ts deleted file mode 100644 index 50d445be..00000000 --- a/src/main/frontend/environment/development.ts +++ /dev/null @@ -1,8 +0,0 @@ -import base, { type EnvironmentVariables } from './base' - -const development: EnvironmentVariables = { - ...base, - apiBaseUrl: 'http://localhost:8080', -} - -export default development diff --git a/src/main/frontend/environment/environment.ts b/src/main/frontend/environment/environment.ts deleted file mode 100644 index e42c2d24..00000000 --- a/src/main/frontend/environment/environment.ts +++ /dev/null @@ -1,9 +0,0 @@ -import development from './development' -import production from './production' -import type { EnvironmentVariables } from './base' - -const environment = process.env.NODE_ENV - -const variables: EnvironmentVariables = environment === 'development' ? development : production - -export default variables diff --git a/src/main/frontend/environment/production.ts b/src/main/frontend/environment/production.ts deleted file mode 100644 index 71565e0a..00000000 --- a/src/main/frontend/environment/production.ts +++ /dev/null @@ -1,7 +0,0 @@ -import base, { type EnvironmentVariables } from './base' - -const production: EnvironmentVariables = { - ...base, -} - -export default production diff --git a/src/main/frontend/vite.config.ts b/src/main/frontend/vite.config.ts index 80d9c0f3..6260d8f4 100644 --- a/src/main/frontend/vite.config.ts +++ b/src/main/frontend/vite.config.ts @@ -28,5 +28,8 @@ export default defineConfig({ }, server: { port: 3000, + proxy: { + '/api': 'http://localhost:8080', + }, }, }) diff --git a/src/main/java/org/frankframework/flow/common/config/CsrfCookieFilter.java b/src/main/java/org/frankframework/flow/common/config/CsrfCookieFilter.java new file mode 100644 index 00000000..78758233 --- /dev/null +++ b/src/main/java/org/frankframework/flow/common/config/CsrfCookieFilter.java @@ -0,0 +1,32 @@ +package org.frankframework.flow.common.config; + +import jakarta.servlet.FilterChain; +import jakarta.servlet.ServletException; +import jakarta.servlet.http.HttpServletRequest; +import jakarta.servlet.http.HttpServletResponse; +import java.io.IOException; +import org.jspecify.annotations.NonNull; +import org.springframework.security.web.csrf.CsrfToken; +import org.springframework.web.filter.OncePerRequestFilter; + +/** + * Forces the deferred {@link CsrfToken} to load on every request so the XSRF-TOKEN cookie is + * written. Otherwise the cookie is only minted when something reads the token, leaving a SPA with no + * token to echo back as X-XSRF-TOKEN. + */ +public class CsrfCookieFilter extends OncePerRequestFilter { + + @Override + protected void doFilterInternal( + @NonNull HttpServletRequest request, + @NonNull HttpServletResponse response, + @NonNull FilterChain filterChain + ) throws ServletException, IOException { + CsrfToken csrfToken = (CsrfToken) request.getAttribute(CsrfToken.class.getName()); + if (csrfToken != null) { + csrfToken.getToken(); + } + + filterChain.doFilter(request, response); + } +} diff --git a/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java b/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java index d1084c00..96d1f8db 100644 --- a/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java +++ b/src/main/java/org/frankframework/flow/common/config/SecurityChainConfigurer.java @@ -17,12 +17,14 @@ import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; +import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer; import org.springframework.security.config.annotation.web.configurers.FormLoginConfigurer; import org.springframework.security.config.annotation.web.configurers.HeadersConfigurer; import org.springframework.security.config.annotation.web.configurers.LogoutConfigurer; import org.springframework.security.config.http.SessionCreationPolicy; import org.springframework.security.web.SecurityFilterChain; import org.springframework.security.web.csrf.CookieCsrfTokenRepository; +import org.springframework.security.web.csrf.CsrfFilter; import org.springframework.security.web.util.matcher.AnyRequestMatcher; @Configuration @@ -49,14 +51,7 @@ public void setEnvironment(Environment environment) { public SecurityFilterChain configureChain(IAuthenticator authenticator, HttpSecurity http) throws Exception { configureAuthenticator(authenticator); http.headers(headers -> headers.frameOptions(HeadersConfigurer.FrameOptionsConfig::sameOrigin)); - http.csrf(csrf -> { - if (csrfEnabled) { - csrf.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()); - csrf.csrfTokenRequestHandler(new SpaCsrfTokenRequestHandler()); - return; - } - csrf.disable(); - }); + configureCsrf(http); http.securityMatcher(AnyRequestMatcher.INSTANCE); http.formLogin(FormLoginConfigurer::disable); http.logout(LogoutConfigurer::disable); @@ -75,4 +70,18 @@ private void configureAuthenticator(IAuthenticator authenticator) { servletConfig.setUrlMapping("/*"); authenticator.registerServlet(servletConfig); } + + private void configureCsrf(HttpSecurity http) { + if (!csrfEnabled) { + http.csrf(AbstractHttpConfigurer::disable); + return; + } + + http.csrf(csrf -> { + csrf.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()); + csrf.csrfTokenRequestHandler(new SpaCsrfTokenRequestHandler()); + }); + + http.addFilterAfter(new CsrfCookieFilter(), CsrfFilter.class); + } }