From 78dbf3c771c78bcfac95dcb37d063b4d7b56d299 Mon Sep 17 00:00:00 2001
From: Laurence Maultsby <laurence.maultsby@riftio.com>
Date: Fri, 14 Apr 2017 10:26:02 -0400
Subject: [PATCH] Composer buttons grayed out

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
---
 .../composer/src/src/components/Button.js     |  9 ++++++++-
 .../src/src/components/CatalogPanel.js        |  2 +-
 .../src/src/components/ComposerApp.js         |  7 +++++--
 .../src/src/components/ComposerAppToolbar.js  | 20 +++++++++----------
 .../composer/src/src/styles/Button.scss       |  4 ++--
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/skyquake/plugins/composer/src/src/components/Button.js b/skyquake/plugins/composer/src/src/components/Button.js
index 6ef41bf93..65b90fdfc 100644
--- 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 d7ebf0f43..a3574e73e 100644
--- 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 fd3fc9460..629f409dc 100644
--- 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 458e774c8..c1302ab52 100644
--- 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 8220f0aa9..9af34bf9c 100644
--- 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
+}
-- 
2.17.1