fix frontend console errors (#4150)

* add missing key

* fix various qb console errors

* code review

frontend/src/metabase/containers/SaveQuestionModal.jsx

@@ -26,7 +26,7 @@ export default class SaveQuestionModal extends Component {
             valid: false,
             details: {
                 name: props.card.name || isStructured ? Query.generateQueryDescription(props.tableMetadata, props.card.dataset_query.query) : "",
-                description: props.card.description || null,
+                description: props.card.description || '',
                 collection_id: props.card.collection_id || null,
                 saveType: props.originalCard ? "overwrite" : "create"
             }
@@ -227,7 +227,7 @@ export default class SaveQuestionModal extends Component {
                                                 <Option
                                                     key={index}
                                                     value={collection.id}
-                                                    icon={collection.id != null && "collection"}
+                                                    icon={collection.id != null ? "collection" : null}
                                                     iconColor={collection.color}
                                                     iconSize={18}
                                                 >

frontend/src/metabase/query_builder/components/DownloadWidget.jsx

@@ -25,6 +25,7 @@ const DownloadWidget = ({ className, card, datasetQuery, isLarge }) =>
                 {["csv", "json"].map(type =>
                     <DownloadButton
                         className="mr1 text-uppercase text-default"
+                        key={type}
                         url={card.id != null ?
                             `/api/card/${card.id}/query/${type}`:
                             `/api/dataset/${type}`

frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx

@@ -276,7 +276,7 @@ export default class GuiQueryEditor extends Component {
                 const breakout = breakouts[i];
 
                 if (breakout == null) {
-                    breakoutList.push(<span className="ml1" />);
+                    breakoutList.push(<span key="nullBreakout" className="ml1" />);
                 }
 
                 breakoutList.push(

frontend/src/metabase/query_builder/components/QueryHeader.jsx

@@ -212,7 +212,10 @@ export default class QueryHeader extends Component {
                 if (this.state.recentlySaved) {
                     // existing card + not editing + recently saved = save confirmation
                     buttonSections.push([
-                        <button key="recentlySaved" className="cursor-pointer bg-white text-success text-strong text-uppercase">
+                        <button
+                            key="recentlySaved"
+                            className="cursor-pointer bg-white text-success text-strong text-uppercase"
+                        >
                             <span>
                                 <Icon name='check' size={12} />
                                 <span className="ml1">Saved</span>
@@ -256,7 +259,11 @@ export default class QueryHeader extends Component {
                     <Tooltip key="delete" tooltip="Delete">
                         <ModalWithTrigger
                             ref="deleteModal"
-                            triggerElement={<span className="text-brand-hover"><Icon name="trash" size={16} /></span>}
+                            triggerElement={
+                                <span className="text-brand-hover">
+                                    <Icon name="trash" size={16} />
+                                </span>
+                            }
                         >
                             <DeleteQuestionModal
                                 card={this.props.card}
@@ -270,6 +277,7 @@ export default class QueryHeader extends Component {
                 buttonSections.push([
                     <ModalWithTrigger
                         ref="move"
+                        key="move"
                         full
                         triggerElement={
                             <Tooltip tooltip="Move question">

frontend/src/metabase/query_builder/components/filters/pickers/TextPicker.jsx

@@ -52,7 +52,10 @@ export default class TextPicker extends Component<*, Props, *> {
             <div>
                 <ul>
                     {values.map((value, index) =>
-                        <li className="FilterInput px1 pt1 relative">
+                        <li
+                            className="FilterInput px1 pt1 relative"
+                            key={index}
+                        >
                             <input
                                 className={cx("input block full border-purple", { "border-error": validations[index] === false })}
                                 type="text"