Hid server buttons

Author: Aviral09

src/component/Header.jsx

@@ -47,11 +47,12 @@ const Header = ({ superState, dispatcher }) => {
             <section className="toolbar">
                 {
                     actions.map(({
-                        text, active, action, icon, type, hotkey,
+                        text, active, visibility, action, icon, type, hotkey,
                     }, i) => {
                         const props = {
                             text,
                             active,
+                            visibility,
                             tabIndex: i + 1,
                             key: text,
                             action: (e) => action(superState, dispatcher, e),

src/component/HeaderComps.jsx

@@ -3,13 +3,13 @@ import Switch from 'rc-switch';
 import { Menu, MenuItem, MenuButton } from '@szhsin/react-menu';
 
 function DropDown({
-    Icon, text, action, active, tabIndex, hotkey,
+    Icon, text, action, active, visibility, tabIndex, hotkey,
 }) {
     return (
         <Menu menuButton={(
             <MenuButton>
                 <ActionButton {...{
-                    Icon, text, action, active, tabIndex, hotkey,
+                    Icon, text, action, active, visibility, tabIndex, hotkey,
                 }}
                 />
             </MenuButton>
@@ -21,10 +21,10 @@ function DropDown({
 }
 
 const FileUploader = ({
-    Icon, text, active, tabIndex, hotkey, superState,
+    Icon, text, active, visibility, tabIndex, hotkey, superState,
 }) => (
     <ActionButton {...{
-        Icon, text, active, tabIndex, action: () => superState.fileRef.current.click(), hotkey,
+        Icon, text, active, visibility, tabIndex, action: () => superState.fileRef.current.click(), hotkey,
     }}
     />
 );
@@ -51,7 +51,7 @@ const Switcher = ({
 );
 
 const ActionButton = ({
-    Icon, text, action, active, tabIndex, hotkey,
+    Icon, text, action, active, visibility, tabIndex, hotkey,
 }) => (
     <div
         role="button"
@@ -61,6 +61,7 @@ const ActionButton = ({
         onClick={() => (active && action())}
         onKeyDown={(ev) => active && ev.key === ' ' && action()}
         data-tip={hotkey ? hotkey.split(',')[0] : ''}
+        style={{ display: `${visibility ? '' : 'none'}` }}
     >
         <div className="icon"><Icon size="20" /></div>
         <div style={{ fontSize: 14 }}>{text}</div>

src/toolbarActions/toolbarList.js

@@ -23,6 +23,7 @@ const toolbarList = (state, dispatcher) => [
         icon: FaPlus,
         action: createNode,
         active: true,
+        visibility: true,
         hotkey: 'Ctrl+G',
     },
     { type: 'vsep' },
@@ -32,6 +33,7 @@ const toolbarList = (state, dispatcher) => [
         icon: FaFileImport,
         action: readFile,
         active: true,
+        visibility: true,
         hotkey: 'Ctrl+O',
     },
     {
@@ -40,20 +42,23 @@ const toolbarList = (state, dispatcher) => [
         icon: FaSave,
         action: saveGraphMLFile,
         active: state.curGraphInstance,
+        visibility: true,
     },
     {
         type: 'action',
         text: 'Save As',
         icon: FaSave,
         action: (s, d) => saveAction(s, d),
         active: true,
+        visibility: true,
     },
     {
         type: 'action',
         text: 'Empty',
         icon: FaThermometerEmpty,
         action: clearAll,
         active: true,
+        visibility: true,
         hotkey: 'Ctrl+Backspace',
     },
     { type: 'vsep' },
@@ -63,6 +68,7 @@ const toolbarList = (state, dispatcher) => [
         icon: FaUndo,
         action: undo,
         active: state.undoEnabled,
+        visibility: true,
         hotkey: 'Ctrl+Z',
     },
     {
@@ -71,6 +77,7 @@ const toolbarList = (state, dispatcher) => [
         icon: FaRedo,
         action: redo,
         active: state.redoEnabled,
+        visibility: true,
         hotkey: 'Ctrl+Shift+Z,Ctrl+Y',
     },
     { type: 'vsep' },
@@ -80,6 +87,7 @@ const toolbarList = (state, dispatcher) => [
         icon: FaEdit,
         action: editElement,
         active: (state.eleSelected && state.eleSelectedPayload.type !== 'MIX'),
+        visibility: true,
         hotkey: 'Ctrl+E',
     },
     {
@@ -88,6 +96,7 @@ const toolbarList = (state, dispatcher) => [
         icon: FaTrash,
         action: deleteElem,
         active: state.eleSelected,
+        visibility: true,
         hotkey: 'Delete,Backspace,Del,Clear',
     },
     { type: 'vsep' },
@@ -97,6 +106,7 @@ const toolbarList = (state, dispatcher) => [
         icon: FaHistory,
         action: viewHistory,
         active: true,
+        visibility: true,
     },
     { type: 'vsep' },
     // server buttons
@@ -106,48 +116,55 @@ const toolbarList = (state, dispatcher) => [
         icon: state.isWorkflowOnServer ? FaToggleOn : FiToggleLeft,
         action: () => toggleServer(state, dispatcher),
         active: true,
+        visibility: true,
     },
     {
         type: 'action',
         text: 'Build',
         icon: FaHammer,
         action: () => state.curGraphInstance && state.curGraphInstance.build(),
         active: state.isWorkflowOnServer,
+        visibility: state.isWorkflowOnServer,
     },
     {
         type: 'action',
         text: 'Debug',
         icon: FaBug,
         action: () => state.curGraphInstance && state.curGraphInstance.debug(),
         active: state.isWorkflowOnServer,
+        visibility: state.isWorkflowOnServer,
     },
     {
         type: 'action',
         text: 'Run',
         icon: FiPlay,
         action: () => state.curGraphInstance && state.curGraphInstance.run(),
         active: state.isWorkflowOnServer,
+        visibility: state.isWorkflowOnServer,
     },
     {
         type: 'action',
         text: 'Clear',
         icon: FaRegTimesCircle,
         action: () => state.curGraphInstance && state.curGraphInstance.clear(),
         active: state.isWorkflowOnServer,
+        visibility: state.isWorkflowOnServer,
     },
     {
         type: 'action',
         text: 'Stop',
         icon: FiStopCircle,
         action: () => state.curGraphInstance && state.curGraphInstance.stop(),
         active: state.isWorkflowOnServer,
+        visibility: state.isWorkflowOnServer,
     },
     {
         type: 'action',
         text: 'Destroy',
         icon: FaBomb,
         action: () => state.curGraphInstance && state.curGraphInstance.destroy(),
         active: state.isWorkflowOnServer,
+        visibility: state.isWorkflowOnServer,
     },
 
     // Not being implemented in version 1
@@ -195,13 +212,15 @@ const toolbarList = (state, dispatcher) => [
         icon: FiTriangle,
         action: () => { window.open('https://github.com/ControlCore-Project/concore-editor', '_blank'); },
         active: true,
+        visibility: true,
     },
     {
         type: 'action',
         text: 'Share',
         icon: FaShare,
         action: openShareModal,
         active: true,
+        visibility: true,
     },
     {
         type: 'menu',
@@ -211,6 +230,7 @@ const toolbarList = (state, dispatcher) => [
             { fn: () => downloadImg(s, d, 'JPG'), name: 'JPG' },
             { fn: () => downloadImg(s, d, 'PNG'), name: 'PNG' },
         ],
+        visibility: true,
         active: true,
     },
     { type: 'vsep' },