Skip to content

Commit

Permalink
Changes at frontend and some improvements..
Browse files Browse the repository at this point in the history
  • Loading branch information
Łukasz Ciołecki committed Jul 1, 2021
1 parent fabfc89 commit b71ce8a
Show file tree
Hide file tree
Showing 43 changed files with 278 additions and 172 deletions.
42 changes: 25 additions & 17 deletions docs/Configuration.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

Configuration
=============

Expand Down Expand Up @@ -161,7 +160,7 @@ processToolbarConfig {
type: "process-info-panel"
buttons: [
{ type: "process-save", disabled: { subprocess: false, archived: true, type: "oneof" } }
{ type: "custom-link", title: "Metrics for {{processName}}", templateHref="/metrics/{{processId}}" }
{ type: "custom-link", title: "Metrics for {{processName}}", url: "/metrics/{{processId}}" }
]
}
]
Expand All @@ -174,6 +173,7 @@ We can also create special configuration for each category by:
processToolbarConfig {
categoryConfig {
"CategoryName" {
id: "58f1acff-d864-4d66-9f86-0fa7319f7043"
topLeft: [
{ type: "creator-panel", hidden: {subprocess: true, archived: false, type: "allof"} }
]
Expand All @@ -189,50 +189,54 @@ Configuration allow us to:
* hiding or disabling buttons

Each of this function can be configured by condition expression where we can use three parameters:
- subproces: boolean // if true then condition match only subprocess, by default ignored
- archived: boolean // if true then condition match only archived, by default ignored
- type condition: allof / oneof // information about that we check only one condition or all conditions
* `subprocess: boolean` - if true then condition match only subprocess, by default ignored
* `archived: boolean` - if true then condition match only archived, by default ignored
* `type: allof / oneof` - information about that checked will be only one condition or all conditions

#### Toolbar Panel Templating

Configuration allows to templating params like:
* `title`
* `tempalteHref`
* `icon`
* `name` - available only on Buttons
* `title`- available on Panels and Buttons
* `url` - available only on CustomLink and CustomAction buttons
* `icon`- available only on Buttons

Right now we allow to template two elements:
* process id -`{{processId}}`
* process name - `{{processName}}`

Example usage:
* `title: "Metrics for {{processName}}"`
* `templateHref="/metrics/{{processId}}" `
* `name: "deploy {{processName}}"`
* `url: "/metrics/{{processId}}" `
* `icon: "/assets/process-icon-{{processId}}"`

#### Default Process Panel Configuration

```
processToolbarConfig {
defaultConfig {
"top-left": [
topLeft: [
{ type: "tips-panel" }
{ type: "creator-panel" }
{ type: "creator-panel", hidden: { archived: true } }
{ type: "versions-panel" }
{ type: "comments-panel" }
{ type: "attachments-panel" }
]
"top-right": [
topRight: [
{
type: "process-info-panel"
buttons: [
{ type: "process-save", disabled: { archived: true } }
{ type: "process-save", title: "Save changes", disabled: { archived: true } }
{ type: "process-deploy", disabled: { subprocess: true, archived: true, type: "oneof" } }
{ type: "process-cancel", disabled: { subprocess: true, archived: true, type: "oneof" } }
{ type: "custom-link", title: "metrics", icon: "/assets/buttons/metrics.svg", templateHref: "/metrics/{{processName}}", disabled: { subprocess: true } }
{ type: "custom-link", name: "metrics", icon: "/assets/buttons/metrics.svg", url: "/metrics/{{processName}}", disabled: { subprocess: true } }
]
}
{
id: "view-panel"
type: "buttons-panel"
title: "view"
buttons: [
{ type: "view-business-view" }
{ type: "view-zoom-in" }
Expand All @@ -243,6 +247,7 @@ processToolbarConfig {
{
id: "edit-panel"
type: "buttons-panel"
title: "edit"
hidden: { archived: true }
buttonsVariant: "small"
buttons: [
Expand All @@ -257,11 +262,12 @@ processToolbarConfig {
{
id: "process-panel"
type: "buttons-panel"
title: "process"
buttons: [
{ type: "process-properties", hidden: { subprocess: true } }
{ type: "process-compare" }
{ type: "process-migrate", hidden: { archived: true }, disabled: { subprocess: true } }
{ type: "process-import", hidden: { archived: true } }
{ type: "process-migrate", disabled: { archived: true } }
{ type: "process-import", disabled: { archived: true } }
{ type: "process-json" }
{ type: "process-pdf" }
{ type: "process-archive", hidden: { archived: true } }
Expand All @@ -271,17 +277,19 @@ processToolbarConfig {
{
id: "test-panel"
type: "buttons-panel"
title: "test"
hidden: { subprocess: true }
buttons: [
{ type: "test-from-file", disabled: { archived: true } }
{ type: "test-generate", disabled: { archived: true } }
{ type: "test-counts" }
{ type: "test-hidden" }
{ type: "test-hide" }
]
}
{
id: "group-panel"
type: "buttons-panel"
title: "group"
hidden: { archived: true }
buttons: [
{ type: "group" }
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
package pl.touk.nussknacker.engine.util.config

import java.io.File
import java.net.{URI, URL, URLConnection, URLStreamHandler, URLStreamHandlerFactory}
import java.net.{URI, URL}
import com.typesafe.config.Config
import net.ceedubs.ficus.{FicusConfig, SimpleFicusConfig}
import net.ceedubs.ficus.readers._
Expand Down
1 change: 1 addition & 0 deletions ui/client/actions/nk/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,4 @@ export * from "./urlChange"
export * from "./zoom"
export * from "./nodeDetails"
export {saveProcess} from "./processUtils/saveProcess"
export {loadProcessToolbarsConfiguration} from "./loadProcessToolbarsConfiguration"
10 changes: 10 additions & 0 deletions ui/client/actions/nk/loadProcessToolbarsConfiguration.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import {ThunkAction} from "../reduxTypes"
import HttpService from "../../http/HttpService"

export function loadProcessToolbarsConfiguration(processId): ThunkAction {
return (dispatch) =>
HttpService.fetchProcessToolbarsConfiguration(processId).then((response) => dispatch({
type: "PROCESS_TOOLBARS_CONFIGURATION_LOADED",
data: response.data,
}))
}
9 changes: 8 additions & 1 deletion ui/client/actions/nk/toolbars.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import {getToolbarsInitData} from "../../reducers/selectors/toolbars"
import {ToolbarsSide} from "../../reducers/toolbars"
import {ThunkAction} from "../reduxTypes"
import {Toolbar} from "../../components/toolbarComponents/toolbar"
import {WithId} from "../../types/common"
import {ToolbarsConfig} from "../../components/toolbarSettings/types"

export type ToolbarPosition = [ToolbarsSide | string, number]

Expand All @@ -11,8 +13,12 @@ type MoveToolbarAction = { type: "MOVE_TOOLBAR", from: ToolbarPosition, to: Tool
type ToggleToolbarAction = { type: "TOGGLE_TOOLBAR", id: string, isCollapsed: boolean }
type ToggleToolboxGroupAction = { type: "TOGGLE_NODE_TOOLBOX_GROUP", nodeGroup: string }
type ToggleAllToolbarsAction = { type: "TOGGLE_ALL_TOOLBARS", isCollapsed: boolean }
type ProcessToolbarsConfigurationAction = { type: "PROCESS_TOOLBARS_CONFIGURATION_LOADED", data: WithId<ToolbarsConfig> }

export const toggleAllToolbars = (isCollapsed: boolean): ToggleAllToolbarsAction => ({type: "TOGGLE_ALL_TOOLBARS", isCollapsed})
export const toggleAllToolbars = (isCollapsed: boolean): ToggleAllToolbarsAction => ({
type: "TOGGLE_ALL_TOOLBARS",
isCollapsed
})

export const resetToolbars = (): ThunkAction => {
return (dispatch, getState) => {
Expand Down Expand Up @@ -57,3 +63,4 @@ export type ToolbarActions =
| ToggleToolbarAction
| ToggleAllToolbarsAction
| ToggleToolboxGroupAction
| ProcessToolbarsConfigurationAction
1 change: 0 additions & 1 deletion ui/client/assets/img/toolbarButtons/metrics.svg

This file was deleted.

24 changes: 24 additions & 0 deletions ui/client/components/UrlIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React, {PropsWithChildren, useEffect, useState} from "react"
import * as LoaderUtils from "../common/LoaderUtils"
import {absoluteBePath} from "../common/UrlUtils"

function UrlIcon({path, title, children}: PropsWithChildren<{path?: string, title?: string}>) {
const [error, setError] = useState(!path)

useEffect(() => {
setError(!path)
}, [path])

if (error) {
return <>{children}</>
}

try {
const svgContent = LoaderUtils.loadSvgContent(path)
return <div dangerouslySetInnerHTML={{__html: svgContent}}/>
} catch (e) {
return <img onError={() => setError(true)} src={absoluteBePath(path)} title={title} />
}
}

export default UrlIcon
22 changes: 13 additions & 9 deletions ui/client/components/toolbarSettings/TOOLBAR_COMPONENTS_MAP.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,28 @@ import {CreatorPanel} from "../toolbars/creator/CreatorPanel"
import {DefaultToolbarPanel, ToolbarPanelProps} from "../toolbarComponents/DefaultToolbarPanel"
import DetailsPanel from "../toolbars/details/DetailsPanel"
import ProcessInfo from "../toolbars/status/ProcessInfo"
import TestPanel from "../toolbars/test/TestPanel"
import {VersionsPanel} from "../toolbars/VersionsPanel"
import TestPanel from "../toolbars/test/TestPanel"
import EditPanel from "../toolbars/edit/EditPanel"
import GroupPanel from "../toolbars/group/GroupPanel"

export const TOOLBAR_COMPONENTS_MAP: Record<string, ComponentType<ToolbarPanelProps>> = {
DefaultPanel: DefaultToolbarPanel,

// only small changes from default
"TEST-PANEL": TestPanel,
"test-panel": TestPanel,
"edit-panel": EditPanel,
"group-panel": GroupPanel,

// custom with buttons
"PROCESS-INFO": ProcessInfo,
"process-info-panel": ProcessInfo,

// no buttons at all
"DETAILS-PANEL": DetailsPanel,
"TIPS-PANEL": TipsPanel,
"CREATOR-PANEL": CreatorPanel,
"VERSIONS-PANEL": VersionsPanel,
"COMMENTS-PANEL": CommentsPanel,
"ATTACHMENTS-PANEL": AttachmentsPanel,
"details-panel": DetailsPanel,
"tips-panel": TipsPanel,
"creator-panel": CreatorPanel,
"versions-panel": VersionsPanel,
"comments-panel": CommentsPanel,
"attachments-panel": AttachmentsPanel,
}

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export enum BuiltinButtonTypes {
processSave = "process-save",
processDeploy = "process-deploy",
processCancel = "process-cancel",
processMetrics = "process-metrics", //TODO: remove after start using be api
processMetrics = "process-metrics",
editUndo = "edit-undo",
editRedo = "edit-redo",
editCopy = "edit-copy",
Expand Down
48 changes: 13 additions & 35 deletions ui/client/components/toolbarSettings/buttons/LinkButton.tsx
Original file line number Diff line number Diff line change
@@ -1,57 +1,35 @@
import React, {PropsWithChildren, useEffect, useState} from "react"
import {useDispatch, useSelector} from "react-redux"
import React from "react"
import {useDispatch} from "react-redux"
import {reportEvent} from "../../../actions/nk"
import {ReactComponent as FallbackIcon} from "../../../assets/img/toolbarButtons/link.svg"
import * as LoaderUtils from "../../../common/LoaderUtils"
import {absoluteBePath} from "../../../common/UrlUtils"
import {PlainStyleLink} from "../../../containers/plainStyleLink"
import {getProcessId} from "../../../reducers/selectors/graph"
import ToolbarButton from "../../toolbarComponents/ToolbarButton"
import UrlIcon from "../../UrlIcon"

export interface LinkButtonProps {
name: string,
href: string, // template z processId
icon?: string, // url albo default na podstawie typu
disabled?: boolean,
title?: string,
url: string,
icon?: string,
disabled: boolean,
}

export function LinkButton({href, icon, name, disabled}: LinkButtonProps): JSX.Element {
export function LinkButton({url, icon, name, title, disabled}: LinkButtonProps): JSX.Element {
const dispatch = useDispatch()
const processId = useSelector(getProcessId)

const to = href.replace(/\{\{(\w+)\}\}/g, processId)

return (
<PlainStyleLink disabled={disabled} to={to}>
<PlainStyleLink disabled={disabled} to={url}>
<ToolbarButton
name={name || to}
name={name}
title={title || name}
onClick={() => dispatch(reportEvent({
category: name,
action: "custom-link-click",
name: to,
name: url,
}))}
disabled={disabled}
icon={<Icon path={icon}><FallbackIcon/></Icon>}
icon={<UrlIcon path={icon}><FallbackIcon/></UrlIcon>}
/>
</PlainStyleLink>
)
}

function Icon({path, children}: PropsWithChildren<{path?: string}>) {
const [error, setError] = useState(!path)

useEffect(() => {
setError(!path)
}, [path])

if (error) {
return <>{children}</>
}

try {
const svgContent = LoaderUtils.loadSvgContent(path)
return <div dangerouslySetInnerHTML={{__html: svgContent}}/>
} catch (e) {
return <img onError={() => setError(true)} src={absoluteBePath(path)}/>
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import CountsButton from "../../toolbars/test/buttons/CountsButton"
import FromFileButton from "../../toolbars/test/buttons/FromFileButton"
import GenerateButton from "../../toolbars/test/buttons/GenerateButton"
import HideButton from "../../toolbars/test/buttons/HideButton"
import BussinesViewSwitch from "../../toolbars/view/buttons/BussinesViewSwitch"
import BusinessViewSwitch from "../../toolbars/view/buttons/BusinessViewSwitch"
import {ResetViewButton} from "../../toolbars/view/buttons/ResetViewButton"
import {ZoomInButton} from "../../toolbars/view/buttons/ZoomInButton"
import {ZoomOutButton} from "../../toolbars/view/buttons/ZoomOutButton"
Expand All @@ -42,8 +42,8 @@ export const TOOLBAR_BUTTONS_MAP: ToolbarButtonsMap = {
[BuiltinButtonTypes.processSave]: SaveButton,
[BuiltinButtonTypes.processDeploy]: DeployButton,
[BuiltinButtonTypes.processCancel]: CancelDeployButton,
[BuiltinButtonTypes.processMetrics]: MetricsButton, //TODO: remove after start using be api
[BuiltinButtonTypes.viewBusinessView]: BussinesViewSwitch,
[BuiltinButtonTypes.processMetrics]: MetricsButton,
[BuiltinButtonTypes.viewBusinessView]: BusinessViewSwitch,
[BuiltinButtonTypes.viewZoomIn]: ZoomInButton,
[BuiltinButtonTypes.viewZoomOut]: ZoomOutButton,
[BuiltinButtonTypes.viewReset]: ResetViewButton,
Expand Down
2 changes: 1 addition & 1 deletion ui/client/components/toolbarSettings/buttons/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {BuiltinButtonTypes} from "./BuiltinButtonTypes"
import {CustomButtonTypes} from "./CustomButtonTypes"
import {LinkButtonProps} from "./LinkButton"

type GenericButton<T, P = unknown> = {type: T, name?: string} & P
type GenericButton<T, P = unknown> = {type: T, name?: string, title?: string, icon?: string, disabled?: boolean} & P

type Button =
| GenericButton<BuiltinButtonTypes>
Expand Down
Loading

0 comments on commit b71ce8a

Please sign in to comment.