From a74aff057f38c66f178fcec7bbaccf6e81c8c898 Mon Sep 17 00:00:00 2001 From: Martin Stamm Date: Wed, 2 Oct 2024 10:45:01 +0200 Subject: [PATCH] feat(EmptyTab): generate buttons from available Tabs --- .../resources/icons/file-types/BPMN-16x16.svg | 3 -- .../resources/icons/file-types/DMN-16x16.svg | 3 -- .../resources/icons/file-types/Form-16x16.svg | 5 -- client/src/app/EmptyTab.js | 51 +++++++------------ client/src/app/EmptyTab.less | 2 +- client/src/app/TabsProvider.js | 14 +++-- client/src/app/__tests__/EmptyTabSpec.js | 4 ++ resources/plugins/test-tab/client/index.js | 9 +--- 8 files changed, 34 insertions(+), 57 deletions(-) delete mode 100644 client/resources/icons/file-types/BPMN-16x16.svg delete mode 100644 client/resources/icons/file-types/DMN-16x16.svg delete mode 100644 client/resources/icons/file-types/Form-16x16.svg diff --git a/client/resources/icons/file-types/BPMN-16x16.svg b/client/resources/icons/file-types/BPMN-16x16.svg deleted file mode 100644 index 52da03b487..0000000000 --- a/client/resources/icons/file-types/BPMN-16x16.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/client/resources/icons/file-types/DMN-16x16.svg b/client/resources/icons/file-types/DMN-16x16.svg deleted file mode 100644 index 7316455d10..0000000000 --- a/client/resources/icons/file-types/DMN-16x16.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/client/resources/icons/file-types/Form-16x16.svg b/client/resources/icons/file-types/Form-16x16.svg deleted file mode 100644 index 4bf04e1de3..0000000000 --- a/client/resources/icons/file-types/Form-16x16.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/client/src/app/EmptyTab.js b/client/src/app/EmptyTab.js index c13c5e9729..8cbf022238 100644 --- a/client/src/app/EmptyTab.js +++ b/client/src/app/EmptyTab.js @@ -12,9 +12,6 @@ import React, { PureComponent } from 'react'; import CloudIcon from '../../resources/icons/Cloud.svg'; import PlatformIcon from '../../resources/icons/Platform.svg'; -import BPMNIcon from '../../resources/icons/file-types/BPMN.svg'; -import DMNIcon from '../../resources/icons/file-types/DMN.svg'; -import FormIcon from '../../resources/icons/file-types/Form.svg'; import * as css from './EmptyTab.less'; @@ -22,8 +19,7 @@ import { Tab } from './primitives'; -import Flags, { DISABLE_DMN, DISABLE_FORM, DISABLE_ZEEBE, DISABLE_PLATFORM } from '../util/Flags'; -import { Slot } from './slot-fill'; +import Flags, { DISABLE_ZEEBE, DISABLE_PLATFORM } from '../util/Flags'; export default class EmptyTab extends PureComponent { @@ -34,15 +30,14 @@ export default class EmptyTab extends PureComponent { triggerAction() { } - renderDiagramButton = (action, title, icon, options) => { - + renderDiagramButton = (action, title, Icon, options) => { const { onAction } = this.props; return ( ); @@ -56,6 +51,11 @@ export default class EmptyTab extends PureComponent { renderCloudColumn = () => { + const providers = this.props.tabsProvider?.getProviders() || {}; + const cloudTabs = Object.values(providers) + .flatMap(tab => tab.getNewFileMenu && tab.getNewFileMenu().map(entry => ({ ...entry, icon: tab.getIcon() }))) + .filter(entry => entry?.group === 'Camunda 8'); + return (
@@ -68,24 +68,20 @@ export default class EmptyTab extends PureComponent {

Create a new file

- {this.renderDiagramButton('create-cloud-bpmn-diagram', 'BPMN diagram', )} - { - !Flags.get(DISABLE_DMN) && ( - this.renderDiagramButton('create-cloud-dmn-diagram', 'DMN diagram', ) - ) - } - { - !Flags.get(DISABLE_FORM) && ( - this.renderDiagramButton('create-cloud-form', 'Form', ) - ) - } - + {cloudTabs.map(tab => ( + this.renderDiagramButton(tab.action, tab.label, tab.icon, tab.options) + ))}
); }; renderPlatformColumn = () => { + const providers = this.props.tabsProvider?.getProviders() || {}; + const platformTabs = Object.values(providers) + .flatMap(tab => tab.getNewFileMenu && tab.getNewFileMenu().map(entry => ({ ...entry, icon: tab.getIcon() }))) + .filter(entry => entry?.group === 'Camunda 7'); + return (
@@ -98,18 +94,9 @@ export default class EmptyTab extends PureComponent {

Create a new file

- {this.renderDiagramButton('create-bpmn-diagram', 'BPMN diagram', )} - { - !Flags.get(DISABLE_DMN) && ( - this.renderDiagramButton('create-dmn-diagram', 'DMN diagram', ) - ) - } - { - !Flags.get(DISABLE_FORM) && ( - this.renderDiagramButton('create-form', 'Form', ) - ) - } - + {platformTabs.map(tab => ( + this.renderDiagramButton(tab.action, tab.label, tab.icon, tab.options) + ))}
); }; diff --git a/client/src/app/EmptyTab.less b/client/src/app/EmptyTab.less index c6a8d30c21..df2089ec41 100644 --- a/client/src/app/EmptyTab.less +++ b/client/src/app/EmptyTab.less @@ -32,7 +32,7 @@ .welcome-cards { width: 100%; - align-items: center; + align-items: start; justify-content: center; display: flex; flex-direction: row; diff --git a/client/src/app/TabsProvider.js b/client/src/app/TabsProvider.js index f988c5a264..2aa9071275 100644 --- a/client/src/app/TabsProvider.js +++ b/client/src/app/TabsProvider.js @@ -8,6 +8,8 @@ * except in compliance with the MIT License. */ +import React from 'react'; + import { find, forEach, @@ -57,9 +59,9 @@ import Flags, { DEFAULT_HTTL } from '../util/Flags'; -import BPMNIcon from '../../resources/icons/file-types/BPMN-16x16.svg'; -import DMNIcon from '../../resources/icons/file-types/DMN-16x16.svg'; -import FormIcon from '../../resources/icons/file-types/Form-16x16.svg'; +import BPMNIcon from '../../resources/icons/file-types/BPMN.svg'; +import DMNIcon from '../../resources/icons/file-types/DMN.svg'; +import FormIcon from '../../resources/icons/file-types/Form.svg'; import { getDefaultVersion } from './tabs/EngineProfile'; import { getCloudTemplates } from '../util/elementTemplates'; @@ -129,14 +131,16 @@ const formLinter = new FormLinter(); export default class TabsProvider { constructor(plugins = []) { - + const self = this; this.providers = { empty: { canOpen(file) { return false; }, getComponent() { - return EmptyTab; + return (props) => { + return ; + }; }, getIcon() { return null; diff --git a/client/src/app/__tests__/EmptyTabSpec.js b/client/src/app/__tests__/EmptyTabSpec.js index 1dc74a767a..91b7070376 100644 --- a/client/src/app/__tests__/EmptyTabSpec.js +++ b/client/src/app/__tests__/EmptyTabSpec.js @@ -15,6 +15,7 @@ import { } from 'enzyme'; import EmptyTab from '../EmptyTab'; +import TabsProvider from '../TabsProvider'; import Flags, { DISABLE_DMN, DISABLE_FORM, DISABLE_ZEEBE, DISABLE_PLATFORM } from '../../util/Flags'; @@ -229,6 +230,8 @@ function noop() {} function createEmptyTab(options = {}, mountFn = shallow) { + const tabsProvider = new TabsProvider(); + if (typeof options === 'function') { mountFn = options; options = {}; @@ -238,6 +241,7 @@ function createEmptyTab(options = {}, mountFn = shallow) { ); diff --git a/resources/plugins/test-tab/client/index.js b/resources/plugins/test-tab/client/index.js index 21db1212d3..3f6215cfb2 100644 --- a/resources/plugins/test-tab/client/index.js +++ b/resources/plugins/test-tab/client/index.js @@ -11,8 +11,7 @@ // eslint-disable-next-line no-unused-vars import React from 'react'; -import { registerClientExtension, registerClientPlugin } from 'camunda-modeler-plugin-helpers'; -import { Fill } from 'camunda-modeler-plugin-helpers/components'; +import { registerClientPlugin } from 'camunda-modeler-plugin-helpers'; const tab = { helloWorld: { @@ -54,10 +53,4 @@ const tab = { } }; -const EmptyTabEntry = () => { - return ; -}; - - registerClientPlugin(tab, 'tabs'); -registerClientExtension(EmptyTabEntry); \ No newline at end of file