Adding of clear and cancel button in create preset form #8921

Rishith25 · 2024-10-24T17:19:32Z

Proposed Changes

Fixes Add a clear and cancel button in the preset pop-up of asset camera configuration page #8902
Added a Cancel button adjacent to the Submit button for closing the pop-up.
Added a Clear button within the preset input field to clear the input value.

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

Add specs that demonstrate bug / test a new feature.
Update product documentation.
Ensure that UI text is kept in I18n files.
Prep screenshot or demo video for changelog entry, and attach it to issue.
Request for Peer Reviews
Completion of QA

netlify · 2024-10-24T17:19:49Z

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	`348d31e`
🔍 Latest deploy log	https://app.netlify.com/sites/care-ohc/deploys/672233b580709b0008881655
😎 Deploy Preview	https://deploy-preview-8921--care-ohc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

bodhish

LGTM

rithviknishad

LGTM; just curious why shadow was disabled for the cancel button

rithviknishad · 2024-10-25T04:27:05Z

src/components/CameraFeed/ConfigureCamera.tsx

+
+                  <div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
+                    <Cancel
+                      shadow={false}


Suggested change

shadow={false}

Done the changes. I thought to maintain a simpler and cleaner design.

Rishith25 · 2024-10-25T05:37:39Z

@rithviknishad Can you please assign 2 story points for this

bodhish · 2024-10-27T21:56:38Z

@Rishith25 for minor changes we keep it to 1.

nihal467 · 2024-10-28T08:11:32Z

Reposition the clear button properly in the pop-up, rest looks good

Rishith25 · 2024-10-28T15:47:10Z

@nihal467 Done the changes of clear button alignment

rithviknishad · 2024-10-29T08:58:39Z

src/components/CameraFeed/ConfigureCamera.tsx

+                    />
+                  </div>
+
+                  <div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">


Suggested change

<div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">

<div className="cui-form-button-group">

rithviknishad · 2024-10-29T08:58:49Z

src/components/CameraFeed/ConfigureCamera.tsx

+                        setCreatePreset(undefined);
+                        setPresetName("");
+                      }}
+                      className="ml-0 w-full sm:ml-2 sm:w-auto"


Suggested change

className="ml-0 w-full sm:ml-2 sm:w-auto"

rithviknishad · 2024-10-29T08:58:54Z

src/components/CameraFeed/ConfigureCamera.tsx

@@ -417,6 +429,7 @@ export default function ConfigureCamera(props: Props) {
                        cameraPresetsQuery.refetch();
                      }}
                      disabled={!presetName}
+                      className="w-full sm:w-auto"


Suggested change

className="w-full sm:w-auto"

rithviknishad · 2024-10-29T09:00:01Z

src/components/Form/FormFields/TextFormField.tsx

@@ -35,30 +36,47 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
  const hasTrailing = !!(trailing || trailingFocused);
  const hasIcon = hasLeading || hasTrailing;
  const [showPassword, setShowPassword] = useState(false);
+  const isClear = props.isClear || false;


null/undefined is falsey, it's no-op when used in conditional statements.

Suggested change

const isClear = props.isClear || false;

rithviknishad · 2024-10-29T09:02:01Z

src/components/CameraFeed/ConfigureCamera.tsx

+                  <div className="relative w-full">
+                    <TextFormField
+                      name="preset-name"
+                      className="w-full py-4"
+                      value={presetName}
+                      onChange={({ value }) => setPresetName(value)}
+                      errorClassName="hidden"
+                      placeholder={t("preset_name_placeholder")}
+                      suggestions={presetNameSuggestions}
+                      isClear={true}
+                    />
+                  </div>


why wrap in a div with relative class here? is this needed?

rithviknishad · 2024-10-29T09:03:00Z

src/components/Form/FormFields/TextFormField.tsx

@@ -24,6 +24,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> &
    trailingPadding?: string | undefined;
    leadingPadding?: string | undefined;
    suggestions?: string[];
+    isClear?: boolean;


isClear doesn't make sense. One may not understand what this prop does by simply reading it.

Suggested change

isClear?: boolean;

clearable?: boolean;

Rishith25 · 2024-10-29T12:51:16Z

@rithviknishad Changes are done

rithviknishad

LGTM; just some cleanups

src/components/CameraFeed/ConfigureCamera.tsx

src/components/Form/FormFields/TextFormField.tsx

Rishith25 · 2024-10-30T17:37:36Z

@rithviknishad The cleanups are done

nihal467 · 2024-11-04T20:40:56Z

LGTM

github-actions · 2024-11-05T00:44:51Z

@Rishith25 Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌

Clear and cancel button in create preset form

26c28f9

Rishith25 requested a review from a team as a code owner October 24, 2024 17:19

shivankacker approved these changes Oct 24, 2024

View reviewed changes

bodhish approved these changes Oct 25, 2024

View reviewed changes

bodhish added the needs testing label Oct 25, 2024

rithviknishad approved these changes Oct 25, 2024

View reviewed changes

Clear and cancel button in create preset form

50fa2c8

nihal467 added changes required and removed needs testing labels Oct 28, 2024

Alignment of clear button in preset form

9a0236c

Rishith25 requested review from bodhish and rithviknishad October 29, 2024 08:42

rithviknishad reviewed Oct 29, 2024

View reviewed changes

rithviknishad requested changes Oct 29, 2024

View reviewed changes

Clearable prop added in TextFormField

20dbaf7

rithviknishad requested changes Oct 30, 2024

View reviewed changes

src/components/CameraFeed/ConfigureCamera.tsx Outdated Show resolved Hide resolved

src/components/Form/FormFields/TextFormField.tsx Outdated Show resolved Hide resolved

src/components/Form/FormFields/TextFormField.tsx Outdated Show resolved Hide resolved

Clean up of clear and cancel button in create preset form

348d31e

rithviknishad approved these changes Oct 30, 2024

View reviewed changes

rithviknishad added needs testing and removed changes required labels Oct 30, 2024

nihal467 added needs review and removed needs testing labels Nov 4, 2024

nihal467 added the tested label Nov 4, 2024

rithviknishad merged commit a65d7ec into ohcnetwork:develop Nov 5, 2024
23 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding of clear and cancel button in create preset form #8921

Adding of clear and cancel button in create preset form #8921

Rishith25 commented Oct 24, 2024

netlify bot commented Oct 24, 2024 •

edited

Loading

bodhish left a comment

rithviknishad left a comment

rithviknishad Oct 25, 2024

Rishith25 Oct 25, 2024

Rishith25 commented Oct 25, 2024 •

edited

Loading

bodhish commented Oct 27, 2024

nihal467 commented Oct 28, 2024

Rishith25 commented Oct 28, 2024

rithviknishad Oct 29, 2024

rithviknishad Oct 29, 2024

rithviknishad Oct 29, 2024

rithviknishad Oct 29, 2024

rithviknishad Oct 29, 2024

rithviknishad Oct 29, 2024

Rishith25 commented Oct 29, 2024

rithviknishad left a comment

Rishith25 commented Oct 30, 2024

nihal467 commented Nov 4, 2024

github-actions bot commented Nov 5, 2024

	<div className="cui-form-button-group mt-4 flex w-full flex-col justify-end space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
	<div className="cui-form-button-group">

Adding of clear and cancel button in create preset form #8921

Adding of clear and cancel button in create preset form #8921

Conversation

Rishith25 commented Oct 24, 2024

Proposed Changes

Merge Checklist

netlify bot commented Oct 24, 2024 • edited Loading

✅ Deploy Preview for care-ohc ready!

bodhish left a comment

Choose a reason for hiding this comment

rithviknishad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Rishith25 commented Oct 25, 2024 • edited Loading

bodhish commented Oct 27, 2024

nihal467 commented Oct 28, 2024

Rishith25 commented Oct 28, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Rishith25 commented Oct 29, 2024

rithviknishad left a comment

Choose a reason for hiding this comment

Rishith25 commented Oct 30, 2024

nihal467 commented Nov 4, 2024

github-actions bot commented Nov 5, 2024

netlify bot commented Oct 24, 2024 •

edited

Loading

Rishith25 commented Oct 25, 2024 •

edited

Loading