From 75b4b0b35039855ebaf37b01269e656aaf38c74c Mon Sep 17 00:00:00 2001
From: Vladimir <dizel852@gmail.com>
Date: Thu, 19 Oct 2023 12:29:39 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20=F0=9F=94=A7=20Add=20`virtuoso`?=
 =?UTF-8?q?=20to=20Formik's=20`<syncCatalog=20/>`=20(#9214)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../connection/StreamDetailsPageObject.ts     |   8 +-
 .../CreateConnectionForm.test.tsx             |   9 +-
 .../CreateConnectionForm.test.tsx.snap        | 648 +++++++++---------
 .../SyncCatalog/SyncCatalogBody.tsx           |  36 +-
 .../ConnectionReplicationPage.test.tsx        |   5 +-
 .../ConnectionReplicationPage.test.tsx.snap   | 648 +++++++++---------
 6 files changed, 725 insertions(+), 629 deletions(-)

diff --git a/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts b/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts
index f7fcd8aa96b..abbf332b053 100644
--- a/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts
+++ b/airbyte-webapp/cypress/pages/connection/StreamDetailsPageObject.ts
@@ -83,11 +83,15 @@ export class StreamDetailsPageObject {
   }
 
   scrollToBottom() {
-    return cy.get("div[data-test-id='virtuoso-scroller']").scrollTo("bottom");
+    return cy.get(streamDetailsPanel).within(() => {
+      cy.get("div[data-test-id='virtuoso-scroller']").scrollTo("bottom");
+    });
   }
 
   scrollToTop() {
-    return cy.get("div[data-test-id='virtuoso-scroller']").scrollTo("top");
+    return cy.get(streamDetailsPanel).within(() => {
+      cy.get("div[data-test-id='virtuoso-scroller']").scrollTo("top");
+    });
   }
 
   enableSyncStream() {
diff --git a/airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.test.tsx b/airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.test.tsx
index de98e0ad4a7..db7d790d168 100644
--- a/airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.test.tsx
+++ b/airbyte-webapp/src/components/connection/CreateConnectionForm/CreateConnectionForm.test.tsx
@@ -3,6 +3,7 @@ import { act, render as tlr } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import selectEvent from "react-select-event";
+import { VirtuosoMockContext } from "react-virtuoso";
 
 import { mockConnection } from "test-utils/mock-data/mockConnection";
 import {
@@ -58,7 +59,13 @@ jest.mock("hooks/theme/useAirbyteTheme", () => ({
 jest.setTimeout(40000);
 
 describe("CreateConnectionForm", () => {
-  const Wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => <TestWrapper>{children}</TestWrapper>;
+  const Wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
+    <TestWrapper>
+      <VirtuosoMockContext.Provider value={{ viewportHeight: 1000, itemHeight: 50 }}>
+        {children}
+      </VirtuosoMockContext.Provider>
+    </TestWrapper>
+  );
   const render = async () => {
     let renderResult: ReturnType<typeof tlr>;
 
diff --git a/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap
index 4abf0fa94e5..24a8bce0f08 100644
--- a/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap
+++ b/airbyte-webapp/src/components/connection/CreateConnectionForm/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -788,360 +788,398 @@ exports[`CreateConnectionForm should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="<removed-for-snapshot-test>"
-                    data-testid="catalog-tree-table-row-no-namespace-another_stream"
+                    data-test-id="virtuoso-scroller"
+                    data-virtuoso-scroller="true"
+                    style="height: 40vh; outline: none; overflow-y: auto; position: relative;"
+                    tabindex="0"
                   >
                     <div
-                      class="<removed-for-snapshot-test>"
-                      data-noexpand="true"
-                    >
-                      <label
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <input
-                          aria-checked="true"
-                          checked=""
-                          class="<removed-for-snapshot-test>"
-                          data-testid="selected-switch"
-                          type="checkbox"
-                          value=""
-                        />
-                        <span
-                          class="<removed-for-snapshot-test>"
-                        />
-                      </label>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      />
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="destination-namespace-cell"
-                    >
-                      <span
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <p
-                          class="<removed-for-snapshot-test>"
-                          data-type="text"
-                        >
-                          '&lt;destination schema&gt;
-                        </p>
-                      </span>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="destination-stream-name-cell"
-                    >
-                      <span
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <p
-                          class="<removed-for-snapshot-test>"
-                          data-type="text"
-                        >
-                          another_stream
-                        </p>
-                      </span>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
+                      data-viewport-type="element"
+                      style="width: 100%; height: 100%; position: absolute; top: 0px;"
                     >
                       <div
-                        data-testid="sync-mode-select"
+                        data-test-id="virtuoso-item-list"
+                        style="box-sizing: border-box; padding-top: 0px; padding-bottom: 0px; margin-top: 0px;"
                       >
-                        <button
-                          aria-expanded="false"
-                          aria-haspopup="listbox"
-                          class="<removed-for-snapshot-test>"
-                          data-headlessui-state=""
-                          id="headlessui-listbox-button-:r0:"
-                          type="button"
+                        <div
+                          data-index="0"
+                          data-item-index="0"
+                          data-known-size="50"
+                          item="[object Object]"
                         >
                           <div
                             class="<removed-for-snapshot-test>"
-                            data-error="false"
-                            data-testid="pill-select-button"
+                            data-testid="catalog-tree-table-row-no-namespace-another_stream"
                           >
                             <div
                               class="<removed-for-snapshot-test>"
+                              data-noexpand="true"
                             >
-                              <p
+                              <label
                                 class="<removed-for-snapshot-test>"
-                                data-type="text"
                               >
-                                Full refresh | Overwrite
-                              </p>
+                                <input
+                                  aria-checked="true"
+                                  checked=""
+                                  class="<removed-for-snapshot-test>"
+                                  data-testid="selected-switch"
+                                  type="checkbox"
+                                  value=""
+                                />
+                                <span
+                                  class="<removed-for-snapshot-test>"
+                                />
+                              </label>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              />
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                              data-testid="destination-namespace-cell"
+                            >
+                              <span
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <p
+                                  class="<removed-for-snapshot-test>"
+                                  data-type="text"
+                                >
+                                  '&lt;destination schema&gt;
+                                </p>
+                              </span>
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                              data-testid="destination-stream-name-cell"
+                            >
+                              <span
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <p
+                                  class="<removed-for-snapshot-test>"
+                                  data-type="text"
+                                >
+                                  another_stream
+                                </p>
+                              </span>
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                            >
+                              <div
+                                data-testid="sync-mode-select"
+                              >
+                                <button
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  class="<removed-for-snapshot-test>"
+                                  data-headlessui-state=""
+                                  id="headlessui-listbox-button-:r0:"
+                                  type="button"
+                                >
+                                  <div
+                                    class="<removed-for-snapshot-test>"
+                                    data-error="false"
+                                    data-testid="pill-select-button"
+                                  >
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                    >
+                                      <p
+                                        class="<removed-for-snapshot-test>"
+                                        data-type="text"
+                                      >
+                                        Full refresh | Overwrite
+                                      </p>
+                                    </div>
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                    />
+                                  </div>
+                                </button>
+                                <div
+                                  style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
+                                />
+                              </div>
                             </div>
                             <div
                               class="<removed-for-snapshot-test>"
                             />
+                            <div
+                              class="<removed-for-snapshot-test>"
+                            >
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="field-selection-status"
+                              >
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-testid="field-selection-status-selected-count"
+                                    data-type="text"
+                                  >
+                                    All
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
                           </div>
-                        </button>
-                        <div
-                          style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                    />
-                    <div
-                      class="<removed-for-snapshot-test>"
-                    >
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="field-selection-status"
-                      >
-                        <div
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-testid="field-selection-status-selected-count"
-                            data-type="text"
-                          >
-                            All
-                          </p>
                         </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="<removed-for-snapshot-test>"
-                    data-testid="catalog-tree-table-row-no-namespace-pokemon"
-                  >
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-noexpand="true"
-                    >
-                      <label
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <input
-                          aria-checked="true"
-                          checked=""
-                          class="<removed-for-snapshot-test>"
-                          data-testid="selected-switch"
-                          type="checkbox"
-                          value=""
-                        />
-                        <span
-                          class="<removed-for-snapshot-test>"
-                        />
-                      </label>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      />
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="destination-namespace-cell"
-                    >
-                      <span
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <p
-                          class="<removed-for-snapshot-test>"
-                          data-type="text"
-                        >
-                          '&lt;destination schema&gt;
-                        </p>
-                      </span>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="destination-stream-name-cell"
-                    >
-                      <span
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <p
-                          class="<removed-for-snapshot-test>"
-                          data-type="text"
-                        >
-                          pokemon
-                        </p>
-                      </span>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                    >
-                      <div
-                        data-testid="sync-mode-select"
-                      >
-                        <button
-                          aria-expanded="false"
-                          aria-haspopup="listbox"
-                          class="<removed-for-snapshot-test>"
-                          data-headlessui-state=""
-                          id="headlessui-listbox-button-:r1:"
-                          type="button"
+                        <div
+                          data-index="1"
+                          data-item-index="1"
+                          data-known-size="50"
+                          item="[object Object]"
                         >
                           <div
                             class="<removed-for-snapshot-test>"
-                            data-error="false"
-                            data-testid="pill-select-button"
+                            data-testid="catalog-tree-table-row-no-namespace-pokemon"
                           >
                             <div
                               class="<removed-for-snapshot-test>"
+                              data-noexpand="true"
                             >
-                              <p
+                              <label
                                 class="<removed-for-snapshot-test>"
-                                data-type="text"
                               >
-                                Full refresh | Overwrite
-                              </p>
+                                <input
+                                  aria-checked="true"
+                                  checked=""
+                                  class="<removed-for-snapshot-test>"
+                                  data-testid="selected-switch"
+                                  type="checkbox"
+                                  value=""
+                                />
+                                <span
+                                  class="<removed-for-snapshot-test>"
+                                />
+                              </label>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              />
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                              data-testid="destination-namespace-cell"
+                            >
+                              <span
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <p
+                                  class="<removed-for-snapshot-test>"
+                                  data-type="text"
+                                >
+                                  '&lt;destination schema&gt;
+                                </p>
+                              </span>
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                              data-testid="destination-stream-name-cell"
+                            >
+                              <span
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <p
+                                  class="<removed-for-snapshot-test>"
+                                  data-type="text"
+                                >
+                                  pokemon
+                                </p>
+                              </span>
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                            >
+                              <div
+                                data-testid="sync-mode-select"
+                              >
+                                <button
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  class="<removed-for-snapshot-test>"
+                                  data-headlessui-state=""
+                                  id="headlessui-listbox-button-:r1:"
+                                  type="button"
+                                >
+                                  <div
+                                    class="<removed-for-snapshot-test>"
+                                    data-error="false"
+                                    data-testid="pill-select-button"
+                                  >
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                    >
+                                      <p
+                                        class="<removed-for-snapshot-test>"
+                                        data-type="text"
+                                      >
+                                        Full refresh | Overwrite
+                                      </p>
+                                    </div>
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                    />
+                                  </div>
+                                </button>
+                                <div
+                                  style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
+                                />
+                              </div>
                             </div>
                             <div
                               class="<removed-for-snapshot-test>"
                             />
+                            <div
+                              class="<removed-for-snapshot-test>"
+                            >
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="field-selection-status"
+                              >
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-testid="field-selection-status-selected-count"
+                                    data-type="text"
+                                  >
+                                    All
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
                           </div>
-                        </button>
-                        <div
-                          style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                    />
-                    <div
-                      class="<removed-for-snapshot-test>"
-                    >
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="field-selection-status"
-                      >
-                        <div
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-testid="field-selection-status-selected-count"
-                            data-type="text"
-                          >
-                            All
-                          </p>
                         </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="<removed-for-snapshot-test>"
-                    data-testid="catalog-tree-table-row-no-namespace-pokemon2"
-                  >
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-noexpand="true"
-                    >
-                      <label
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <input
-                          aria-checked="false"
-                          class="<removed-for-snapshot-test>"
-                          data-testid="selected-switch"
-                          type="checkbox"
-                          value=""
-                        />
-                        <span
-                          class="<removed-for-snapshot-test>"
-                        />
-                      </label>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      />
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="destination-namespace-cell"
-                    >
-                      <span
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <p
-                          class="<removed-for-snapshot-test>"
-                          data-type="text"
-                        >
-                          '&lt;destination schema&gt;
-                        </p>
-                      </span>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="destination-stream-name-cell"
-                    >
-                      <span
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <p
-                          class="<removed-for-snapshot-test>"
-                          data-type="text"
-                        >
-                          pokemon2
-                        </p>
-                      </span>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                    >
-                      <div
-                        data-testid="sync-mode-select"
-                      >
-                        <button
-                          aria-expanded="false"
-                          aria-haspopup="listbox"
-                          class="<removed-for-snapshot-test>"
-                          data-headlessui-state=""
-                          id="headlessui-listbox-button-:r2:"
-                          type="button"
+                        <div
+                          data-index="2"
+                          data-item-index="2"
+                          data-known-size="50"
+                          item="[object Object]"
                         >
                           <div
                             class="<removed-for-snapshot-test>"
-                            data-error="false"
-                            data-testid="pill-select-button"
+                            data-testid="catalog-tree-table-row-no-namespace-pokemon2"
                           >
                             <div
                               class="<removed-for-snapshot-test>"
+                              data-noexpand="true"
+                            >
+                              <label
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <input
+                                  aria-checked="false"
+                                  class="<removed-for-snapshot-test>"
+                                  data-testid="selected-switch"
+                                  type="checkbox"
+                                  value=""
+                                />
+                                <span
+                                  class="<removed-for-snapshot-test>"
+                                />
+                              </label>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              />
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                              data-testid="destination-namespace-cell"
                             >
-                              <p
+                              <span
                                 class="<removed-for-snapshot-test>"
-                                data-type="text"
                               >
-                                Full refresh | Overwrite
-                              </p>
+                                <p
+                                  class="<removed-for-snapshot-test>"
+                                  data-type="text"
+                                >
+                                  '&lt;destination schema&gt;
+                                </p>
+                              </span>
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                              data-testid="destination-stream-name-cell"
+                            >
+                              <span
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <p
+                                  class="<removed-for-snapshot-test>"
+                                  data-type="text"
+                                >
+                                  pokemon2
+                                </p>
+                              </span>
+                            </div>
+                            <div
+                              class="<removed-for-snapshot-test>"
+                            >
+                              <div
+                                data-testid="sync-mode-select"
+                              >
+                                <button
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  class="<removed-for-snapshot-test>"
+                                  data-headlessui-state=""
+                                  id="headlessui-listbox-button-:r2:"
+                                  type="button"
+                                >
+                                  <div
+                                    class="<removed-for-snapshot-test>"
+                                    data-error="false"
+                                    data-testid="pill-select-button"
+                                  >
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                    >
+                                      <p
+                                        class="<removed-for-snapshot-test>"
+                                        data-type="text"
+                                      >
+                                        Full refresh | Overwrite
+                                      </p>
+                                    </div>
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                    />
+                                  </div>
+                                </button>
+                                <div
+                                  style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
+                                />
+                              </div>
                             </div>
                             <div
                               class="<removed-for-snapshot-test>"
                             />
+                            <div
+                              class="<removed-for-snapshot-test>"
+                            >
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="field-selection-status"
+                              >
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-testid="field-selection-status-selected-count"
+                                    data-type="text"
+                                  >
+                                    All
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
                           </div>
-                        </button>
-                        <div
-                          style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                    />
-                    <div
-                      class="<removed-for-snapshot-test>"
-                    >
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="field-selection-status"
-                      >
-                        <div
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-testid="field-selection-status-selected-count"
-                            data-type="text"
-                          >
-                            All
-                          </p>
                         </div>
                       </div>
                     </div>
diff --git a/airbyte-webapp/src/components/connection/syncCatalog/SyncCatalog/SyncCatalogBody.tsx b/airbyte-webapp/src/components/connection/syncCatalog/SyncCatalog/SyncCatalogBody.tsx
index 5dadb9ecf90..d7ca5af47f6 100644
--- a/airbyte-webapp/src/components/connection/syncCatalog/SyncCatalog/SyncCatalogBody.tsx
+++ b/airbyte-webapp/src/components/connection/syncCatalog/SyncCatalog/SyncCatalogBody.tsx
@@ -1,5 +1,6 @@
 import { Field, FieldProps, setIn } from "formik";
 import React, { useCallback } from "react";
+import { Virtuoso } from "react-virtuoso";
 
 import { FormikConnectionFormValues } from "components/connection/ConnectionForm/formConfig";
 
@@ -52,21 +53,26 @@ export const SyncCatalogBody: React.FC<SyncCatalogBodyProps> = ({
         />
       </div>
       {streams.length ? (
-        streams.map((streamNode) => (
-          <Field key={`schema.streams[${streamNode.id}].config`} name={`schema.streams[${streamNode.id}].config`}>
-            {({ form }: FieldProps<FormikConnectionFormValues>) => (
-              <SyncCatalogRow
-                key={`schema.streams[${streamNode.id}].config`}
-                errors={form.errors}
-                namespaceDefinition={form.values.namespaceDefinition}
-                namespaceFormat={form.values.namespaceFormat}
-                prefix={form.values.prefix}
-                streamNode={streamNode}
-                updateStream={onUpdateStream}
-              />
-            )}
-          </Field>
-        ))
+        <Virtuoso
+          style={{ height: "40vh" }}
+          data={streams}
+          fixedItemHeight={50}
+          itemContent={(_index, streamNode) => (
+            <Field key={`schema.streams[${streamNode.id}].config`} name={`schema.streams[${streamNode.id}].config`}>
+              {({ form }: FieldProps<FormikConnectionFormValues>) => (
+                <SyncCatalogRow
+                  key={`schema.streams[${streamNode.id}].config`}
+                  errors={form.errors}
+                  namespaceDefinition={form.values.namespaceDefinition}
+                  namespaceFormat={form.values.namespaceFormat}
+                  prefix={form.values.prefix}
+                  streamNode={streamNode}
+                  updateStream={onUpdateStream}
+                />
+              )}
+            </Field>
+          )}
+        />
       ) : (
         <SyncCatalogEmpty customText={isFilterApplied ? "connection.catalogTree.noMatchingStreams" : ""} />
       )}
diff --git a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx
index d5c6ac8401e..2377dc580ac 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx
+++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/ConnectionReplicationPage.test.tsx
@@ -5,6 +5,7 @@ import { render as tlr, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { Suspense } from "react";
 import selectEvent from "react-select-event";
+import { VirtuosoMockContext } from "react-virtuoso";
 
 import { mockConnection } from "test-utils/mock-data/mockConnection";
 import {
@@ -67,7 +68,9 @@ describe("ConnectionReplicationPage", () => {
     <Suspense fallback={<div>I should not show up in a snapshot</div>}>
       <TestWrapper>
         <ConnectionEditServiceProvider connectionId={mockConnection.connectionId}>
-          {children}
+          <VirtuosoMockContext.Provider value={{ viewportHeight: 1000, itemHeight: 50 }}>
+            {children}
+          </VirtuosoMockContext.Provider>
         </ConnectionEditServiceProvider>
       </TestWrapper>
     </Suspense>
diff --git a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap
index 3a37e06cdb4..094bcc9b4cc 100644
--- a/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap
+++ b/airbyte-webapp/src/pages/connections/ConnectionReplicationPage/__snapshots__/ConnectionReplicationPage.test.tsx.snap
@@ -349,360 +349,398 @@ exports[`ConnectionReplicationPage should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="catalog-tree-table-row-no-namespace-another_stream"
+                      data-test-id="virtuoso-scroller"
+                      data-virtuoso-scroller="true"
+                      style="height: 40vh; outline: none; overflow-y: auto; position: relative;"
+                      tabindex="0"
                     >
                       <div
-                        class="<removed-for-snapshot-test>"
-                        data-noexpand="true"
+                        data-viewport-type="element"
+                        style="width: 100%; height: 100%; position: absolute; top: 0px;"
                       >
-                        <label
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <input
-                            aria-checked="true"
-                            checked=""
-                            class="<removed-for-snapshot-test>"
-                            data-testid="selected-switch"
-                            type="checkbox"
-                            value=""
-                          />
-                          <span
-                            class="<removed-for-snapshot-test>"
-                          />
-                        </label>
                         <div
-                          class="<removed-for-snapshot-test>"
-                        />
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="destination-namespace-cell"
-                      >
-                        <span
-                          class="<removed-for-snapshot-test>"
+                          data-test-id="virtuoso-item-list"
+                          style="box-sizing: border-box; padding-top: 0px; padding-bottom: 0px; margin-top: 0px;"
                         >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-type="text"
-                          >
-                            '&lt;destination schema&gt;
-                          </p>
-                        </span>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="destination-stream-name-cell"
-                      >
-                        <span
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-type="text"
-                          >
-                            another_stream
-                          </p>
-                        </span>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <div
-                          data-testid="sync-mode-select"
-                        >
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="listbox"
-                            class="<removed-for-snapshot-test>"
-                            data-headlessui-state=""
-                            id="headlessui-listbox-button-:r0:"
-                            type="button"
+                          <div
+                            data-index="0"
+                            data-item-index="0"
+                            data-known-size="50"
+                            item="[object Object]"
                           >
                             <div
                               class="<removed-for-snapshot-test>"
-                              data-error="false"
-                              data-testid="pill-select-button"
+                              data-testid="catalog-tree-table-row-no-namespace-another_stream"
                             >
                               <div
                                 class="<removed-for-snapshot-test>"
+                                data-noexpand="true"
+                              >
+                                <label
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <input
+                                    aria-checked="true"
+                                    checked=""
+                                    class="<removed-for-snapshot-test>"
+                                    data-testid="selected-switch"
+                                    type="checkbox"
+                                    value=""
+                                  />
+                                  <span
+                                    class="<removed-for-snapshot-test>"
+                                  />
+                                </label>
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                />
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="destination-namespace-cell"
+                              >
+                                <span
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-type="text"
+                                  >
+                                    '&lt;destination schema&gt;
+                                  </p>
+                                </span>
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="destination-stream-name-cell"
                               >
-                                <p
+                                <span
                                   class="<removed-for-snapshot-test>"
-                                  data-type="text"
                                 >
-                                  Full refresh | Append
-                                </p>
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-type="text"
+                                  >
+                                    another_stream
+                                  </p>
+                                </span>
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <div
+                                  data-testid="sync-mode-select"
+                                >
+                                  <button
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    class="<removed-for-snapshot-test>"
+                                    data-headlessui-state=""
+                                    id="headlessui-listbox-button-:r0:"
+                                    type="button"
+                                  >
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                      data-error="false"
+                                      data-testid="pill-select-button"
+                                    >
+                                      <div
+                                        class="<removed-for-snapshot-test>"
+                                      >
+                                        <p
+                                          class="<removed-for-snapshot-test>"
+                                          data-type="text"
+                                        >
+                                          Full refresh | Append
+                                        </p>
+                                      </div>
+                                      <div
+                                        class="<removed-for-snapshot-test>"
+                                      />
+                                    </div>
+                                  </button>
+                                  <div
+                                    style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
+                                  />
+                                </div>
                               </div>
                               <div
                                 class="<removed-for-snapshot-test>"
                               />
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                  data-testid="field-selection-status"
+                                >
+                                  <div
+                                    class="<removed-for-snapshot-test>"
+                                  >
+                                    <p
+                                      class="<removed-for-snapshot-test>"
+                                      data-testid="field-selection-status-selected-count"
+                                      data-type="text"
+                                    >
+                                      All
+                                    </p>
+                                  </div>
+                                </div>
+                              </div>
                             </div>
-                          </button>
-                          <div
-                            style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
-                          />
-                        </div>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      />
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <div
-                          class="<removed-for-snapshot-test>"
-                          data-testid="field-selection-status"
-                        >
-                          <div
-                            class="<removed-for-snapshot-test>"
-                          >
-                            <p
-                              class="<removed-for-snapshot-test>"
-                              data-testid="field-selection-status-selected-count"
-                              data-type="text"
-                            >
-                              All
-                            </p>
                           </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="catalog-tree-table-row-no-namespace-pokemon"
-                    >
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-noexpand="true"
-                      >
-                        <label
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <input
-                            aria-checked="true"
-                            checked=""
-                            class="<removed-for-snapshot-test>"
-                            data-testid="selected-switch"
-                            type="checkbox"
-                            value=""
-                          />
-                          <span
-                            class="<removed-for-snapshot-test>"
-                          />
-                        </label>
-                        <div
-                          class="<removed-for-snapshot-test>"
-                        />
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="destination-namespace-cell"
-                      >
-                        <span
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-type="text"
-                          >
-                            '&lt;destination schema&gt;
-                          </p>
-                        </span>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="destination-stream-name-cell"
-                      >
-                        <span
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-type="text"
-                          >
-                            pokemon
-                          </p>
-                        </span>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <div
-                          data-testid="sync-mode-select"
-                        >
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="listbox"
-                            class="<removed-for-snapshot-test>"
-                            data-headlessui-state=""
-                            id="headlessui-listbox-button-:r1:"
-                            type="button"
+                          <div
+                            data-index="1"
+                            data-item-index="1"
+                            data-known-size="50"
+                            item="[object Object]"
                           >
                             <div
                               class="<removed-for-snapshot-test>"
-                              data-error="false"
-                              data-testid="pill-select-button"
+                              data-testid="catalog-tree-table-row-no-namespace-pokemon"
                             >
                               <div
                                 class="<removed-for-snapshot-test>"
+                                data-noexpand="true"
                               >
-                                <p
+                                <label
                                   class="<removed-for-snapshot-test>"
-                                  data-type="text"
                                 >
-                                  Full refresh | Append
-                                </p>
+                                  <input
+                                    aria-checked="true"
+                                    checked=""
+                                    class="<removed-for-snapshot-test>"
+                                    data-testid="selected-switch"
+                                    type="checkbox"
+                                    value=""
+                                  />
+                                  <span
+                                    class="<removed-for-snapshot-test>"
+                                  />
+                                </label>
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                />
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="destination-namespace-cell"
+                              >
+                                <span
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-type="text"
+                                  >
+                                    '&lt;destination schema&gt;
+                                  </p>
+                                </span>
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="destination-stream-name-cell"
+                              >
+                                <span
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-type="text"
+                                  >
+                                    pokemon
+                                  </p>
+                                </span>
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <div
+                                  data-testid="sync-mode-select"
+                                >
+                                  <button
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    class="<removed-for-snapshot-test>"
+                                    data-headlessui-state=""
+                                    id="headlessui-listbox-button-:r1:"
+                                    type="button"
+                                  >
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                      data-error="false"
+                                      data-testid="pill-select-button"
+                                    >
+                                      <div
+                                        class="<removed-for-snapshot-test>"
+                                      >
+                                        <p
+                                          class="<removed-for-snapshot-test>"
+                                          data-type="text"
+                                        >
+                                          Full refresh | Append
+                                        </p>
+                                      </div>
+                                      <div
+                                        class="<removed-for-snapshot-test>"
+                                      />
+                                    </div>
+                                  </button>
+                                  <div
+                                    style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
+                                  />
+                                </div>
                               </div>
                               <div
                                 class="<removed-for-snapshot-test>"
                               />
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                  data-testid="field-selection-status"
+                                >
+                                  <div
+                                    class="<removed-for-snapshot-test>"
+                                  >
+                                    <p
+                                      class="<removed-for-snapshot-test>"
+                                      data-testid="field-selection-status-selected-count"
+                                      data-type="text"
+                                    >
+                                      All
+                                    </p>
+                                  </div>
+                                </div>
+                              </div>
                             </div>
-                          </button>
-                          <div
-                            style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
-                          />
-                        </div>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      />
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <div
-                          class="<removed-for-snapshot-test>"
-                          data-testid="field-selection-status"
-                        >
-                          <div
-                            class="<removed-for-snapshot-test>"
-                          >
-                            <p
-                              class="<removed-for-snapshot-test>"
-                              data-testid="field-selection-status-selected-count"
-                              data-type="text"
-                            >
-                              All
-                            </p>
                           </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="<removed-for-snapshot-test>"
-                      data-testid="catalog-tree-table-row-no-namespace-pokemon2"
-                    >
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-noexpand="true"
-                      >
-                        <label
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <input
-                            aria-checked="false"
-                            class="<removed-for-snapshot-test>"
-                            data-testid="selected-switch"
-                            type="checkbox"
-                            value=""
-                          />
-                          <span
-                            class="<removed-for-snapshot-test>"
-                          />
-                        </label>
-                        <div
-                          class="<removed-for-snapshot-test>"
-                        />
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="destination-namespace-cell"
-                      >
-                        <span
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-type="text"
-                          >
-                            '&lt;destination schema&gt;
-                          </p>
-                        </span>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                        data-testid="destination-stream-name-cell"
-                      >
-                        <span
-                          class="<removed-for-snapshot-test>"
-                        >
-                          <p
-                            class="<removed-for-snapshot-test>"
-                            data-type="text"
-                          >
-                            pokemon2
-                          </p>
-                        </span>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <div
-                          data-testid="sync-mode-select"
-                        >
-                          <button
-                            aria-expanded="false"
-                            aria-haspopup="listbox"
-                            class="<removed-for-snapshot-test>"
-                            data-headlessui-state=""
-                            id="headlessui-listbox-button-:r2:"
-                            type="button"
+                          <div
+                            data-index="2"
+                            data-item-index="2"
+                            data-known-size="50"
+                            item="[object Object]"
                           >
                             <div
                               class="<removed-for-snapshot-test>"
-                              data-error="false"
-                              data-testid="pill-select-button"
+                              data-testid="catalog-tree-table-row-no-namespace-pokemon2"
                             >
                               <div
                                 class="<removed-for-snapshot-test>"
+                                data-noexpand="true"
+                              >
+                                <label
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <input
+                                    aria-checked="false"
+                                    class="<removed-for-snapshot-test>"
+                                    data-testid="selected-switch"
+                                    type="checkbox"
+                                    value=""
+                                  />
+                                  <span
+                                    class="<removed-for-snapshot-test>"
+                                  />
+                                </label>
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                />
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="destination-namespace-cell"
+                              >
+                                <span
+                                  class="<removed-for-snapshot-test>"
+                                >
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-type="text"
+                                  >
+                                    '&lt;destination schema&gt;
+                                  </p>
+                                </span>
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                                data-testid="destination-stream-name-cell"
                               >
-                                <p
+                                <span
                                   class="<removed-for-snapshot-test>"
-                                  data-type="text"
                                 >
-                                  Full refresh | Append
-                                </p>
+                                  <p
+                                    class="<removed-for-snapshot-test>"
+                                    data-type="text"
+                                  >
+                                    pokemon2
+                                  </p>
+                                </span>
+                              </div>
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <div
+                                  data-testid="sync-mode-select"
+                                >
+                                  <button
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    class="<removed-for-snapshot-test>"
+                                    data-headlessui-state=""
+                                    id="headlessui-listbox-button-:r2:"
+                                    type="button"
+                                  >
+                                    <div
+                                      class="<removed-for-snapshot-test>"
+                                      data-error="false"
+                                      data-testid="pill-select-button"
+                                    >
+                                      <div
+                                        class="<removed-for-snapshot-test>"
+                                      >
+                                        <p
+                                          class="<removed-for-snapshot-test>"
+                                          data-type="text"
+                                        >
+                                          Full refresh | Append
+                                        </p>
+                                      </div>
+                                      <div
+                                        class="<removed-for-snapshot-test>"
+                                      />
+                                    </div>
+                                  </button>
+                                  <div
+                                    style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
+                                  />
+                                </div>
                               </div>
                               <div
                                 class="<removed-for-snapshot-test>"
                               />
+                              <div
+                                class="<removed-for-snapshot-test>"
+                              >
+                                <div
+                                  class="<removed-for-snapshot-test>"
+                                  data-testid="field-selection-status"
+                                >
+                                  <div
+                                    class="<removed-for-snapshot-test>"
+                                  >
+                                    <p
+                                      class="<removed-for-snapshot-test>"
+                                      data-testid="field-selection-status-selected-count"
+                                      data-type="text"
+                                    >
+                                      All
+                                    </p>
+                                  </div>
+                                </div>
+                              </div>
                             </div>
-                          </button>
-                          <div
-                            style="position: absolute; z-index: 9999; top: 0px; left: 0px; transform: translate(0px,5px);"
-                          />
-                        </div>
-                      </div>
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      />
-                      <div
-                        class="<removed-for-snapshot-test>"
-                      >
-                        <div
-                          class="<removed-for-snapshot-test>"
-                          data-testid="field-selection-status"
-                        >
-                          <div
-                            class="<removed-for-snapshot-test>"
-                          >
-                            <p
-                              class="<removed-for-snapshot-test>"
-                              data-testid="field-selection-status-selected-count"
-                              data-type="text"
-                            >
-                              All
-                            </p>
                           </div>
                         </div>
                       </div>