From 57cfdb542e73e7ceb83b1bd2ae73fe6715cfacad Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Wed, 3 Aug 2022 17:50:15 +0500
Subject: [PATCH 1/4] refactor: removed InputText deprecation form
 DateTimeField

---
 .gitignore                             |  1 +
 src/components/DateTimeField/index.jsx | 61 ++++++++++++++------------
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1b6f8502b..a7978280f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ module.config.js
 dist/
 
 .idea
+.vscode
\ No newline at end of file
diff --git a/src/components/DateTimeField/index.jsx b/src/components/DateTimeField/index.jsx
index 7f3c8f9f7..217adb995 100644
--- a/src/components/DateTimeField/index.jsx
+++ b/src/components/DateTimeField/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import { InputText } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 import {
   getDateWithDashes,
   getDateWithSlashes,
@@ -84,45 +84,50 @@ class DateTimeField extends React.Component {
     return (
       <div className="row">
         <div className="col-6">
-          <InputText
-            name={`${name}Date`}
-            type={type}
-            value={this.getValue(type, date)}
-            label={(
+          <Form.Group controlId={`${name}-date-label`}>
+            <Form.Label>
               <FieldLabel
                 id={`${name}-date-label`}
                 text={dateLabel}
                 required
                 helpText={helpText}
               />
-            )}
-            placeholder={placeholder}
-            pattern={pattern}
-            maxLength={maxLength}
-            required={required}
-            disabled={disabled}
-            onChange={e => this.updateDate(e)}
-            min={minDate}
-            onInvalid={onInvalid}
-          />
+            </Form.Label>
+            <Form.Control
+              name={`${name}Date`}
+              type={type}
+              value={this.getValue(type, date)}
+              id={`${name}-date-label`}
+              placeholder={placeholder}
+              pattern={pattern}
+              maxLength={maxLength}
+              required={required}
+              disabled={disabled}
+              onChange={event => this.updateDate(event.target.value)}
+              min={minDate}
+              onInvalid={onInvalid}
+            />
+          </Form.Group>
         </div>
         <div className="col-6">
-          <InputText
-            name={`${name}Time`}
-            type="time"
-            value={time || '12:00'}
-            label={(
+          <Form.Group controlId={`${name}-date-label`}>
+            <Form.Label>
               <FieldLabel
                 id={`${name}-time-label`}
                 text={timeLabel}
                 required
               />
-            )}
-            placeholder="HH:mm"
-            required={required}
-            disabled={disabled}
-            onChange={e => this.updateTime(e)}
-          />
+            </Form.Label>
+            <Form.Control
+              name={`${name}Time`}
+              type="time"
+              value={time || '12:00'}
+              placeholder="HH:mm"
+              required={required}
+              disabled={disabled}
+              onChange={event => this.updateDate(event.target.value)}
+            />
+          </Form.Group>
         </div>
       </div>
     );
@@ -157,7 +162,7 @@ DateTimeField.defaultProps = {
   utcTimeZone: false,
   maxLength: '',
   type: '',
-  pattern: '',
+  pattern: 'dd/mm/yyyy',
   placeholder: '',
 };
 

From ba768fe314270ccf8b581124907f04db5fffb346 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Wed, 3 Aug 2022 17:58:33 +0500
Subject: [PATCH 2/4] refactor: removed InputText deprecation form
 RenderInputTextField

---
 src/components/RenderInputTextField/index.jsx | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/RenderInputTextField/index.jsx b/src/components/RenderInputTextField/index.jsx
index cea91bf8f..d5aa0945e 100644
--- a/src/components/RenderInputTextField/index.jsx
+++ b/src/components/RenderInputTextField/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputText } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 const RenderInputTextField = ({
   input,
@@ -15,21 +15,28 @@ const RenderInputTextField = ({
   pattern,
   meta: { touched, error },
 }) => (
-  <InputText
-    {...input}
-    {...extraInput}
-    placeholder={placeholder}
-    maxLength={maxLength}
-    pattern={pattern}
-    name={name}
-    label={label}
-    type={type}
-    disabled={disabled}
-    required={required}
-    isValid={!(touched && error)}
-    validationMessage={error}
-    themes={['danger']}
-  />
+  <Form.Group controlId={`${name}-text-label`}>
+    <Form.Label>
+      {label}
+    </Form.Label>
+    <Form.Control
+      {...input}
+      {...extraInput}
+      id={`${name}-text-label`}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      pattern={pattern}
+      name={name}
+      type={type}
+      disabled={disabled}
+      required={required}
+    />
+    {!(touched && error) && (
+    <Form.Control.Feedback>
+      {error}
+    </Form.Control.Feedback>
+    )}
+  </Form.Group>
 );
 
 RenderInputTextField.defaultProps = {

From 28a95b17a152b9358b94f04963e29bc0aa7be5dc Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Wed, 3 Aug 2022 18:05:34 +0500
Subject: [PATCH 3/4] refactor: removed InputSelect deprecation form
 RenderInputTextField

---
 src/components/RenderInputTextField/index.jsx |  4 +-
 src/components/RenderSelectField/index.jsx    | 37 ++++++++++++-------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/RenderInputTextField/index.jsx b/src/components/RenderInputTextField/index.jsx
index d5aa0945e..4b4c03f63 100644
--- a/src/components/RenderInputTextField/index.jsx
+++ b/src/components/RenderInputTextField/index.jsx
@@ -15,7 +15,7 @@ const RenderInputTextField = ({
   pattern,
   meta: { touched, error },
 }) => (
-  <Form.Group controlId={`${name}-text-label`}>
+  <Form.Group controlId={`${name}-text-label`} isInvalid={touched && error}>
     <Form.Label>
       {label}
     </Form.Label>
@@ -31,7 +31,7 @@ const RenderInputTextField = ({
       disabled={disabled}
       required={required}
     />
-    {!(touched && error) && (
+    {touched && error && (
     <Form.Control.Feedback>
       {error}
     </Form.Control.Feedback>
diff --git a/src/components/RenderSelectField/index.jsx b/src/components/RenderSelectField/index.jsx
index cc8b8d49a..555f50f88 100644
--- a/src/components/RenderSelectField/index.jsx
+++ b/src/components/RenderSelectField/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputSelect } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 
 const RenderSelectField = ({
   input,
@@ -12,18 +12,29 @@ const RenderSelectField = ({
   meta: { touched, error },
   options,
 }) => (
-  <InputSelect
-    {...input}
-    {...extraInput}
-    name={name}
-    label={label}
-    disabled={disabled}
-    required={required}
-    isValid={!(touched && error)}
-    validationMessage={error}
-    themes={['danger']}
-    options={options}
-  />
+  <Form.Group controlId={`${name}-text-label`} isInvalid={touched && error}>
+    <Form.Label>
+      {label}
+    </Form.Label>
+    <Form.Control
+      {...input}
+      {...extraInput}
+      as="select"
+      name={name}
+      label={label}
+      disabled={disabled}
+      required={required}
+    >
+      {options.map(option => (
+        <option key={option.value} value={option.value}>{option.label}</option>
+      ))}
+      {touched && error && (
+      <Form.Control.Feedback>
+        {error}
+      </Form.Control.Feedback>
+      )}
+    </Form.Control>
+  </Form.Group>
 );
 
 RenderSelectField.defaultProps = {

From ce2f4da873249b49e1dfe01ac488b74203524819 Mon Sep 17 00:00:00 2001
From: Abdullah Waheed <abdullah.waheed@arbisoft.com>
Date: Thu, 4 Aug 2022 12:21:21 +0500
Subject: [PATCH 4/4] fix: fixed unit tests

---
 .../RenderInputTextField.test.jsx.snap        | 100 ++++++++++--------
 .../RenderSelectField.test.jsx.snap           |  53 +++++-----
 2 files changed, 81 insertions(+), 72 deletions(-)

diff --git a/src/components/RenderInputTextField/__snapshots__/RenderInputTextField.test.jsx.snap b/src/components/RenderInputTextField/__snapshots__/RenderInputTextField.test.jsx.snap
index e789ccedc..5a877c0de 100644
--- a/src/components/RenderInputTextField/__snapshots__/RenderInputTextField.test.jsx.snap
+++ b/src/components/RenderInputTextField/__snapshots__/RenderInputTextField.test.jsx.snap
@@ -1,53 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RenderInputTextField renders html for number type 1`] = `
-<asInput(withDeprecatedProps(InputText))
-  dangerIconDescription=""
-  disabled={false}
-  inline={false}
-  isValid={true}
-  label="TestLabel"
-  maxLength=""
-  name="Test"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyPress={[Function]}
-  pattern={null}
-  placeholder=""
-  required={false}
-  themes={
-    Array [
-      "danger",
-    ]
-  }
-  type="number"
-  validationMessage=""
-  value=""
-/>
+<div
+  className="pgn__form-group"
+>
+  <FormGroupContextProvider
+    controlId="Test-text-label"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      TestLabel
+    </FormLabel>
+    <ForwardRef
+      as="input"
+      disabled={false}
+      id="Test-text-label"
+      maxLength=""
+      name="Test"
+      pattern={null}
+      placeholder=""
+      plaintext={false}
+      required={false}
+      type="number"
+    />
+  </FormGroupContextProvider>
+</div>
 `;
 
 exports[`RenderInputTextField renders html for text 1`] = `
-<asInput(withDeprecatedProps(InputText))
-  dangerIconDescription=""
-  disabled={false}
-  inline={false}
-  isValid={true}
-  label="TestLabel"
-  maxLength=""
-  name="Test"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyPress={[Function]}
-  pattern={null}
-  placeholder=""
-  required={false}
-  themes={
-    Array [
-      "danger",
-    ]
-  }
-  type="text"
-  validationMessage=""
-  value=""
-/>
+<div
+  className="pgn__form-group"
+>
+  <FormGroupContextProvider
+    controlId="Test-text-label"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      TestLabel
+    </FormLabel>
+    <ForwardRef
+      as="input"
+      disabled={false}
+      id="Test-text-label"
+      maxLength=""
+      name="Test"
+      pattern={null}
+      placeholder=""
+      plaintext={false}
+      required={false}
+      type="text"
+    />
+  </FormGroupContextProvider>
+</div>
 `;
diff --git a/src/components/RenderSelectField/__snapshots__/RenderSelectField.test.jsx.snap b/src/components/RenderSelectField/__snapshots__/RenderSelectField.test.jsx.snap
index acb4ff126..7a6ea5448 100644
--- a/src/components/RenderSelectField/__snapshots__/RenderSelectField.test.jsx.snap
+++ b/src/components/RenderSelectField/__snapshots__/RenderSelectField.test.jsx.snap
@@ -1,30 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RenderSelectField renders html for select field 1`] = `
-<asInput(withDeprecatedProps(InputSelect))
-  dangerIconDescription=""
-  disabled={false}
-  inline={false}
-  isValid={true}
-  label="TestLabel"
-  name="Test"
-  onBlur={[Function]}
-  onChange={[Function]}
-  onKeyPress={[Function]}
-  options={
-    Array [
-      "one",
-      "two",
-      "three",
-    ]
-  }
-  required={false}
-  themes={
-    Array [
-      "danger",
-    ]
-  }
-  validationMessage=""
-  value=""
-/>
+<div
+  className="pgn__form-group"
+>
+  <FormGroupContextProvider
+    controlId="Test-text-label"
+    isInvalid={false}
+    isValid={false}
+  >
+    <FormLabel
+      isInline={false}
+    >
+      TestLabel
+    </FormLabel>
+    <ForwardRef
+      as="select"
+      disabled={false}
+      label="TestLabel"
+      name="Test"
+      plaintext={false}
+      required={false}
+    >
+      <option />
+      <option />
+      <option />
+    </ForwardRef>
+  </FormGroupContextProvider>
+</div>
 `;