chore: [SyncCatalog V2] always show expand/collapse control (#13884)

Author: dizel852

airbyte-webapp/src/components/connection/ConnectionForm/SyncCatalogTable/SyncCatalogTable.tsx

@@ -32,19 +32,20 @@ import { useConnectionFormService } from "hooks/services/ConnectionForm/Connecti
 import { useExperiment } from "hooks/services/Experiment";
 
 import { CursorCell } from "./components/CursorCell";
+import { ExpandCollapseAllControl } from "./components/ExpandCollapseAllControl";
 import { FieldCursorCell } from "./components/FieldCursorCell";
 import { FieldHashMapping } from "./components/FieldHashMapping";
 import { FieldPKCell } from "./components/FieldPKCell";
 import { FormControls } from "./components/FormControls";
 import { HeaderNamespaceCell } from "./components/HeaderNamespaceCell";
 import { NamespaceNameCell } from "./components/NamespaceNameCell";
 import { PKCell } from "./components/PKCell";
+import { RefreshSchemaControl } from "./components/RefreshSchemaControl";
 import { SelectedFieldsCell } from "./components/SelectedFieldsCell";
 import { StreamFieldNameCell } from "./components/StreamFieldCell";
 import { StreamNameCell } from "./components/StreamNameCell";
 import { FilterTabId, StreamsFilterTabs } from "./components/StreamsFilterTabs";
 import { SyncModeCell } from "./components/SyncModeCell";
-import { TableControls } from "./components/TableControls";
 import { useInitialRowIndex } from "./hooks/useInitialRowIndex";
 import styles from "./SyncCatalogTable.module.scss";
 import { getRowChangeStatus, getSyncCatalogRows, isNamespaceRow, isStreamRow } from "./utils";
@@ -451,7 +452,7 @@ export const SyncCatalogTable: FC<SyncCatalogTableProps> = ({ scrollParentContai
 
   return (
     <>
-      <Box p="md" pl="xl" className={styles.stickyControlsContainer}>
+      <Box p="md" pl="xl" pr="xl" className={styles.stickyControlsContainer}>
         {debugTable && (
           <Box p="md">
             {JSON.stringify(
@@ -481,17 +482,23 @@ export const SyncCatalogTable: FC<SyncCatalogTableProps> = ({ scrollParentContai
           <FlexContainer>
             <FlexContainer justifyContent="flex-end" alignItems="center" direction="row" gap="lg">
               {mode === "create" ? (
-                <TableControls
-                  isAllRowsExpanded={isAllStreamRowsExpanded}
-                  toggleAllRowsExpanded={toggleAllStreamRowsExpanded}
-                />
+                <>
+                  <RefreshSchemaControl />
+                  <ExpandCollapseAllControl
+                    isAllRowsExpanded={isAllStreamRowsExpanded}
+                    toggleAllRowsExpanded={toggleAllStreamRowsExpanded}
+                  />
+                </>
               ) : (
-                <FormControls>
-                  <TableControls
+                <>
+                  <FormControls>
+                    <RefreshSchemaControl />
+                  </FormControls>
+                  <ExpandCollapseAllControl
                     isAllRowsExpanded={isAllStreamRowsExpanded}
                     toggleAllRowsExpanded={toggleAllStreamRowsExpanded}
                   />
-                </FormControls>
+                </>
               )}
             </FlexContainer>
           </FlexContainer>

airbyte-webapp/src/components/connection/ConnectionForm/SyncCatalogTable/components/ExpandCollapseAllControl.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { Button } from "components/ui/Button";
+import { Tooltip } from "components/ui/Tooltip";
+
+interface ExpandCollapseAllControlProps {
+  isAllRowsExpanded: boolean;
+  toggleAllRowsExpanded: (expanded: boolean) => void;
+}
+
+export const ExpandCollapseAllControl: React.FC<ExpandCollapseAllControlProps> = ({
+  isAllRowsExpanded,
+  toggleAllRowsExpanded,
+}) => (
+  <Tooltip
+    placement="top"
+    control={
+      <Button
+        icon={isAllRowsExpanded ? "collapseAll" : "expandAll"}
+        variant="secondary"
+        type="button"
+        onClick={() => toggleAllRowsExpanded(!isAllRowsExpanded)}
+      />
+    }
+  >
+    <FormattedMessage id={isAllRowsExpanded ? "tables.collapseAll" : "tables.expandAll"} />
+  </Tooltip>
+);

airbyte-webapp/src/components/connection/ConnectionForm/SyncCatalogTable/components/RefreshSchemaControl.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useFormState } from "react-hook-form";
+import { FormattedMessage } from "react-intl";
+
+import { Button } from "components/ui/Button";
+import { Tooltip } from "components/ui/Tooltip";
+
+import { FormConnectionFormValues } from "../../formConfig";
+import { useRefreshSourceSchemaWithConfirmationOnDirty } from "../../refreshSourceSchemaWithConfirmationOnDirty";
+
+export const RefreshSchemaControl: React.FC = () => {
+  const { isDirty } = useFormState<FormConnectionFormValues>();
+  const refreshSchema = useRefreshSourceSchemaWithConfirmationOnDirty(isDirty);
+
+  return (
+    <Tooltip
+      placement="top"
+      control={<Button variant="secondary" icon="rotate" type="button" onClick={refreshSchema} />}
+    >
+      <FormattedMessage id="connection.updateSchema" />
+    </Tooltip>
+  );
+};