Merge pull request #236 from kbase/PTV-1884

PTV-1884
kbaseattic · Jun 8, 2023 · 9d14c4b · 9d14c4b
2 parents 2a162ad + e913502
commit 9d14c4b
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 53 deletions.
diff --git a/src/plugin/iframe_root/modules/reactComponents/Alert.css b/src/plugin/iframe_root/modules/reactComponents/Alert.css
@@ -14,4 +14,10 @@
 
 .Alert-title .fa {
     margin-right: 4px;
+}
+
+.Alert-inline {
+    display: inline;
+    padding: 3px;
+    margin: 0;
 }
diff --git a/src/plugin/iframe_root/modules/reactComponents/Alert.js b/src/plugin/iframe_root/modules/reactComponents/Alert.js
@@ -14,19 +14,21 @@ define([
 
     class Alert extends Component {
         renderIcon() {
-            switch (this.props.type) {
-            case 'error':
-                return 'fa-exclamation-triangle';
-            case 'warning':
-                return 'fa-exclamation-triangle';
-            case 'info':
-                return 'fa-info';
-            case 'success':
-                return 'fa-check';
+            if (this.props.showIcon) {
+                switch (this.props.variant) {
+                case 'error':
+                    return 'fa-exclamation-triangle';
+                case 'warning':
+                    return 'fa-exclamation-triangle';
+                case 'info':
+                    return 'fa-info';
+                case 'success':
+                    return 'fa-check';
+                }
             }
         }
         renderAlertTypeClass() {
-            switch (this.props.type) {
+            switch (this.props.variant) {
             case 'error':
                 return 'danger';
             case 'warning':
@@ -37,8 +39,14 @@ define([
                 return 'success';
             }
         }
-        defaultTitle() {
+        renderAlertCustomClass() {
             switch (this.props.type) {
+            case 'inline':
+                return 'Alert-inline';
+            }
+        }
+        defaultTitle() {
+            switch (this.props.variant) {
             case 'error':
                 return 'Error!';
             case 'warning':
@@ -50,13 +58,15 @@ define([
             }
         }
         renderTitle() {
-            const title = this.props.title || this.defaultTitle();
-            return html`
-                <div className="Alert-title">
-                    <span className=${`fa ${this.renderIcon()}`} />
-                    ${title}
-                </div>
-            `;
+            if (this.props.showTitle) {
+                const title = this.props.title || this.defaultTitle();
+                return html`
+                    <div className="Alert-title">
+                        <span className=${`fa ${this.renderIcon()}`} />
+                        ${title}
+                    </div>
+                `;
+            }
         }
         render() {
             const content = (() => {
@@ -67,7 +77,7 @@ define([
             })();
             return html`
                 <div
-                    className=${`alert alert-${this.renderAlertTypeClass()} Alert`}
+                    className=${`alert alert-${this.renderAlertTypeClass()} ${this.renderAlertCustomClass()} Alert`}
                     style=${this.props.style}
                 >
                     ${this.renderTitle()}

diff --git a/src/plugin/iframe_root/modules/reactComponents/LinkContinueController.js b/src/plugin/iframe_root/modules/reactComponents/LinkContinueController.js
@@ -250,7 +250,7 @@ define([
             }
             case 'HALTED':
                 return html`
-                    <${Alert} type="warning" title=${this.state.title} message=${this.state.message} />
+                    <${Alert} variant="warning" title=${this.state.title} showIcon=${true} showTitle=${true} message=${this.state.message} />
                 `;
             case 'ERROR':
                 return html`

diff --git a/src/plugin/iframe_root/modules/reactComponents/SignInContinueView.js b/src/plugin/iframe_root/modules/reactComponents/SignInContinueView.js
@@ -5,6 +5,7 @@ define([
     './CollapsiblePanel',
     './TextSpan',
     './ContinueHeader',
+    './Alert',
     '../lib/provider',
 
     'bootstrap',
@@ -16,6 +17,7 @@ define([
     CollapsiblePanel,
     TextSpan,
     ContinueHeader,
+    Alert,
     provider
 ) => {
     const {h, Component, Fragment} = preact;
@@ -147,11 +149,13 @@ define([
                     <p>There is no KBase account associated with it.</p>
                     <p>
                         If you wish to create a new KBase account, you may 
-                        <${TextSpan}>
-                            <a href="/#signup">
-                                <${TextSpan}><span className="fa fa-user-plus" /></>
-                                Sign Up now using this <${TextSpan} bold=${true}>${this.props.choice.provider}</> account
-                            </a>.
+                        <${Alert} variant="info" type="inline" style=${{marginLeft: '0.5rem'}}>
+                            <${TextSpan}>
+                                <a href="/#signup">
+                                    <${TextSpan}><span className="fa fa-user-plus" /></>
+                                    Sign Up now using this <${TextSpan} bold=${true}>${this.props.choice.provider}</> account
+                                </a>.
+                            </>
                         </>
                     </p>
 

diff --git a/src/plugin/iframe_root/modules/reactComponents/SignInOops.js b/src/plugin/iframe_root/modules/reactComponents/SignInOops.js
@@ -3,6 +3,7 @@ define([
     'htm',
     'reactComponents/CollapsiblePanel',
     'reactComponents/Well',
+    'reactComponents/Alert',
     'lib/provider',
 
     'bootstrap'
@@ -11,6 +12,7 @@ define([
     htm,
     CollapsiblePanel,
     Well,
+    Alert,
     provider,
 ) => {
 
@@ -78,7 +80,7 @@ define([
                     <${Well} type="warning">
                         ${explanation}
                         <div style=${{marginBottom: '5px'}}>
-                            
+                            <${Alert} variant="info" type="inline">
                             <a href=${provider.logoutUrl} 
                                 target="_blank">
                                 <span className="fa fa-external-link"
@@ -90,13 +92,18 @@ define([
                                     ${provider.label}
                                 </span>
                             </a>
+                            </>
                         </div>
                         <p>
                             After signing out from  <span className="-textSpan">
                                 ${provider.label}
-                            </span> you will need to <a href="/#login" target="_parent" className="-textSpan">
-                                <span className="fa fa-sign-in -textSpan" /> Sign in to KBase
-                            </a> again.
+                            </span> you will need to  
+                            <${Alert} variant="info" type="inline" style=${{margin: '0 0.3rem'}}>
+                                <a href="/#login" target="_parent" className="-textSpan">
+                                    <span className="fa fa-sign-in -textSpan" /> Sign in to KBase
+                                </a>
+                            </>
+                            again.
                         </p>
                     </div> 
                 </>