From 5e4ba38309f01d1b1c5db1116772be9fe29e6511 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Mon, 13 Feb 2023 19:56:44 +0200
Subject: [PATCH] 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
---
 .../block-save-wrapper.test.tsx.snap          |  9 ----
 .../formHelpers/block-save-wrapper.test.tsx   | 10 ----
 .../formHelpers/block-save-wrapper.tsx        | 17 -------
 .../components/formHelpers/form-fields.tsx    | 51 +++++++++----------
 client/src/components/formHelpers/form.tsx    | 17 +++----
 client/src/components/formHelpers/index.tsx   |  1 -
 .../Challenges/projects/tool-panel.tsx        |  6 +--
 7 files changed, 33 insertions(+), 78 deletions(-)
 delete mode 100644 client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap
 delete mode 100644 client/src/components/formHelpers/block-save-wrapper.test.tsx
 delete mode 100644 client/src/components/formHelpers/block-save-wrapper.tsx

diff --git a/client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap b/client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap
deleted file mode 100644
index b088aec7c3c..00000000000
--- a/client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<BlockSaveWrapper /> snapshot 1`] = `
-<div>
-  <div
-    style="padding: 0px 15px;"
-  />
-</div>
-`;
diff --git a/client/src/components/formHelpers/block-save-wrapper.test.tsx b/client/src/components/formHelpers/block-save-wrapper.test.tsx
deleted file mode 100644
index 25e9acff3bc..00000000000
--- a/client/src/components/formHelpers/block-save-wrapper.test.tsx
+++ /dev/null
@@ -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();
-});
diff --git a/client/src/components/formHelpers/block-save-wrapper.tsx b/client/src/components/formHelpers/block-save-wrapper.tsx
deleted file mode 100644
index 79186be5deb..00000000000
--- a/client/src/components/formHelpers/block-save-wrapper.tsx
+++ /dev/null
@@ -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;
diff --git a/client/src/components/formHelpers/form-fields.tsx b/client/src/components/formHelpers/form-fields.tsx
index ef308ae6794..2d737f5da6c 100644
--- a/client/src/components/formHelpers/form-fields.tsx
+++ b/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>
+    </>
   );
 }
 
diff --git a/client/src/components/formHelpers/form.tsx b/client/src/components/formHelpers/form.tsx
index 64c174decee..ff4d6f87a51 100644
--- a/client/src/components/formHelpers/form.tsx
+++ b/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>
diff --git a/client/src/components/formHelpers/index.tsx b/client/src/components/formHelpers/index.tsx
index d1f6f04d5e8..37b3b9ef31b 100644
--- a/client/src/components/formHelpers/index.tsx
+++ b/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 };
diff --git a/client/src/templates/Challenges/projects/tool-panel.tsx b/client/src/templates/Challenges/projects/tool-panel.tsx
index 46a1e3cb820..d7cca68c119 100644
--- a/client/src/templates/Challenges/projects/tool-panel.tsx
+++ b/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>
+    </>
   );
 }