Merge pull request #947 from chatatechnologies/develop

prepare for production release
chatatechnologies · Nov 20, 2024 · 30baaf8 · 30baaf8
2 parents 5463216 + 518882b
commit 30baaf8
Show file tree

Hide file tree

Showing 14 changed files with 148 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-autoql",
-  "version": "8.8.33",
+  "version": "8.8.47",
   "description": "React Widget Library",
   "main": "dist/autoql.cjs.js",
   "module": "dist/autoql.esm.js",
@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
-    "autoql-fe-utils": "1.6.8",
+    "autoql-fe-utils": "1.6.11",
     "axios": "^1.4.0",
     "classnames": "^2.5.1",
     "d3-array": "^2.3.3",

diff --git a/src/components/ChataTable/ChataTable.js b/src/components/ChataTable/ChataTable.js
@@ -278,7 +278,7 @@ export default class ChataTable extends React.Component {
       this.setFilters(this.props?.initialTableParams?.filter)
       this.setHeaderInputEventListeners()
       if (!this.props.hidden) {
-        this.setTableHeight('100%')
+        this.setTableHeight()
       }
     }
   }
@@ -1382,7 +1382,10 @@ export default class ChataTable extends React.Component {
 
     return (
       <div className='table-row-count'>
-        <span>{`Scrolled ${currentRowsFormatted} / ${totalRowCount > rowLimit ? rowLimitFormatted + '+' : totalRowsFormatted} rows`}
+        <span>
+          {`Scrolled ${currentRowsFormatted} / ${
+            totalRowCount > rowLimit ? rowLimitFormatted + '+' : totalRowsFormatted
+          } rows`}
         </span>
       </div>
     )

diff --git a/src/components/Icon/Icon.scss b/src/components/Icon/Icon.scss
@@ -9,7 +9,6 @@
   box-sizing: content-box;
   height: 1em;
   width: 1em;
-
   &.react-autoql-icon-success {
     color: var(--react-autoql-success-color) !important;
   }
@@ -34,8 +33,8 @@
   border: 1px solid var(--react-autoql-background-color-secondary);
   width: 0.5em;
   height: 0.5em;
-  top: -0.1em;
-  right: -0.25em;
+  top: -4px;
+  right: -4px;
   border-radius: 50%;
 }
 

diff --git a/src/components/Notifications/DataAlerts/DataAlertListItem/DataAlertListItem.js b/src/components/Notifications/DataAlerts/DataAlertListItem/DataAlertListItem.js
@@ -217,7 +217,7 @@ export default class DataAlertListItem extends React.Component {
     if (hasError) {
       return (
         <div
-          className={`data-alert-state data-alert-error ${status}`}
+          className={`data-alert-state data-alert-warning ${status}`}
           data-tooltip-id={this.props.tooltipID}
           data-tooltip-html={
             isCustom

diff --git a/src/components/Notifications/DataAlerts/DataAlertListItem/DataAlertListItem.scss b/src/components/Notifications/DataAlerts/DataAlertListItem/DataAlertListItem.scss
@@ -214,9 +214,15 @@
         color: var(--react-autoql-text-color-primary);
       }
 
+      &.data-alert-warning {
+        font-size: x-large;
+        color: var(--react-autoql-warning-color);
+        opacity: 1;
+      }
+
       &.data-alert-error {
         font-size: x-large;
-        color: #f04438;
+        color: var(--react-autoql-error-color);
         opacity: 1;
       }
     }
@@ -242,9 +248,14 @@
         }
       }
 
+      &.data-alert-warning {
+        cursor: pointer;
+        color: var(--react-autoql-warning-color);
+      }
+
       &.data-alert-error {
         cursor: pointer;
-        color: #f04438;
+        color: var(--react-autoql-error-color);
       }
     }
 

diff --git a/src/components/Notifications/DataAlerts/DataAlerts.scss b/src/components/Notifications/DataAlerts/DataAlerts.scss
@@ -161,8 +161,13 @@
             color: var(--react-autoql-text-color-primary);
           }
 
-          &.data-alert-error {
+          &.data-alert-warning {
+            cursor: pointer;
             color: var(--react-autoql-warning-color);
+          }
+
+          &.data-alert-error {
+            color: var(--react-autoql-error-color);
             opacity: 1;
           }
         }
@@ -188,10 +193,15 @@
             }
           }
 
-          &.data-alert-error {
+          &.data-alert-warning {
             cursor: pointer;
             color: var(--react-autoql-warning-color);
           }
+
+          &.data-alert-error {
+            cursor: pointer;
+            color: var(--react-autoql-error-color);
+          }
         }
 
         .react-autoql-icon-filled {

diff --git a/src/components/Notifications/JoinColumnSelectionTable/JoinColumnSelectionTable.js b/src/components/Notifications/JoinColumnSelectionTable/JoinColumnSelectionTable.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import './JoinColumnSelectionTable.scss'
 import { Select } from '../../Select'
 import { Icon } from '../../Icon'
-import { getQuerySelectableJoinColumns, getDefaultJoinColumnAndDisplayNameAndJoinColumnsIndices } from 'autoql-fe-utils'
+import { getQuerySelectableJoinColumns, getDefaultJoinColumns } from 'autoql-fe-utils'
+
 export default class JoinColumnSelectionTable extends React.Component {
   constructor(props) {
     super(props)
@@ -18,6 +19,7 @@ export default class JoinColumnSelectionTable extends React.Component {
   }
 
   static propTypes = {
+    isReadOnly: PropTypes.bool,
     storedInitialData: PropTypes.arrayOf(
       PropTypes.shape({
         join_columns: PropTypes.arrayOf(PropTypes.string),
@@ -39,6 +41,7 @@ export default class JoinColumnSelectionTable extends React.Component {
   }
 
   static defaultProps = {
+    isReadOnly: false,
     storedInitialData: [],
     columnHeaders: [],
     rowHeaders: [],
@@ -58,29 +61,42 @@ export default class JoinColumnSelectionTable extends React.Component {
     secondQueryFirstOptions: [],
     secondQuerySecondOptions: [],
   }
+
   componentDidMount() {
-    const firstDefaultJoinColumn =
-      this.state.firstQueryFirstValue || this.getDefaultJoinColumn(this.props.firstQueryResult)
-    const secondDefaultJoinColumn =
-      this.state.secondQueryFirstValue || this.getDefaultJoinColumn(this.props.secondQueryResult)
-    this.props.onFirstQueryFirstValueChange(firstDefaultJoinColumn)
-    this.props.onSecondQueryFirstValueChange(secondDefaultJoinColumn)
-    if (this.state.firstQuerySecondValue) {
-      this.props.onFirstQuerySecondValueChange(this.state.firstQuerySecondValue)
+    const { firstJoinColumns, secondJoinColumns } = getDefaultJoinColumns(
+      this.props.firstQueryResult,
+      this.props.secondQueryResult,
+    )
+    const isEditingDataAlert = this.props.storedInitialData?.[0]?.join_columns?.[0] !== undefined
+    const hasStoredFirstQuerySecondValue = this.props.storedInitialData?.[0]?.join_columns?.[1] !== undefined
+    const hasStoredSecondQuerySecondValue = this.props.storedInitialData?.[1]?.join_columns?.[1] !== undefined
+    this.props.onFirstQueryFirstValueChange(
+      this.state.firstQueryFirstValue !== '' ? this.state.firstQueryFirstValue : firstJoinColumns?.[0],
+    )
+    this.props.onSecondQueryFirstValueChange(
+      this.state.secondQueryFirstValue !== '' ? this.state.secondQueryFirstValue : firstJoinColumns?.[1],
+    )
+    if (this.state.firstQuerySecondValue || secondJoinColumns?.[0]) {
+      if (isEditingDataAlert && !hasStoredFirstQuerySecondValue) {
+        return
+      }
+      this.props.onFirstQuerySecondValueChange(
+        this.state.firstQuerySecondValue !== '' ? this.state.firstQuerySecondValue : secondJoinColumns?.[0],
+      )
       this.setState({ showSecondRow: true })
     }
 
-    if (this.state.secondQuerySecondValue) {
-      this.props.onSecondQuerySecondValueChange(this.state.secondQuerySecondValue)
+    if (this.state.secondQuerySecondValue || secondJoinColumns?.[1]) {
+      if (isEditingDataAlert && !hasStoredSecondQuerySecondValue) {
+        return
+      }
+      this.props.onSecondQuerySecondValueChange(
+        this.state.secondQuerySecondValue !== '' ? this.state.secondQuerySecondValue : secondJoinColumns?.[1],
+      )
       this.setState({ showSecondRow: true })
     }
   }
 
-  getDefaultJoinColumn = (queryResult) => {
-    const { defaultJoinColumn } = getDefaultJoinColumnAndDisplayNameAndJoinColumnsIndices(queryResult)
-    return defaultJoinColumn?.[0]
-  }
-
   getSelectableJoinColumnsLength() {
     try {
       const firstQueryColumns = this.props.firstQueryResult?.data?.data?.columns || []
@@ -124,7 +140,7 @@ export default class JoinColumnSelectionTable extends React.Component {
           <th>
             <div className='th-content'>
               {this.props.rowHeaders[0]}
-              {!this.state.showSecondRow && selectableJoinColumnsLength > 1 && (
+              {!this.state.showSecondRow && selectableJoinColumnsLength > 1 && !this.props.isReadOnly && (
                 <div className='add-second-join-icon' onClick={() => this.setState({ showSecondRow: true })}>
                   <Icon type='plus' />
                 </div>
@@ -139,6 +155,7 @@ export default class JoinColumnSelectionTable extends React.Component {
               placeholder='Select column from first query'
               value={this.props.firstQueryFirstValue}
               onChange={this.props.onFirstQueryFirstValueChange}
+              isDisabled={this.props.isReadOnly}
             />
           </td>
           <td>
@@ -149,6 +166,7 @@ export default class JoinColumnSelectionTable extends React.Component {
               value={this.props.secondQueryFirstValue}
               onChange={this.props.onSecondQueryFirstValueChange}
               placeholder='Select column from second query'
+              isDisabled={this.props.isReadOnly}
             />
           </td>
         </tr>
@@ -157,9 +175,11 @@ export default class JoinColumnSelectionTable extends React.Component {
             <th>
               <div className='th-content'>
                 {this.props.rowHeaders[1]}
-                <div className='remove-second-join-icon' onClick={this.handleRemoveSecondRow}>
-                  <Icon type='minus' />
-                </div>
+                {!this.props.isReadOnly && (
+                  <div className='remove-second-join-icon' onClick={this.handleRemoveSecondRow}>
+                    <Icon type='minus' />
+                  </div>
+                )}
               </div>
             </th>
             <td>
@@ -170,6 +190,7 @@ export default class JoinColumnSelectionTable extends React.Component {
                 placeholder='Select column from first query'
                 value={this.props.firstQuerySecondValue}
                 onChange={this.props.onFirstQuerySecondValueChange}
+                isDisabled={this.props.isReadOnly}
               />
             </td>
             <td>
@@ -180,6 +201,7 @@ export default class JoinColumnSelectionTable extends React.Component {
                 value={this.props.secondQuerySecondValue}
                 onChange={this.props.onSecondQuerySecondValueChange}
                 placeholder='Select column from second query'
+                isDisabled={this.props.isReadOnly}
               />
             </td>
           </tr>
@@ -191,6 +213,10 @@ export default class JoinColumnSelectionTable extends React.Component {
   render() {
     return (
       <div className='join-column-selection-container'>
+        <div className='join-columns-notice'>
+          Please review the join columns below and adjust if necessary to ensure correct relationships between your
+          datasets.
+        </div>
         <table className='joinable-table'>
           <thead>{this.renderHeaderRow()}</thead>
           <tbody>{this.renderBodyRows()}</tbody>

diff --git a/src/components/Notifications/JoinColumnSelectionTable/JoinColumnSelectionTable.scss b/src/components/Notifications/JoinColumnSelectionTable/JoinColumnSelectionTable.scss
@@ -111,3 +111,10 @@
     }
   }
 }
+.join-column-selection-container {
+  .join-columns-notice {
+    margin-bottom: 12px;
+    color: var(--react-autoql-text-color);
+    font-size: 13px;
+  }
+}
diff --git a/src/components/Notifications/RuleSimple/RuleSimple.js b/src/components/Notifications/RuleSimple/RuleSimple.js
@@ -287,7 +287,6 @@ export default class RuleSimple extends React.Component {
     return (
       <div className='join-column-selection-prompt'>
         <h4>Select join columns for your queries:</h4>
-        <p>Please choose the columns to join your first and second queries.</p>
         <JoinColumnSelectionTable
           columnHeaders={[
             this.state.firstQueryResult?.data?.data?.text || 'Query 1',
@@ -498,6 +497,7 @@ export default class RuleSimple extends React.Component {
             source: 'data_alert_first_query',
             pageSize: 2,
             allowSuggestions: false,
+            newColumns: this.props.initialData?.[0]?.additional_selects,
           })
 
       const fetchSecondQuery = this.shouldFetchSecondQuery()
@@ -581,7 +581,10 @@ export default class RuleSimple extends React.Component {
     const userSelection = this.props.queryResponse?.data?.data?.fe_req?.disambiguation
     const tableFilters = this.state.queryFilters?.filter((f) => f.type === 'table')
     const lockedFilters = this.state.queryFilters?.filter((f) => f.type === 'locked')
-    const additionalSelects = this.props.queryResponse?.data?.data?.fe_req?.additional_selects || []
+    const additionalSelects =
+      this.props.queryResponse?.data?.data?.fe_req?.additional_selects ||
+      this.state.storedInitialData?.[0]?.additional_selects ||
+      []
     const displayOverrides = this.props.queryResponse?.data?.data?.fe_req?.display_overrides || []
     const firstQuerySelectedNumberColumnName = this.state.firstQuerySelectedColumns?.map(
       (index) => this.state.firstQueryResult?.data?.data?.columns[index]?.name,
@@ -1360,6 +1363,7 @@ export default class RuleSimple extends React.Component {
         }}
         selectedColumns={this.state.firstQuerySelectedColumns}
         disabledColumns={disabledColumns}
+        additionalSelectColumns={additionalSelectColumns}
         shouldRender={this.shouldRenderFirstFieldSelectionGrid()}
         queryResponse={this.state.firstQueryResult}
         radio={true}