refactor(client): clean extra component and extra unneeded imports (#49391)

* feat: remove extra unnecessary code

* clean the unique way that component was handled

* make bsSize optional

* update snapshot to account for the other button styles

* add comment for our future selves

* clean the changes file

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

@@ -1,16 +0,0 @@
-import { Button } from '@freecodecamp/react-bootstrap';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-function BlockSaveButton(props?: Record<string, unknown>): JSX.Element {
-  const { t } = useTranslation();
-  return (
-    <Button block={true} bsStyle='primary' {...props} type='submit'>
-      {props?.children || t('buttons.save')}
-    </Button>
-  );
-}
-
-BlockSaveButton.displayName = 'BlockSaveButton';
-
-export default BlockSaveButton;

client/src/components/formHelpers/form.test.tsx

@@ -1,9 +1,9 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
-import Form, { FormProps } from './form';
+import { StrictSolutionForm, StrictSolutionFormProps } from './form';
 
-const defaultTestProps: FormProps = {
+const defaultTestProps: StrictSolutionFormProps = {
   buttonText: 'Submit',
   formFields: [
     { name: 'name', label: 'name Label' },
@@ -21,7 +21,7 @@ const defaultTestProps: FormProps = {
 };
 
 test('should render', () => {
-  render(<Form {...defaultTestProps} />);
+  render(<StrictSolutionForm {...defaultTestProps} />);
 
   const nameInput = screen.getByLabelText(/name Label/);
   expect(nameInput).not.toBeRequired();
@@ -41,7 +41,7 @@ test('should render with default values', () => {
   const nameValue = 'John';
 
   render(
-    <Form
+    <StrictSolutionForm
       {...defaultTestProps}
       enableSubmit={true}
       initialValues={{ name: nameValue, website: websiteValue }}
@@ -66,7 +66,7 @@ test('should submit', () => {
   };
   const websiteValue = 'http://mysite.com';
 
-  render(<Form {...props} />);
+  render(<StrictSolutionForm {...props} />);
 
   const websiteInput = screen.getByLabelText(/WebSite label/);
   fireEvent.change(websiteInput, { target: { value: websiteValue } });

client/src/components/formHelpers/form.tsx

@@ -2,6 +2,7 @@ import React, { FormEvent } from 'react';
 import { Form } from 'react-final-form';
 import normalizeUrl from 'normalize-url';
 
+import BlockSaveButton from '../helpers/form/block-save-button';
 import {
   localhostValidator,
   editorValidator,
@@ -11,8 +12,6 @@ import {
 } from './form-validators';
 import FormFields, { FormOptions } from './form-fields';
 
-import { default as BlockSaveButton } from './block-save-button';
-
 type URLValues = {
   [key: string]: string;
 };
@@ -69,27 +68,25 @@ function formatUrlValues(
   return validatedValues;
 }
 
-export type FormProps = {
+export type StrictSolutionFormProps = {
   buttonText?: string;
   enableSubmit?: boolean;
   formFields: { name: string; label: string }[];
-  hideButton?: boolean;
   id: string;
   initialValues?: Record<string, unknown>;
   options: FormOptions;
   submit: (values: ValidatedValues, ...args: unknown[]) => void;
 };
 
-function DynamicForm({
+export const StrictSolutionForm = ({
   id,
   formFields,
   initialValues,
   options,
   submit,
   buttonText,
-  enableSubmit,
-  hideButton
-}: FormProps): JSX.Element {
+  enableSubmit
+}: StrictSolutionFormProps): JSX.Element => {
   return (
     <Form
       initialValues={initialValues}
@@ -104,19 +101,14 @@ function DynamicForm({
           style={{ width: '100%' }}
         >
           <FormFields formFields={formFields} options={options} />
-          {hideButton ? null : (
-            <BlockSaveButton
-              disabled={(pristine && !enableSubmit) || (error as boolean)}
-            >
-              {buttonText ? buttonText : null}
-            </BlockSaveButton>
-          )}
+          <BlockSaveButton
+            disabled={(pristine && !enableSubmit) || (error as boolean)}
+            bgSize='none'
+          >
+            {buttonText}
+          </BlockSaveButton>
         </form>
       )}
     </Form>
   );
-}
-
-DynamicForm.displayName = 'DynamicForm';
-
-export default DynamicForm;
+};

client/src/components/formHelpers/index.tsx

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

client/src/components/helpers/form/__snapshots__/block-save-button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<BlockSaveButton /> snapshot 1`] = `
 <div>
   <button
-    class="btn btn-primary btn-block"
+    class="btn btn-lg btn-primary btn-block"
     type="submit"
   >
     buttons.save

client/src/components/helpers/form/block-save-button.tsx

@@ -4,17 +4,21 @@ import { useTranslation } from 'react-i18next';
 
 function BlockSaveButton({
   children,
+  bgSize,
   ...restProps
 }: {
   children?: React.ReactNode;
   disabled?: boolean;
+  bgSize?: string;
 }): JSX.Element {
   const { t } = useTranslation();
 
   return (
     <Button
       block={true}
-      bsSize='lg'
+      // the button is used to submit solutions in projects that require external URL
+      // these buttons don't use bgSize, that's why the bgSize is optional.
+      bsSize={bgSize || 'lg'}
       bsStyle='primary'
       type='submit'
       {...restProps}

client/src/templates/Challenges/projects/solution-form.tsx

@@ -9,21 +9,24 @@ import {
   frontEndProject,
   pythonProject
 } from '../../../../utils/challenge-types';
-import { Form, ValidatedValues } from '../../../components/formHelpers';
+import {
+  StrictSolutionForm,
+  ValidatedValues
+} from '../../../components/formHelpers/form';
 
 interface SubmitProps {
   showCompletionModal: boolean;
 }
 
-interface FormProps extends WithTranslation {
+interface SolutionFormProps extends WithTranslation {
   challengeType: number;
   description?: string;
   onSubmit: (arg0: SubmitProps) => void;
   updateSolutionForm: (arg0: Record<string, unknown>) => void;
 }
 
-export class SolutionForm extends Component<FormProps> {
-  constructor(props: FormProps) {
+export class SolutionForm extends Component<SolutionFormProps> {
+  constructor(props: SolutionFormProps) {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -115,7 +118,7 @@ export class SolutionForm extends Component<FormProps> {
     }
 
     return (
-      <Form
+      <StrictSolutionForm
         buttonText={`${buttonCopy}`}
         formFields={formFields}
         id={solutionFormID}