refactor(client): delete block save wrapper (#49217)

* refactor(client): delete block save wrapper

* Clean bloating divs and extra css import

* remove the blocksave wrapper snapshot

client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<BlockSaveWrapper /> snapshot 1`] = `
-<div>
-  <div
-    style="padding: 0px 15px;"
-  />
-</div>
-`;

client/src/components/formHelpers/block-save-wrapper.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import BlockSaveWrapper from './block-save-wrapper';
-
-test('<BlockSaveWrapper /> snapshot', () => {
-  const { container } = render(<BlockSaveWrapper />);
-
-  expect(container).toMatchSnapshot();
-});

client/src/components/formHelpers/block-save-wrapper.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-const style = {
-  padding: '0 15px'
-};
-
-function BlockSaveWrapper({
-  children
-}: {
-  children?: React.ReactElement | null;
-}): JSX.Element {
-  return <div style={style}>{children}</div>;
-}
-
-BlockSaveWrapper.displayName = 'BlockSaveWrapper';
-
-export default BlockSaveWrapper;

client/src/components/formHelpers/form-fields.tsx

@@ -1,6 +1,5 @@
 import {
   Alert,
-  Col,
   ControlLabel,
   FormControl,
   FormGroup,
@@ -80,7 +79,7 @@ function FormFields(props: FormFieldsProps): JSX.Element {
     ) : null;
   };
   return (
-    <div>
+    <>
       {formFields
         .filter(formField => !ignored.includes(formField.name))
         .map(({ name, label }) => (
@@ -93,35 +92,33 @@ function FormFields(props: FormFieldsProps): JSX.Element {
                 name in placeholders ? placeholders[name] : '';
               const isURL = types[name] === 'url';
               return (
-                <Col key={key} xs={12}>
-                  <FormGroup>
-                    {type === 'hidden' ? null : (
-                      <ControlLabel htmlFor={key}>{label}</ControlLabel>
-                    )}
-                    <FormControl
-                      componentClass={type === 'textarea' ? type : 'input'}
-                      id={key}
-                      name={name}
-                      onChange={onChange}
-                      placeholder={placeholder}
-                      required={required.includes(name)}
-                      rows={4}
-                      type={type}
-                      value={value as string}
-                    />
-                    {nullOrWarning(
-                      value as string,
-                      !pristine && error,
-                      isURL,
-                      name
-                    )}
-                  </FormGroup>
-                </Col>
+                <FormGroup key={key}>
+                  {type === 'hidden' ? null : (
+                    <ControlLabel htmlFor={key}>{label}</ControlLabel>
+                  )}
+                  <FormControl
+                    componentClass={type === 'textarea' ? type : 'input'}
+                    id={key}
+                    name={name}
+                    onChange={onChange}
+                    placeholder={placeholder}
+                    required={required.includes(name)}
+                    rows={4}
+                    type={type}
+                    value={value as string}
+                  />
+                  {nullOrWarning(
+                    value as string,
+                    !pristine && error,
+                    isURL,
+                    name
+                  )}
+                </FormGroup>
               );
             }}
           </Field>
         ))}
-    </div>
+    </>
   );
 }
 

client/src/components/formHelpers/form.tsx

@@ -12,7 +12,6 @@ import {
 import FormFields, { FormOptions } from './form-fields';
 
 import { default as BlockSaveButton } from './block-save-button';
-import { default as BlockSaveWrapper } from './block-save-wrapper';
 
 type URLValues = {
   [key: string]: string;
@@ -105,15 +104,13 @@ function DynamicForm({
           style={{ width: '100%' }}
         >
           <FormFields formFields={formFields} options={options} />
-          <BlockSaveWrapper>
-            {hideButton ? null : (
-              <BlockSaveButton
-                disabled={(pristine && !enableSubmit) || (error as boolean)}
-              >
-                {buttonText ? buttonText : null}
-              </BlockSaveButton>
-            )}
-          </BlockSaveWrapper>
+          {hideButton ? null : (
+            <BlockSaveButton
+              disabled={(pristine && !enableSubmit) || (error as boolean)}
+            >
+              {buttonText ? buttonText : null}
+            </BlockSaveButton>
+          )}
         </form>
       )}
     </Form>

client/src/components/formHelpers/index.tsx

@@ -1,5 +1,4 @@
 import { default as Form, ValidatedValues } from './form';
 
 export { default as BlockSaveButton } from './block-save-button';
-export { default as BlockSaveWrapper } from './block-save-wrapper';
 export { Form, ValidatedValues };

client/src/templates/Challenges/projects/tool-panel.tsx

@@ -6,8 +6,6 @@ import { bindActionCreators, Dispatch } from 'redux';
 
 import { openModal } from '../redux/actions';
 
-import './tool-panel.css';
-
 const mapStateToProps = () => ({});
 
 const mapDispatchToProps = (dispatch: Dispatch) =>
@@ -30,7 +28,7 @@ function ToolPanel({
   t
 }: ToolPanelProps): JSX.Element {
   return (
-    <div className='tool-panel-group project-tool-panel'>
+    <>
       {guideUrl && (
         <Button
           block={true}
@@ -50,7 +48,7 @@ function ToolPanel({
       >
         {t('buttons.ask-for-help')}
       </Button>
-    </div>
+    </>
   );
 }