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
--- a/skyquake/plugins/composer/src/src/components/Button.js
+++ b/skyquake/plugins/composer/src/src/components/Button.js
@@ -58,8 +58,15 @@
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
--- a/skyquake/plugins/composer/src/src/components/CatalogPanel.js
+++ b/skyquake/plugins/composer/src/src/components/CatalogPanel.js
@@ -117,7 +117,7 @@
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
--- a/skyquake/plugins/composer/src/src/components/ComposerApp.js
+++ b/skyquake/plugins/composer/src/src/components/ComposerApp.js
@@ -157,6 +157,7 @@
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 @@
<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 @@
newPathName={self.state.newPathName}
item={self.state.item}
type={self.state.filterCatalogByTypeValue}
+ rbacDisabled={rbacDisabled}
/>
{
(self.state.panelTabShown == 'descriptor') ?
@@ -235,7 +238,7 @@
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
--- a/skyquake/plugins/composer/src/src/components/ComposerAppToolbar.js
+++ b/skyquake/plugins/composer/src/src/components/ComposerAppToolbar.js
@@ -136,11 +136,8 @@
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 @@
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
--- 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
+}