PXP-4535 Fix/get access button

src/GuppyDataExplorer/ExplorerFilter/index.jsx

@@ -158,6 +158,7 @@ class ExplorerFilter extends React.Component {
             <TierAccessSelector
               onSelectorChange={this.handleAccessSelectorChange}
               getAccessButtonLink={this.props.getAccessButtonLink}
+              hideGetAccessButton={this.props.hideGetAccessButton}
             />
           ) : (<React.Fragment />)
         }
@@ -182,6 +183,7 @@ ExplorerFilter.propTypes = {
   adminAppliedPreFilters: PropTypes.object, // inherit from GuppyWrapper
   accessibleFieldCheckList: PropTypes.arrayOf(PropTypes.string), // inherit from GuppyWrapper
   getAccessButtonLink: PropTypes.string,
+  hideGetAccessButton: PropTypes.bool,
 };
 
 ExplorerFilter.defaultProps = {
@@ -198,6 +200,7 @@ ExplorerFilter.defaultProps = {
   adminAppliedPreFilters: {},
   accessibleFieldCheckList: [],
   getAccessButtonLink: undefined,
+  hideGetAccessButton: false,
 };
 
 export default ExplorerFilter;

src/GuppyDataExplorer/ExplorerTopMessageBanner/ExplorerTopMessageBanner.css

@@ -1,18 +1,35 @@
 .top-message-banner {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  align-content: flex-end;
-  background-color: transparent;
+  padding-bottom: 10px;
+  display: flex;
+  border-bottom: 2px solid var(--g3-color__silver);
 }
 
-.top-message-banner__button-wrapper {
+.top-message-banner__space-column {
+  width: 20%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.top-message-banner__text-column {
+  width: 80%;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+  white-space: pre-wrap;
+}
+
+.top-message-banner__button{
+  margin-right: 20px;
   background-color: var(--g3-color__white);
-  border-top: 1px solid var(--g3-color__silver);
   text-align: center;
-  margin-right: 20px;
   display: inline;
 }
 
+.top-message-banner__text-wrapper {
+  flex-flow: row;
+  flex-wrap: wrap;
+}
+
 .top-message-banner__bold-text {
   font-size: 14px;
   font-weight: var(--g3-font__semi-bold-weight);

src/GuppyDataExplorer/ExplorerTopMessageBanner/index.jsx

@@ -7,30 +7,43 @@ import { GuppyConfigType } from '../configTypeDef';
 
 class ExplorerTopMessageBanner extends React.Component {
   render() {
+    const hideGetAccessButton = this.props.hideGetAccessButton;
     return (
       <div className={this.props.className}>
         {
           (this.props.tierAccessLevel === 'regular' && checkForNoAccessibleProject(this.props.accessibleFieldObject, this.props.guppyConfig.accessibleValidationField)) ? (
             <div className='top-message-banner'>
-              <div className='top-message-banner__button-wrapper'>
-                <Button
-                  label='Get Access'
-                  className='top-message-banner__button'
-                  buttonType='default'
-                  onClick={
-                    (this.props.getAccessButtonLink) ? (
-                      () => { window.open(this.props.getAccessButtonLink); }
-                    ) : (() => {})
+              <div className='top-message-banner__space-column' />
+              <div className='top-message-banner__text-column'>
+                <div className='top-message-banner__button-wrapper'>
+                  { (hideGetAccessButton) ? (<React.Fragment />) :
+                    (
+                      <Button
+                        label='Get Access'
+                        className='top-message-banner__button'
+                        buttonType='default'
+                        enabled={!!(this.props.getAccessButtonLink)}
+                        tooltipEnabled={!(this.props.getAccessButtonLink)}
+                        tooltipText='Coming soon'
+                        onClick={
+                          (this.props.getAccessButtonLink) ? (
+                            () => { window.open(this.props.getAccessButtonLink); }
+                          ) : (() => {})
+                        }
+                      />
+                    )
                   }
-                />
-              </div>
-              <span className='top-message-banner__normal-text'>Due to lack of access, you are only able to narrow the cohort down to </span>
-              <span className='top-message-banner__bold-text'>{ this.props.tierAccessLimit } </span>
-              <span className='top-message-banner__normal-text'>
-                {this.props.guppyConfig.nodeCountTitle.toLowerCase()
+                </div>
+                <div className='top-message-banner__text-wrapper'>
+                  <span className='top-message-banner__normal-text'>Due to lack of access, you are only able to narrow the cohort down to </span>
+                  <span className='top-message-banner__bold-text'>{ this.props.tierAccessLimit } </span>
+                  <span className='top-message-banner__normal-text'>
+                    {this.props.guppyConfig.nodeCountTitle.toLowerCase()
                   || this.props.guppyConfig.dataType}.
                   Please request additional access if necessary.
-              </span>
+                  </span>
+                </div>
+              </div>
             </div>
           ) : (<React.Fragment />)
         }
@@ -42,6 +55,7 @@ class ExplorerTopMessageBanner extends React.Component {
 ExplorerTopMessageBanner.propTypes = {
   className: PropTypes.string,
   getAccessButtonLink: PropTypes.string,
+  hideGetAccessButton: PropTypes.bool,
   tierAccessLevel: PropTypes.string.isRequired,
   tierAccessLimit: PropTypes.number,
   accessibleFieldObject: PropTypes.object, // inherit from GuppyWrapper
@@ -53,6 +67,7 @@ ExplorerTopMessageBanner.defaultProps = {
   tierAccessLimit: undefined,
   accessibleFieldObject: {},
   getAccessButtonLink: undefined,
+  hideGetAccessButton: false,
   guppyConfig: {},
 };
 

src/GuppyDataExplorer/GuppyDataExplorer.jsx

@@ -45,11 +45,13 @@ class GuppyDataExplorer extends React.Component {
             tierAccessLimit={this.props.tierAccessLimit}
             guppyConfig={this.props.guppyConfig}
             getAccessButtonLink={this.props.getAccessButtonLink}
+            hideGetAccessButton={this.props.hideGetAccessButton}
           />
           <ExplorerFilter
             className='guppy-data-explorer__filter'
             guppyConfig={this.props.guppyConfig}
             getAccessButtonLink={this.props.getAccessButtonLink}
+            hideGetAccessButton={this.props.hideGetAccessButton}
             tierAccessLevel={this.props.tierAccessLevel}
             tierAccessLimit={this.props.tierAccessLimit}
           />
@@ -83,13 +85,15 @@ GuppyDataExplorer.propTypes = {
   tierAccessLevel: PropTypes.string.isRequired,
   tierAccessLimit: PropTypes.number.isRequired,
   getAccessButtonLink: PropTypes.string,
+  hideGetAccessButton: PropTypes.bool,
   adminAppliedPreFilters: PropTypes.object,
 };
 
 GuppyDataExplorer.defaultProps = {
   heatMapConfig: {},
   nodeCountTitle: undefined,
   getAccessButtonLink: undefined,
+  hideGetAccessButton: false,
   adminAppliedPreFilters: {},
 };
 

src/GuppyDataExplorer/TierAccessSelector/index.jsx

@@ -84,14 +84,19 @@ class TierAccessSelector extends React.Component {
                 </div>
               </div>
               {
-                this.state.selected !== 'with-access' && (
+                this.state.selected !== 'with-access' && !this.props.hideGetAccessButton && (
                   <div className='tier-access-selector__button-wrapper'>
                     <Button
                       label='Get Access'
                       className='tier-access-selector__button'
                       buttonType='default'
+                      enabled={!!(this.props.getAccessButtonLink)}
+                      tooltipEnabled={!(this.props.getAccessButtonLink)}
+                      tooltipText='Coming soon'
                       onClick={
-                        () => { window.open(this.props.getAccessButtonLink); }
+                        (this.props.getAccessButtonLink) ? (
+                          () => { window.open(this.props.getAccessButtonLink); }
+                        ) : (() => {})
                       }
                     />
                   </div>
@@ -110,11 +115,13 @@ TierAccessSelector.propTypes = {
   // paramter will be one of: 'with-access', 'without-access', or 'all-data'
   onSelectorChange: PropTypes.func,
   getAccessButtonLink: PropTypes.string,
+  hideGetAccessButton: PropTypes.bool,
 };
 
 TierAccessSelector.defaultProps = {
   onSelectorChange: () => {},
-  getAccessButtonLink: 'https://gen3.org/',
+  getAccessButtonLink: undefined,
+  hideGetAccessButton: false,
 };
 
 export default TierAccessSelector;

src/GuppyDataExplorer/index.jsx

@@ -109,6 +109,7 @@ class Explorer extends React.Component {
             tierAccessLevel={tierAccessLevel}
             tierAccessLimit={tierAccessLimit}
             getAccessButtonLink={config.dataExplorerConfig.getAccessButtonLink}
+            hideGetAccessButton={config.dataExplorerConfig.hideGetAccessButton}
           />
         </div>
       </div>