Composer buttons grayed out

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>

diff --git a/skyquake/plugins/composer/src/src/components/Button.js b/skyquake/plugins/composer/src/src/components/Button.js
index 6ef41bf..65b90fd 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/Button.js
+++ b/skyquake/plugins/composer/src/src/components/Button.js
@@ -58,8 +58,15 @@ const Button = React.createClass({
                const title = this.props.title;
                const draggable = this.props.draggable;
                const className = ClassNames(this.props.className, 'Button');
+               let style = {
+               }
+               if(this.props.disabled) {
+                       style.pointerEvents = 'none';
+                       style.cursor = 'not-allowed';
+                       style.opacity = 0.25;
+               }
                return (
-                       <div className={className} onClick={this.props.onClick} title={title} draggable={draggable} onDragStart={this.props.onDragStart} style={{pointerEvents: (this.props.disabled ? 'none' : 'auto'), cursor: (this.props.disabled ? 'not-allowed' : 'auto'), position: 'relative'}}>
+                       <div className={className} onClick={this.props.onClick} title={title} draggable={draggable} onDragStart={this.props.onDragStart} style={style}>
                                { src ? <img src={src} /> : null }
                                {label}
                        </div>

diff --git a/skyquake/plugins/composer/src/src/components/CatalogPanel.js b/skyquake/plugins/composer/src/src/components/CatalogPanel.js
index d7ebf0f..a3574e7 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/CatalogPanel.js
+++ b/skyquake/plugins/composer/src/src/components/CatalogPanel.js
@@ -117,7 +117,7 @@ const CatalogPanel = React.createClass({
                const isLoading = this.props.isLoading;
                return (
                        <div className={className} data-resizable="right" data-resizable-handle-offset="0 6" style={{width: this.props.layout.left}}>
-                               <CatalogPanelToolbar />
+                               <CatalogPanelToolbar rbacDisabled={this.props.rbacDisabled} />
                                <div className="CatalogPanelBody">
                                        {(() => {
                                                if (isLoading) {

diff --git a/skyquake/plugins/composer/src/src/components/ComposerApp.js b/skyquake/plugins/composer/src/src/components/ComposerApp.js
index fd3fc94..629f409 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/ComposerApp.js
+++ b/skyquake/plugins/composer/src/src/components/ComposerApp.js
@@ -157,6 +157,7 @@ const ComposerApp = React.createClass({
                let html = null;
                let self = this;
                const User = this.context.userProfile || {};
+               const rbacDisabled = !isRBACValid(User, [PROJECT_ROLES.CAT_ADMIN]);
                if(this.state.hasModel) {
 
                        function onClickUpdateSelection(event) {
@@ -205,7 +206,8 @@ const ComposerApp = React.createClass({
                                                        <CatalogPanel layout={self.state.layout}
                                                                                  isLoading={isLoading}
                                                                                  hasNoCatalogs={hasNoCatalogs}
-                                                                                 filterByType={self.state.filterCatalogByTypeValue} />
+                                                                                 filterByType={self.state.filterCatalogByTypeValue}
+                                                                                 rbacDisabled={rbacDisabled} />
                                                        <CanvasPanel layout={self.state.layout}
                                                                                 hasNoCatalogs={hasNoCatalogs}
                                                                                 showMore={self.state.showMore}
@@ -218,6 +220,7 @@ const ComposerApp = React.createClass({
                                          newPathName={self.state.newPathName}
                                                                                 item={self.state.item}
                                                                                 type={self.state.filterCatalogByTypeValue}
+                                                                                rbacDisabled={rbacDisabled}
                                                                                  />
                                                        {
                                                                (self.state.panelTabShown == 'descriptor') ?
@@ -235,7 +238,7 @@ const ComposerApp = React.createClass({
                                                                                                isEditingVNFD={isEditingVNFD}
                                                                                                isModified={isModified}
                                                                                                isNew={isNew}
-                                                                                               disabled={!hasItem || !isRBACValid(User, [PROJECT_ROLES.CAT_ADMIN])}
+                                                                                               disabled={!hasItem || rbacDisabled}
                                                                                                onClick={event => event.stopPropagation()}
                                                                                                panelTabShown={self.state.panelTabShown}/>
                                                </div>

diff --git a/skyquake/plugins/composer/src/src/components/ComposerAppToolbar.js b/skyquake/plugins/composer/src/src/components/ComposerAppToolbar.js
index 458e774..c1302ab 100644 (file)
--- a/skyquake/plugins/composer/src/src/components/ComposerAppToolbar.js
+++ b/skyquake/plugins/composer/src/src/components/ComposerAppToolbar.js
@@ -136,11 +136,8 @@ const ComposerAppToolbar = React.createClass({
                const style = {left: this.props.layout.left};
                const saveClasses = ClassNames('ComposerAppSave', {'primary-action': this.props.isModified || this.props.isNew});
                const cancelClasses = ClassNames('ComposerAppCancel', {'secondary-action': this.props.isModified});
-               if (this.props.disabled) {
-                       return (
-                               <div className="ComposerAppToolbar" style={style}></div>
-                       );
-               }
+               let isDisabled = this.props.disabled;
+               console.log('rbacDisabled', isDisabled )
                const hasSelection = SelectionManager.getSelections().length > 0;
                if(this.props.panelTabShown != 'descriptor') {
                        style.pointerEvents = 'none';
@@ -156,35 +153,38 @@ const ComposerAppToolbar = React.createClass({
                                        if (this.props.isEditingNSD || this.props.isEditingVNFD) {
                                                return (
                                                        <div className="FileActions">
-                                                               <Button className={saveClasses} onClick={this.onClickSave} label={messages.getSaveActionLabel(this.props.isNew)} src={imgSave} />
-                                                               <Button className={cancelClasses} onClick={this.onClickCancel} label="Cancel" src={imgCancel} />
-                                                               <Button className="ComposerAppToggleJSONViewerAction" onClick={this.toggleJSONViewer} label="YAML Viewer" src={imgJSONViewer} />
+                                                               <Button className={saveClasses} onClick={this.onClickSave} label={messages.getSaveActionLabel(this.props.isNew)} src={imgSave} disabled={isDisabled} />
+                                                               <Button className={cancelClasses} onClick={this.onClickCancel} label="Cancel" src={imgCancel} disabled={isDisabled} />
+                                                               <Button className="ComposerAppToggleJSONViewerAction" onClick={this.toggleJSONViewer} label="YAML Viewer" src={imgJSONViewer} disabled={isDisabled} />
                                                        </div>
                                                );
                                        }
                                })()}
                                <div className="LayoutActions">
-                                       <Button className="action-auto-layout" onClick={this.onClickAutoLayout} label="Auto Layout" src={imgLayout} />
+                                       <Button className="action-auto-layout" onClick={this.onClickAutoLayout} label="Auto Layout" src={imgLayout} disabled={isDisabled} />
                                        {this.props.isEditingNSD ||
                                                this.props.isEditingVNFD ? <Button className="action-add-vld"
+                                                                                                                  disabled={isDisabled}
                                                                                                                   draggable="true"
                                                                                                                   label={this.props.isEditingNSD ? 'Add VLD' : 'Add IVLD'}
                                                                                                                   src={imgVLD}
                                                                                                                   onDragStart={this.onDragStartAddVld}
                                                                                                                   onClick={this.onClickAddVld} /> : null}
                                        {this.props.isEditingNSD ? <Button className="action-add-vnffg"
+                                                                                                          disabled={isDisabled}
                                                                                                           draggable="true"
                                                                                                           label="Add VNFFG"
                                                                                                           src={imgFG}
                                                                                                           onDragStart={this.onDragStartAddVnffg}
                                                                                                           onClick={this.onClickAddVnffg} /> : null}
                                        {this.props.isEditingVNFD ? <Button className="action-add-vdu"
+                                                                                                               disabled={isDisabled}
                                                                                                                draggable="true"
                                                                                                                label="Add VDU"
                                                                                                                src={imgVDU}
                                                                                                                onDragStart={this.onDragStartAddVdu}
                                                                                                                onClick={this.onClickAddVdu} /> : null}
-                                       <Button type="image" title="Delete selected items" className="action-delete-selected-items" disabled={!hasSelection} onClick = {this.onClickDeleteSelected} src={imgDelete} label="Delete" />
+                                       <Button type="image" title="Delete selected items" className="action-delete-selected-items" disabled={!hasSelection || isDisabled} onClick = {this.onClickDeleteSelected} src={imgDelete} label="Delete" />
                                </div>
                        </div>
                );

diff --git a/skyquake/plugins/composer/src/src/styles/Button.scss b/skyquake/plugins/composer/src/src/styles/Button.scss
index 8220f0a..9af34bf 100644 (file)
--- a/skyquake/plugins/composer/src/src/styles/Button.scss
+++ b/skyquake/plugins/composer/src/src/styles/Button.scss
@@ -1,6 +1,6 @@
 
 /*
- * 
+ *
  *   Copyright 2016 RIFT.IO Inc
  *
  *   Licensed under the Apache License, Version 2.0 (the "License");
@@ -67,4 +67,4 @@
                        font-size: 11px;
                }
        }
-}
\ No newline at end of file
+}