chore: fix console warning

[thiagodallacqua-hpe]

Description

Ticket: ET-6

This PR will remain as a draft until the PR at the hew repo gets merged.

Test Plan

Commentary (optional)

Checklist

• [ ] Changes have been manually QA'd
• [ ] User-facing API changes need the "User-facing API Change" label.
• [ ] Release notes should be added as a separate file under docs/release-notes/. See Release Note for details.
• [ ] Licenses should be included for new code which was copied and/or modified from any external code.

Ticket

[netlify[bot]]

✅ Deploy Preview for determined-ui ready!

Name	Link
🔨 Latest commit	abd01a6ab9680b34005c235ec09eccec436eba8c
🔍 Latest deploy log	https://app.netlify.com/sites/determined-ui/deploys/664263b1e9940200082c81f8
😎 Deploy Preview	https://deploy-preview-8999--determined-ui.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.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 88.23529% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 38.13%. Comparing base (c3901c8) to head (abd01a6). Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8999      +/-   ##
==========================================
- Coverage   45.16%   38.13%   -7.04%     
==========================================
  Files        1230      906     -324     
  Lines      154567   114713   -39854     
  Branches     2405     2344      -61     
==========================================
- Hits        69817    43742   -26075     
+ Misses      84555    70777   -13778     
+ Partials      195      194       -1     

Flag	Coverage Δ
harness	?
web	35.23% <88.23%> (-0.84%)	:arrow_down:

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
webui/react/src/components/CreateUserModal.tsx	87.17% <100.00%> (-0.93%)	:arrow_down:
...bui/react/src/components/ExperimentCreateModal.tsx	77.46% <100.00%> (ø)
webui/react/src/components/JupyterLabModal.tsx	84.86% <100.00%> (+0.24%)	:arrow_up:
...i/react/src/components/ExperimentContinueModal.tsx	16.56% <0.00%> (-33.92%)	:arrow_down:

... and 334 files with indirect coverage changes

[thiagodallacqua-hpe]

@keita-determined There's only the error for the DOM validation, where the model delete modal is being nested inside of the table, and I'm not quite sure how we're solving it, since it is part of the context menu...

[keita-determined]

which code?

[thiagodallacqua-hpe]

which code?

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>.
    at div
    at Modal (http://localhost:3000/node_modules/.vite/deps/chunk-OKWBLWTF.js?v=9f03bec4:64:3)
    at DeleteModelModal (http://localhost:3000/src/components/DeleteModelModal.tsx:15:29)
    at ModelActionDropdown (http://localhost:3000/src/components/ModelActionDropdown.tsx:23:39)
    at Row (http://localhost:3000/src/components/Table/InteractiveTable.tsx:69:16)
    at BodyRow (http://localhost:3000/node_modules/.vite/deps/chunk-GYG2S546.js?v=9f03bec4:66596:5)
    at ImmutableComponent2 (http://localhost:3000/node_modules/.vite/deps/chunk-GYG2S546.js?v=9f03bec4:66136:5)
    at tbody

which comes from this:

// the Modal is being used in the DeleteModelModal
// the Modal itself is composed of a div
//...
return (
    <div
      className={css.wrapper}
      onClick={stopEventPropagation}
      onContextMenu={stopEventPropagation}>
      <AntdModal

// which is being used in the ModelActionDropdown

// which in turn is being used in the InteractiveTable
// ...
<InteractiveTable<ModelItem, Settings>
          columns={columns}
          containerRef={pageRef}
          ContextMenu={ModelActionDropdown}

[thiagodallacqua-hpe]

I've also checked for the other error (see below), and it seems that it was solved...

JupyterLabModal.tsx:101 Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?

[thiagodallacqua-hpe]

still see Instance created by useFormis not connected to any Form element. Forget to passform prop? in admin page. could you check all modals.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? too in jupyter modal.

For the validateDOMNesting issue, reaching out to the code author might be a good idea

• I don't see any warnings from the admin page...

• I don't see any error from the jupyter modal as well, maybe you're having some cache problems 😅

• The issue on the Modal is not from us but from the antd modal, I've tried to change the structure of the component and the issue was still there...

[keita-determined]

@thiagodallacqua-hpe i tested in private mode, so i dont think its cache issue. Could you double check

[thiagodallacqua-hpe]

this is super weird, I'm not seeing this error, even on incognito...

but, I'll see what I can do about it...

[thiagodallacqua-hpe]

@thiagodallacqua-hpe i tested in private mode, so i dont think its cache issue. Could you double check

that one could be tricky, I've memoized the return value of hasErrors(form), which (apparently, from that screenshot) is the cause of that warning, the thing is that (maybe) the warning is coming because the modal isn't open, but the instance of the form is being passed to the modal as prop... That's my theory, even though I couldn't reproduce that error (even on icongnito)...

return (
    <Modal
      cancel
      data-test-component="createUserModal"
      size="small"
      submit={{
        disabled: hasErrors(form),

[johnkim-det]

I am reproducing those three errors, testing with local branch against latest-main API. FWIW I think I only see them once, and if I navigate away and back, they don't show up again. And then I see them again when I refresh the app.

[thiagodallacqua-hpe]

after some investigation, I noticed that the warning on the jupyterlab modal on full config is coming from the antd form component, as we're not using or passing any refs from that part of the dom tree... I've pushed a fix for the useForm warning.

[keita-determined]

thanks for the fixes, but unfortunately, these warnings are still reproducible, and i dont thnk the jupyterlab modal warning isn't from antd based on the warning. I'm open to pair to reproduce it, feel free to ping me anytime.