feat(EmptyTab): generate buttons from available Tabs

camunda · Oct 2, 2024 · a74aff0 · a74aff0
1 parent ca99d67
commit a74aff0
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 57 deletions.
diff --git a/client/resources/icons/file-types/BPMN-16x16.svg b/client/resources/icons/file-types/BPMN-16x16.svg
diff --git a/client/resources/icons/file-types/DMN-16x16.svg b/client/resources/icons/file-types/DMN-16x16.svg
diff --git a/client/resources/icons/file-types/Form-16x16.svg b/client/resources/icons/file-types/Form-16x16.svg
diff --git a/client/src/app/EmptyTab.js b/client/src/app/EmptyTab.js
@@ -12,18 +12,14 @@ 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';
 
 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 (
       <button className="btn btn-secondary" onClick={ () => onAction(action, options) }>
-        {icon}
+        {Icon && <Icon />}
         {title}
       </button>
     );
@@ -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 (
       <div id="welcome-page-cloud" className="welcome-card relative">
         <div className="engine-info">
@@ -68,24 +68,20 @@ export default class EmptyTab extends PureComponent {
 
         <p>Create a new file</p>
 
-        {this.renderDiagramButton('create-cloud-bpmn-diagram', 'BPMN diagram', <BPMNIcon />)}
-        {
-          !Flags.get(DISABLE_DMN) && (
-            this.renderDiagramButton('create-cloud-dmn-diagram', 'DMN diagram', <DMNIcon />)
-          )
-        }
-        {
-          !Flags.get(DISABLE_FORM) && (
-            this.renderDiagramButton('create-cloud-form', 'Form', <FormIcon />)
-          )
-        }
-        <Slot name="cloud-welcome" Component={ this.AdditionalButton } />
+        {cloudTabs.map(tab => (
+          this.renderDiagramButton(tab.action, tab.label, tab.icon, tab.options)
+        ))}
       </div>
     );
   };
 
   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 (
       <div id="welcome-page-platform" className="welcome-card">
         <div className="engine-info">
@@ -98,18 +94,9 @@ export default class EmptyTab extends PureComponent {
 
         <p>Create a new file</p>
 
-        {this.renderDiagramButton('create-bpmn-diagram', 'BPMN diagram', <BPMNIcon />)}
-        {
-          !Flags.get(DISABLE_DMN) && (
-            this.renderDiagramButton('create-dmn-diagram', 'DMN diagram', <DMNIcon />)
-          )
-        }
-        {
-          !Flags.get(DISABLE_FORM) && (
-            this.renderDiagramButton('create-form', 'Form', <FormIcon />)
-          )
-        }
-        <Slot name="platform-welcome" Component={ this.AdditionalButton } />
+        {platformTabs.map(tab => (
+          this.renderDiagramButton(tab.action, tab.label, tab.icon, tab.options)
+        ))}
       </div>
     );
   };

diff --git 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
@@ -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 <EmptyTab { ...props } tabsProvider={ self } />;
+          };
         },
         getIcon() {
           return null;

diff --git 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) {
     <EmptyTab
       onAction={ options.onAction || noop }
       onShown={ options.onShown || noop }
+      tabsProvider={ tabsProvider }
     />
   );
 

diff --git 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 <Fill slot="cloud-welcome" action={ 'create-diagram' } options={ { type: 'helloWorld' } } title="Hello World" icon={ null } />;
-};
-
-
 registerClientPlugin(tab, 'tabs');
-registerClientExtension(EmptyTabEntry);