Skip to content

Commit

Permalink
feat: add minimal process applications frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
philippfromme committed Dec 4, 2024
1 parent 2bf52ec commit 01fa2dd
Show file tree
Hide file tree
Showing 6 changed files with 240 additions and 7 deletions.
32 changes: 32 additions & 0 deletions app/lib/menu/menu-builder.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,11 @@ class MenuBuilder {
.appendSaveFile()
.appendSaveAsFile()
.appendSaveAllFiles()
.appendSaveAsProcessApplication()
.appendSeparator()
.appendExportAs()
.appendCloseTab()
.appendCloseProcessApplication()
.appendSeparator()
.appendQuit()
.get()
Expand Down Expand Up @@ -195,6 +197,13 @@ class MenuBuilder {
}
}));

this.menu.append(new MenuItem({
label: 'Open Process Application...',
click: function() {
app.emit('menu:action', 'open-process-application');
}
}));

this.appendOpenRecent();

return this;
Expand Down Expand Up @@ -268,6 +277,17 @@ class MenuBuilder {
return this;
}

appendSaveAsProcessApplication() {
this.menu.append(new MenuItem({
label: 'Save Process Application As..',
click: function() {
app.emit('menu:action', 'save-process-application');
}
}));

return this;
}

appendExportAs() {
const exportState = this.options.state.exportAs;
const enabled = exportState && exportState.length > 0;
Expand Down Expand Up @@ -315,6 +335,18 @@ class MenuBuilder {
return this;
}

appendCloseProcessApplication() {
this.menu.append(new MenuItem({
label: 'Close Process Application',
enabled: this.options.state.openProcessApplication,
click: function() {
app.emit('menu:action', 'close-process-application');
}
}));

return this;
}

appendSwitchTab(submenu) {
this.menu.append(new MenuItem({
label: 'Switch Tab...',
Expand Down
97 changes: 90 additions & 7 deletions client/src/app/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,9 @@ import pSeries from 'p-series';

import History from './History';

import ProcessApplications from './process-applications';
import { ProcessApplicationsStatusBar } from './process-applications/components';

import { PluginsRoot } from './plugins';

import * as css from './App.less';
Expand All @@ -91,6 +94,7 @@ const INITIAL_STATE = {
dirtyTabs: {},
unsavedTabs: {},
recentTabs: [],
processApplication: null,
layout: {},
tabs: [],
tabState: {},
Expand Down Expand Up @@ -125,6 +129,18 @@ export class App extends PureComponent {
config: this.getGlobal('config')
});

const processApplications = this.processApplications = new ProcessApplications(this);

Check failure on line 132 in client/src/app/App.js

View workflow job for this annotation

GitHub Actions / build (ubuntu-latest)

'processApplications' is assigned a value but never used. Allowed unused vars must match /^_/u

Check failure on line 132 in client/src/app/App.js

View workflow job for this annotation

GitHub Actions / build (macos-latest)

'processApplications' is assigned a value but never used. Allowed unused vars must match /^_/u

Check failure on line 132 in client/src/app/App.js

View workflow job for this annotation

GitHub Actions / build (windows-2022)

'processApplications' is assigned a value but never used. Allowed unused vars must match /^_/u

this.on('process-applications:changed', () => {
console.log('process-applications:changed');

this.setState({
processApplication: {
files: []
}
});
});

this.tabRef = React.createRef();

const userPlugins = this.getPlugins('client');
Expand Down Expand Up @@ -1101,9 +1117,12 @@ export class App extends PureComponent {
recentTabs,
tabLoadingState,
tabState,
layout
layout,
processApplication
} = this.state;

console.log('processApplication', this.state.processApplication);

const {
onTabChanged,
onTabShown
Expand Down Expand Up @@ -1150,6 +1169,10 @@ export class App extends PureComponent {
if (layout !== prevState.layout) {
this.triggerAction('resize');
}

if (processApplication !== prevState.processApplication) {
this.workspaceChanged();
}
}

componentDidCatch(error, info) {
Expand Down Expand Up @@ -1188,13 +1211,15 @@ export class App extends PureComponent {
const {
layout,
tabs,
activeTab
activeTab,
processApplication
} = this.state;

return onWorkspaceChanged({
tabs,
activeTab,
layout
layout,
processApplication
});
};

Expand All @@ -1215,9 +1240,7 @@ export class App extends PureComponent {
};

getGlobal = (name) => {
const {
globals
} = this.props;
const globals = this.props.globals;

if (name in globals) {
return globals[name];
Expand Down Expand Up @@ -1741,6 +1764,44 @@ export class App extends PureComponent {
return this.getGlobal('dialog').show(options);
}

async showOpenProcessApplicationDialog(options) {
const dialog = this.getGlobal('dialog');

const filters = [
{
name: 'Process Application',
extensions: [ 'process-application' ]
}
];

const filePaths = await dialog.showOpenFilesDialog({
activeFile: this.state.activeTab.file,
filters
});

if (filePaths.length !== 1) {
return;
}

await this.openProcessApplication(filePaths[0]);
}

/**
* Open process application.
*
* @param {string} path
*/
openProcessApplication(processApplication) {
this.processApplications.open(processApplication);
}

/**
* Create and save new process application.
*/
createProcessApplication() {

}

triggerAction = failSafe((action, options) => {

const {
Expand All @@ -1750,6 +1811,14 @@ export class App extends PureComponent {

log('App#triggerAction %s %o', action, options);

if (action === 'open-process-application') {
return this.showOpenProcessApplicationDialog();
}

if (action === 'create-process-application') {
return this.showCreateProcessApplicationDialog();
}

if (action === 'lint-tab') {
const {
tab,
Expand Down Expand Up @@ -2149,6 +2218,8 @@ export class App extends PureComponent {

<StatusBar />

<ProcessApplicationsStatusBar processApplication={ this.state.processApplication } />

<PluginsRoot
app={ this }
plugins={ this.plugins }
Expand All @@ -2173,7 +2244,19 @@ export class App extends PureComponent {
}

_getNewFileItems = () => {
let items = [];
let items = [
{
text: 'Process application',
group: 'Camunda 8',
icon: () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="24" height="24">
<path fill="#000" d="m6.387 2.824-1.735-1.73H1.015V11.24h2.323q.087.522.25 1.015H1.016A1.015 1.015 0 0 1 0 11.24V1.094A1.015 1.015 0 0 1 1.015.079h3.637a1.01 1.01 0 0 1 .72.3l1.73 1.73h6.088a1.015 1.015 0 0 1 1.015 1.014v1.6a7 7 0 0 0-1.015-.636v-.964H6.681z"></path>
<path fill="#000" d="m11.959 10.57-2.007 1.661a.586.586 0 0 1-.957-.445V8.464a.58.58 0 0 1 .336-.525.59.59 0 0 1 .62.08l2.008 1.66a.58.58 0 0 1 .155.692.6.6 0 0 1-.155.2"></path>
<path fill="#000" fillRule="evenodd" d="M10.766 15.891a.284.284 0 0 0 .248-.234l.151-.868a.3.3 0 0 1 .222-.237c.372-.1.73-.246 1.065-.435a.31.31 0 0 1 .32.01l.727.508a.285.285 0 0 0 .341-.009q.472-.38.855-.848a.28.28 0 0 0 .009-.34l-.51-.717a.3.3 0 0 1-.012-.322q.286-.502.438-1.057a.3.3 0 0 1 .237-.22l.002-.001.874-.15a.28.28 0 0 0 .236-.246q.02-.203.028-.411v-.04q.011-.375-.028-.75a.28.28 0 0 0-.236-.245l-.888-.152a.3.3 0 0 1-.238-.218 4.5 4.5 0 0 0-.44-1.034.3.3 0 0 1 .012-.325l.525-.739a.28.28 0 0 0-.009-.339 6 6 0 0 0-.855-.848.284.284 0 0 0-.341-.01l-.76.534a.3.3 0 0 1-.323.013 4.6 4.6 0 0 0-1.02-.412.3.3 0 0 1-.222-.238l-.16-.918a.28.28 0 0 0-.248-.234 6 6 0 0 0-.59-.031h-.014q-.303 0-.604.03a.28.28 0 0 0-.248.235l-.155.89a.3.3 0 0 1-.223.238c-.365.098-.717.24-1.047.424a.31.31 0 0 1-.319-.01l-.74-.52a.284.284 0 0 0-.342.008 6 6 0 0 0-.855.85.28.28 0 0 0-.009.339l.512.72a.3.3 0 0 1 .011.324q-.288.5-.442 1.055a.3.3 0 0 1-.24.22l-.87.149a.28.28 0 0 0-.236.245q-.062.601 0 1.201c.014.125.111.224.236.246l.87.149a.3.3 0 0 1 .24.219c.1.365.249.72.442 1.055a.3.3 0 0 1-.011.325l-.512.72a.28.28 0 0 0 .01.338q.382.469.854.85c.098.079.238.08.341.008l.74-.519a.3.3 0 0 1 .32-.011q.252.14.517.247.26.109.535.186c.111.031.197.12.219.23l.154.89a.28.28 0 0 0 .248.233q.604.06 1.208 0m-.604-2.288c.929 0 1.82-.366 2.477-1.019a3.47 3.47 0 0 0 1.026-2.46c0-.922-.37-1.806-1.026-2.459a3.52 3.52 0 0 0-2.477-1.018c-.929 0-1.82.366-2.477 1.018a3.47 3.47 0 0 0-1.026 2.46c0 .922.37 1.807 1.026 2.46a3.52 3.52 0 0 0 2.477 1.018" clipRule="evenodd"></path>
</svg>,
onClick: () => this.triggerAction('create-process-application')
}
];

const providers = this.props.tabsProvider.getProviders();

forEach(providers, provider => {
Expand Down
43 changes: 43 additions & 0 deletions client/src/app/process-applications/ProcessApplications.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
* under one or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information regarding copyright
* ownership.
*
* Camunda licenses this file to you under the MIT; you may not use this file
* except in compliance with the MIT License.
*/

export default class ProcessApplications {
constructor(app) {
this._app = app;

this._processApplication = null;
}

/**
* @param {string} path
*/
async open(path) {
try {
const file = await this._app.getGlobal('fileSystem').readFile(path);

this._processApplication = this._createFromFile(file);
} catch (err) {
console.error(err);
}

this._app.emit('process-applications:changed');
}

_createFromFile(file) {
return {
...JSON.parse(file.contents),
file
};
}

get() {
return this._processApplication;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/**
* Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
* under one or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information regarding copyright
* ownership.
*
* Camunda licenses this file to you under the MIT; you may not use this file
* except in compliance with the MIT License.
*/

import React, { useRef, useState } from 'react';

import { Fill } from '../../slot-fill';

import { Overlay, Section } from '../../../shared/ui';

export default function ProcessApplicationStatusBar(props) {
const ref = useRef();

const [ isOpen, setIsOpen ] = useState(false);

const { processApplication } = props;

if (!processApplication) {
return null;
}

return <>
<Fill slot="status-bar__file" group="0_process-application">
<button className="btn" ref={ ref } onClick={ () => setIsOpen(!isOpen) }>
Process application
</button>
</Fill>
{
isOpen && <Overlay id="process-application-overlay" anchor={ ref.current }>
<Section>
<Section.Header>
Files
</Section.Header>
<Section.Body>
<ul className="dashed">
{
processApplication.files.map(file => {
return <li key={ file.path } title={ file.path }>{ file.name }</li>;
})
}
</ul>
</Section.Body>
</Section>
</Overlay>
}
</>;
}
11 changes: 11 additions & 0 deletions client/src/app/process-applications/components/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/**
* Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
* under one or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information regarding copyright
* ownership.
*
* Camunda licenses this file to you under the MIT; you may not use this file
* except in compliance with the MIT License.
*/

export { default as ProcessApplicationsStatusBar } from './ProcessApplicationsStatusBar';
11 changes: 11 additions & 0 deletions client/src/app/process-applications/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/**
* Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
* under one or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information regarding copyright
* ownership.
*
* Camunda licenses this file to you under the MIT; you may not use this file
* except in compliance with the MIT License.
*/

export { default } from './ProcessApplications';

0 comments on commit 01fa2dd

Please sign in to comment.