Repository: apache/airflow
File: airflow-core/src/airflow/ui/src/pages/Connections/Connections.tsx (TypeScript)

Code before:
  {
    accessorKey: "actions",
    cell: ({ row: { original } }) => (
      <Flex justifyContent="end">
        <TestConnectionButton connection={original} />
        <EditConnectionButton connection={original} disabled={selectedRows.size > 0} />
        <DeleteConnectionButton connectionId={original.connection_id} disabled={selectedRows.size > 0} />
      </Flex>
    ),
    enableSorting: false,
    header: "",
    meta: {
      skeletonWidth: 10,
    },
  },
];

export const Connections = () => {
  const { t: translate } = useTranslation(["admin", "common"]);
  const { setTableURLState, tableURLState } = useTableURLState();
  const [searchParams, setSearchParams] = useSearchParams();
  const { NAME_PATTERN, OFFSET }: SearchParamsKeysType = SearchParamsKeys;
  const [connectionIdPattern, setConnectionIdPattern] = useState(searchParams.get(NAME_PATTERN) ?? undefined);

  useConnectionTypeMeta(); // Pre-fetch connection type metadata
  const { pagination, sorting } = tableURLState;
  const [sort] = sorting;
  const orderBy = sort ? [`${sort.desc ? "-" : ""}${sort.id}`] : ["connection_id"];
  const { data, error, isFetching, isLoading } = useConnectionServiceGetConnections({
    connectionIdPattern: connectionIdPattern ?? undefined,
    limit: pagination.pageSize,
    offset: pagination.pageIndex * pagination.pageSize,
    orderBy,
  });

  const { allRowsSelected, clearSelections, handleRowSelect, handleSelectAll, selectedRows } =
    useRowSelection({
      data: data?.connections,
      getKey: (connection) => connection.connection_id,
    });

  const columns = getColumns({
    allRowsSelected,
    onRowSelect: handleRowSelect,
    onSelectAll: handleSelectAll,
    selectedRows,
    translate,
  });

  const handleSearchChange = (value: string) => {
    if (value) {

Review comment (suggestion):
Thanks for the PR.


We tend to never mutate objects because react diffing algorithm will compare references and not render the update if the object was mutated in place.

This is why you see a lot of:
```
const newArray = [...oldArray, ,newItem]
```

Here we are outside of a react component so it should be fine. (a new columns object is created on every render anyway)

Code after:
      accessorKey: "port",
      header: translate("connections.columns.port"),
    },
    {
      accessorKey: "actions",
      cell: ({ row: { original } }) => (
        <Flex justifyContent="end">
          <TestConnectionButton connection={original} />
          <EditConnectionButton connection={original} disabled={selectedRows.size > 0} />
          <DeleteConnectionButton connectionId={original.connection_id} disabled={selectedRows.size > 0} />
        </Flex>
      ),
      enableSorting: false,
      header: "",
      meta: {
        skeletonWidth: 10,
      },
    },
  ];

  if (multiTeam) {
    columns.splice(6, 0, {
      accessorKey: "team_name",
      header: translate("columns.team"),
    });
  }

  return columns;
};

export const Connections = () => {
  const { t: translate } = useTranslation(["admin", "common"]);
  const { setTableURLState, tableURLState } = useTableURLState();
  const [searchParams, setSearchParams] = useSearchParams();
  const { NAME_PATTERN, OFFSET }: SearchParamsKeysType = SearchParamsKeys;
  const [connectionIdPattern, setConnectionIdPattern] = useState(searchParams.get(NAME_PATTERN) ?? undefined);
  const multiTeamEnabled = Boolean(useConfig("multi_team"));

  useConnectionTypeMeta(); // Pre-fetch connection type metadata
  const { pagination, sorting } = tableURLState;
  const [sort] = sorting;
  const orderBy = sort ? [`${sort.desc ? "-" : ""}${sort.id}`] : ["connection_id"];
  const { data, error, isFetching, isLoading } = useConnectionServiceGetConnections({
    connectionIdPattern: connectionIdPattern ?? undefined,
    limit: pagination.pageSize,
    offset: pagination.pageIndex * pagination.pageSize,
    orderBy,
  });

  const { allRowsSelected, clearSelections, handleRowSelect, handleSelectAll, selectedRows } =
    useRowSelection({