removes Columns from Upload Add modal

src/client/components/elements/ListControls/index.js

@@ -14,6 +14,7 @@ const ListControls = (props) => {
   const {
     handleChange,
     collection,
+    disableColumns,
     collection: {
       fields,
       useAsTitle,
@@ -71,35 +72,43 @@ const ListControls = (props) => {
           fieldName={titleField ? titleField.name : undefined}
           fieldLabel={titleField ? titleField.label : undefined}
         />
-        <Button
-          className={`${baseClass}__toggle-columns`}
-          buttonStyle={visibleDrawer === 'columns' ? undefined : 'secondary'}
-          onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : false)}
-          icon="chevron"
-          iconStyle="none"
-        >
-          Columns
-        </Button>
-        <Button
-          className={`${baseClass}__toggle-where`}
-          buttonStyle={visibleDrawer === 'where' ? undefined : 'secondary'}
-          onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : false)}
-          icon="chevron"
-          iconStyle="none"
-        >
-          Filters
-        </Button>
+        <div className={`${baseClass}__buttons`}>
+          <div className={`${baseClass}__buttons-wrap`}>
+            {!disableColumns && (
+              <Button
+                className={`${baseClass}__toggle-columns`}
+                buttonStyle={visibleDrawer === 'columns' ? undefined : 'secondary'}
+                onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : false)}
+                icon="chevron"
+                iconStyle="none"
+              >
+                Columns
+              </Button>
+            )}
+            <Button
+              className={`${baseClass}__toggle-where`}
+              buttonStyle={visibleDrawer === 'where' ? undefined : 'secondary'}
+              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : false)}
+              icon="chevron"
+              iconStyle="none"
+            >
+              Filters
+            </Button>
+          </div>
+        </div>
       </div>
-      <AnimateHeight
-        className={`${baseClass}__columns`}
-        height={visibleDrawer === 'columns' ? 'auto' : 0}
-      >
-        <ColumnSelector
-          collection={collection}
-          defaultColumns={defaultColumns}
-          handleChange={setColumns}
-        />
-      </AnimateHeight>
+      {!disableColumns && (
+        <AnimateHeight
+          className={`${baseClass}__columns`}
+          height={visibleDrawer === 'columns' ? 'auto' : 0}
+        >
+          <ColumnSelector
+            collection={collection}
+            defaultColumns={defaultColumns}
+            handleChange={setColumns}
+          />
+        </AnimateHeight>
+      )}
       <AnimateHeight
         className={`${baseClass}__where`}
         height={visibleDrawer === 'where' ? 'auto' : 0}
@@ -113,7 +122,12 @@ const ListControls = (props) => {
   );
 };
 
+ListControls.defaultProps = {
+  disableColumns: false,
+};
+
 ListControls.propTypes = {
+  disableColumns: PropTypes.bool,
   collection: PropTypes.shape({
     useAsTitle: PropTypes.string,
     fields: PropTypes.arrayOf(PropTypes.shape),

src/client/components/elements/ListControls/index.scss

@@ -15,9 +15,20 @@
     }
   }
 
+  &__buttons {
+    margin-left: $baseline;
+  }
+
+  &__buttons-wrap {
+    display: flex;
+    margin-left: - base(.5);
+    margin-right: - base(.5);
+    width: calc(100% + #{$baseline});
+  }
+
   &__toggle-columns,
   &__toggle-where {
-    margin: 0 0 0 $baseline;
+    margin: 0 base(.5);
     min-width: 140px;
 
     &.btn--style-primary {
@@ -33,9 +44,8 @@
   }
 
   @include mid-break {
-    &__toggle-columns,
-    &__toggle-where {
-      margin: 0 0 0 base(.5);
+    &__buttons {
+      margin-left: base(.5);
     }
   }
 
@@ -49,17 +59,17 @@
       width: 100%;
     }
 
+    &__buttons {
+      margin: 0;
+    }
+
+    &__buttons {
+      width: 100%;
+    }
+
     &__toggle-columns,
     &__toggle-where {
-      width: calc(50% - #{base(.25)});
-    }
-
-    &__toggle-columns {
-      margin: 0 base(.25) 0 0;
-    }
-
-    &__toggle-where {
-      margin: 0 0 0 base(.25);
+      flex-grow: 1;
     }
   }
 }

src/client/components/forms/field-types/Upload/SelectExisting/index.js

@@ -74,6 +74,7 @@ const SelectExistingUploadModal = (props) => {
           />
         </header>
         <ListControls
+          disableColumns
           handleChange={setListControls}
           collection={{
             ...collection,