Multiline textarea copy, Scorecard no-title card, dialog always appea…

…rs on top

.vscode/settings.json

@@ -14,5 +14,7 @@
     "**/node_modules": true,
     "**/build": true,
     "**/coverage": true
-  }
+  },
+  "tslint.configFile": "client/tslint.json",
+  "tslint.nodePath": "client/node_modules"
 }

client/src/components/Card/Card.tsx

@@ -13,6 +13,7 @@ interface ICardProps {
   widgets?: React.ReactNode;
   titleStyle?: React.CSSProperties;
   contentStyle?: React.CSSProperties;
+  hideTitle?: boolean;
 }
 
 interface ICardState {
@@ -21,20 +22,24 @@ interface ICardState {
 
 export default class Card extends React.PureComponent<ICardProps, ICardState> {
 
+  static defaultProps = {
+    hideTitle: false
+  };
+
   state = {
     hover: false,
   };
 
   constructor(props: ICardProps) {
     super(props);
   }
-  
+
   render() {
-    const { id, title, subtitle, children, titleStyle, contentStyle } = this.props;
+    const { id, title, subtitle, children, titleStyle, contentStyle, hideTitle } = this.props;
     const { hover } = this.state;
 
     let elements: React.ReactNode[] = [];
-    if (title) {
+    if (title && !hideTitle) {
       elements.push(
         <span key={0}>{title}</span>
       );

client/src/components/Card/Settings/Settings.tsx

@@ -193,6 +193,7 @@ export default class Edit extends React.PureComponent<ISettingsProps, ISettingsS
         onHide={this.closeDialog}
         dialogStyle={{ width: '80%' }}
         contentStyle={{ margin: '0px', padding: '0px' }}
+        lastChild={true}
       >
         <Toolbar
           colored
@@ -251,7 +252,7 @@ export default class Edit extends React.PureComponent<ISettingsProps, ISettingsS
       this.toast('Browser not supported');
       return;
     }
-    const input = document.createElement('input');
+    const input = document.createElement('textarea');
     input.style.position = 'fixed';
     input.style.opacity = '0';
     input.value = text;

client/src/components/Card/Settings/SettingsStore.tsx

@@ -245,7 +245,7 @@ class SettingsStore extends AbstractStoreModel<ISettingsStoreState> implements I
       // merge
       target.data = Object.assign(target.data, data); 
       return a;
-    }, []);
+    },                     []);
 
     // Order by largest data set
     result.sort((a, b) => b.data.toString().length - a.data.toString().length);
@@ -261,6 +261,7 @@ class SettingsStore extends AbstractStoreModel<ISettingsStoreState> implements I
     // Move '|' to start of each line
     let str = query.replace(/(\|)((\s??\n\s??)(.+?))/gm, '\n| $4'); 
     str = str.replace(/(and)/gm, '\n  $1'); // force newline on 'and'
+    str = str.replace(/([^\(\'\"])(,\s*)(?=(\w+[^\)\'\"]\w+))/gim, '$1,\n  '); // force newline on ','
     const timespanQuery = '| where timestamp > ago(' + timespan + ') \n';
     // Checks for '|' at start
     const matches = str.match(/^(\s*\||\s*\w+\s*\|)/ig); 
@@ -280,15 +281,13 @@ class SettingsStore extends AbstractStoreModel<ISettingsStoreState> implements I
       return str;
     }
     // Apply selected filters to connected query
-    filters.every((filter) => {
+    filters.forEach((filter) => {
       const { dependency, queryProperty } = filter;
-      const selectedFilters = dependencies[dependency] || [];
+      const selectedFilters: string[] = dependencies[dependency] || [];
       if (selectedFilters.length > 0) {
         const f = '| where ' + selectedFilters.map((value) => `${queryProperty}=="${value}"`).join(' or ');
         str = `${str}${f} \n`;
-        return true;
       }
-      return false;
     });
     return str;
   }

client/src/components/generic/Scorecard/index.tsx

@@ -16,7 +16,11 @@ const styles = {
     padding: 0,
     verticalAlign: 'middle'
   } as React.CSSProperties,
-  scorecard: {
+  title: {
+    margin: 0,
+    padding: 0,
+  } as React.CSSProperties,
+  content: {
     margin: 0,
     padding: 0,
     overflow: 'visible'
@@ -95,7 +99,7 @@ export default class Scorecard extends GenericComponent<IScorecardProps, any> {
       this.valueToCard(val, idx, className, colorPosition, scorecardWidth));
 
     return (
-      <Card id={id} title={title} titleStyle={styles.scorecard} contentStyle={styles.scorecard}>
+      <Card id={id} title={title} hideTitle={true} titleStyle={styles.title} contentStyle={styles.content}>
         <div className="md-grid--no-spacing md-card-scorecard">
           {cards}
         </div>