Ability to specify if form field labels should be shown (#290)

Author: rawagner

src/components/CreateDeviceRow/CreateDeviceRow.js

@@ -33,6 +33,7 @@ export class CreateDeviceRow extends React.Component {
         actions={actions}
         onFormChange={this.onFormChange}
         columnSizes={columnSizes}
+        showLabels={false}
       />
     );
   }

src/components/CreateDeviceRow/tests/__snapshots__/CreateDeviceRow.test.js.snap

@@ -43,5 +43,6 @@ exports[`<CreateDeviceRow /> renders correctly 1`] = `
     }
   }
   onFormChange={[Function]}
+  showLabels={false}
 />
 `;

src/components/Dialog/CloneDialog/tests/__snapshots__/CloneDialog.test.js.snap

@@ -122,6 +122,7 @@ exports[`<CloneDialog /> renders correctly 1`] = `
         horizontal={true}
         labelSize={2}
         onFormChange={[Function]}
+        showLabels={true}
         textPosition="text-right"
       />
     </div>

src/components/Form/FormFactory.js

@@ -188,7 +188,16 @@ const getLabel = field =>
     </React.Fragment>
   );
 
-const getFormGroups = ({ fields, fieldsValues, onFormChange, textPosition, labelSize, controlSize, horizontal }) =>
+const getFormGroups = ({
+  fields,
+  fieldsValues,
+  onFormChange,
+  textPosition,
+  showLabels,
+  labelSize,
+  controlSize,
+  horizontal,
+}) =>
   Object.keys(fields)
     .filter(key => fields[key] && (!fields[key].isVisible || fields[key].isVisible(fieldsValues)))
     .map(key => {
@@ -216,7 +225,7 @@ const getFormGroups = ({ fields, fieldsValues, onFormChange, textPosition, label
 
       let label;
 
-      if (field.title) {
+      if (showLabels && field.title) {
         if (horizontal) {
           label = (
             <Col sm={labelSize} className={textPosition}>
@@ -253,11 +262,11 @@ const getFormGroups = ({ fields, fieldsValues, onFormChange, textPosition, label
       );
     });
 
-export const InlineFormFactory = ({ fields, fieldsValues, onFormChange }) =>
-  getFormGroups({ fields, fieldsValues, onFormChange, horizontal: true });
+export const InlineFormFactory = ({ fields, fieldsValues, onFormChange, showLabels }) =>
+  getFormGroups({ fields, fieldsValues, onFormChange, horizontal: true, showLabels });
 
-export const ListFormFactory = ({ fields, fieldsValues, onFormChange, actions, columnSizes }) => {
-  const formGroups = getFormGroups({ fields, fieldsValues, onFormChange });
+export const ListFormFactory = ({ fields, fieldsValues, onFormChange, actions, columnSizes, showLabels }) => {
+  const formGroups = getFormGroups({ fields, fieldsValues, onFormChange, showLabels });
   const form = formGroups.map((formGroup, index) => (
     <Col
       key={`col-${index}`}
@@ -278,12 +287,17 @@ export const ListFormFactory = ({ fields, fieldsValues, onFormChange, actions, c
   );
 };
 
+ListFormFactory.defaultProps = {
+  showLabels: true,
+};
+
 ListFormFactory.propTypes = {
   fields: PropTypes.object.isRequired,
   fieldsValues: PropTypes.object.isRequired,
   onFormChange: PropTypes.func.isRequired,
   actions: PropTypes.object.isRequired,
   columnSizes: PropTypes.object.isRequired,
+  showLabels: PropTypes.bool,
 };
 
 export const FormFactory = ({
@@ -295,6 +309,7 @@ export const FormFactory = ({
   controlSize,
   formClassName,
   horizontal,
+  showLabels,
 }) => {
   const formGroups = getFormGroups({
     fields,
@@ -304,6 +319,7 @@ export const FormFactory = ({
     labelSize,
     controlSize,
     horizontal,
+    showLabels,
   });
   return (
     <Form horizontal={horizontal} className={formClassName}>
@@ -318,6 +334,7 @@ FormFactory.defaultProps = {
   controlSize: 5,
   formClassName: undefined,
   horizontal: true,
+  showLabels: true,
 };
 
 FormFactory.propTypes = {
@@ -329,4 +346,5 @@ FormFactory.propTypes = {
   controlSize: PropTypes.number,
   formClassName: PropTypes.string,
   horizontal: PropTypes.bool,
+  showLabels: PropTypes.bool,
 };

src/components/Form/tests/__snapshots__/FormFactory.test.js.snap

@@ -122,6 +122,7 @@ exports[`<FormFactory /> renders correctly 1`] = `
   horizontal={true}
   labelSize={3}
   onFormChange={[MockFunction]}
+  showLabels={true}
   textPosition="text-right"
 >
   <Form

src/components/VmConsoles/tests/__snapshots__/DesktopViewerSelector.test.js.snap

@@ -38,6 +38,7 @@ exports[`<DesktopViewerSelector /> renders correctly 1`] = `
     horizontal={true}
     labelSize={3}
     onFormChange={[Function]}
+    showLabels={true}
     textPosition="text-right"
   />
   <RdpServiceNotConfigured

src/components/Wizard/CreateVmWizard/tests/__snapshots__/BasicSettingsTab.test.js.snap

@@ -360,6 +360,7 @@ exports[`<BasicSettingsTab /> for Create VM Template renders correctly 1`] = `
   horizontal={true}
   labelSize={3}
   onFormChange={[Function]}
+  showLabels={true}
   textPosition="text-right"
 />
 `;
@@ -724,6 +725,7 @@ exports[`<BasicSettingsTab /> renders correctly 1`] = `
   horizontal={true}
   labelSize={3}
   onFormChange={[Function]}
+  showLabels={true}
   textPosition="text-right"
 />
 `;

src/components/Wizard/CreateVmWizard/tests/__snapshots__/NetworksTab.test.js.snap

@@ -100,6 +100,7 @@ exports[`<NetworksTab /> renders correctly 1`] = `
     horizontal={true}
     labelSize={2}
     onFormChange={[Function]}
+    showLabels={true}
     textPosition="text-left"
   />
 </Fragment>

src/components/Wizard/CreateVmWizard/tests/__snapshots__/StorageTab.test.js.snap

@@ -107,6 +107,7 @@ exports[`<StorageTab /> renders correctly 1`] = `
     horizontal={true}
     labelSize={2}
     onFormChange={[Function]}
+    showLabels={true}
     textPosition="text-left"
   />
 </Fragment>