People can now remove attributes int he data table view

Author: lorem--ipsum

src/client/components/modal/modal.scss

@@ -93,7 +93,7 @@
   .button-bar {
     margin-top: 10px;
 
-    button {
+    button:not(:last-child) {
       margin-right: 8px;
     }
   }

src/client/config/constants.ts

@@ -125,6 +125,7 @@ export const STRINGS = {
   quicklyAddSomeUsing: 'Quickly add some using',
   rawData: 'Raw Data',
   regex: 'Regex',
+  removeAttribute: 'Remove attribute',
   relative: 'Relative',
   save: 'Save',
   segment: 'segment',

src/client/modals/attribute-modal/attribute-modal.scss

@@ -18,6 +18,8 @@
 $checkbox-width: 20px;
 
 .attribute-modal {
+  @import '../../utils/styles/grid';
+
   form {
     @extend %form;
     width: 100%;

src/client/modals/attribute-modal/attribute-modal.tsx

@@ -34,6 +34,7 @@ export interface AttributeModalProps extends React.Props<any> {
   attributeInfo: AttributeInfo;
   onSave?: (attribute: AttributeInfo) => void;
   onClose?: () => void;
+  onRemove?: () => void;
   mode?: 'create' | 'edit';
 }
 
@@ -95,7 +96,7 @@ export class AttributeModal extends React.Component<AttributeModalProps, Attribu
   }
 
   render() {
-    const { attributeInfo, onClose, mode } = this.props;
+    const { attributeInfo, onClose, mode, onRemove } = this.props;
     const { newInstance, canSave, errors } = this.state;
     const saveButtonDisabled = !canSave || attributeInfo.equals(newInstance);
     if (!newInstance) return null;
@@ -142,9 +143,17 @@ export class AttributeModal extends React.Component<AttributeModalProps, Attribu
           />
         </div>
       </form>
-      <div className="button-bar">
-        <Button type="primary" title={okText} onClick={this.save.bind(this)} disabled={saveButtonDisabled} />
-        <Button className="cancel" title={STRINGS.cancel} type="secondary" onClick={onClose}/>
+      <div className="grid-row button-bar">
+        <div className="grid-col-50">
+          <Button type="primary" title={okText} onClick={this.save.bind(this)} disabled={saveButtonDisabled} />
+          <Button className="cancel" title={STRINGS.cancel} type="secondary" onClick={onClose}/>
+        </div>
+        <div className="grid-col-50 right">
+          { onRemove
+            ? <Button className="warn" title={STRINGS.removeAttribute} type="warn" onClick={onRemove}/>
+            : null
+          }
+        </div>
       </div>
     </Modal>;
   }

src/client/views/settings-view/data-table/data-table.scss

@@ -112,6 +112,8 @@
 
           border-right: 1px solid hsla(0, 0%, 87%, 1.00);
 
+          padding: 14px 10px 5px 5px;
+
           &:first-child {
             border-left: 1px solid hsla(0, 0%, 87%, 1.00);
           }

src/client/views/settings-view/data-table/data-table.tsx

@@ -143,10 +143,16 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
       onClose();
     };
 
+    const onRemove = () => {
+      onChange(dataCube.removeAttribute(editedAttribute));
+      onClose();
+    };
+
     return <AttributeModal
       attributeInfo={editedAttribute}
       onClose={onClose}
       onSave={onSave}
+      onRemove={onRemove}
     />;
   }
 

src/common/models/data-cube/data-cube.ts

@@ -830,6 +830,20 @@ export class DataCube implements Instance<DataCubeValue, DataCubeJS> {
     return this.changeAttributes(attributes);
   }
 
+  public removeAttribute(attribute: AttributeInfo): DataCube {
+
+    var index = this.attributes.indexOf(attribute);
+
+    if (index === -1) {
+      throw new Error(`Unknown attribute : ${attribute.toString()}`);
+    }
+
+    var newAttributes = this.attributes.concat();
+    newAttributes.splice(index, 1);
+
+    return this.changeAttributes(newAttributes);
+  }
+
   public appendAttributes(attributes: Attributes): DataCube {
     return this.changeAttributes(this.attributes.concat(attributes));
   }