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

Code before:
    } else {
      searchParams.delete(NAME_PATTERN);
    }
    setTableURLState({
      pagination: { ...pagination, pageIndex: 0 },
      sorting,
    });
    searchParams.delete(OFFSET);
    setSearchParams(searchParams);
    setVariableKeyPattern(value);
  };

  return (
    <>
      <VStack alignItems="none">
        <SearchBar
          defaultValue={variableKeyPattern ?? ""}
          onChange={handleSearchChange}
          placeholder={translate("variables.searchPlaceholder")}
        />
        <HStack gap={4} mt={2}>
          <ImportVariablesButton disabled={selectedRows.size > 0} />
          <Spacer />
          <ExpandCollapseButtons
            collapseLabel = {translate("common:collapseAllExtra")}
            expandLabel = {translate("common:expandAllExtra")}
            onCollapse = {onClose}
            onExpand = {onOpen}
          />
          <AddVariableButton disabled={selectedRows.size > 0} />
        </HStack>
      </VStack>
      <Box overflow="auto">
        <DataTable
          columns={columns}
          data={data?.variables ?? []}
          errorMessage={<ErrorAlert error={error} />}
          initialState={tableURLState}
          isFetching={isFetching}
          isLoading={isLoading}
          modelName="admin:variables.variable"
          noRowsMessage={translate("variables.noRowsMessage")}
          onStateChange={setTableURLState}
          total={data?.total_entries ?? 0}
        />
      </Box>
      <ActionBar.Root closeOnInteractOutside={false} open={Boolean(selectedRows.size)}>
        <ActionBar.Content>
          <ActionBar.SelectionTrigger>
            {selectedRows.size} {translate("deleteActions.selected")}
          </ActionBar.SelectionTrigger>

Review comment (suggestion):
Tooltip isn't accurate. That mention "JSON" but it's not JSON.

<img width="774" height="387" alt="Image" src="https://github.com/user-attachments/assets/1afd9a7b-6a97-4f57-9d34-a7f9affe25b2" />

You can instead use the generic "expand.collapse" and "expand.expand" keys.

Code after:
    allRowsSelected,
    multiTeam: multiTeamEnabled,
    onRowSelect: handleRowSelect,
    onSelectAll: handleSelectAll,
    open,
    selectedRows,
    translate,
  });

  const handleSearchChange = (value: string) => {
    if (value) {
      searchParams.set(NAME_PATTERN, value);
    } else {
      searchParams.delete(NAME_PATTERN);
    }
    setTableURLState({
      pagination: { ...pagination, pageIndex: 0 },
      sorting,
    });
    searchParams.delete(OFFSET);
    setSearchParams(searchParams);
    setVariableKeyPattern(value);
  };

  return (
    <>
      <VStack alignItems="none">
        <SearchBar
          defaultValue={variableKeyPattern ?? ""}
          onChange={handleSearchChange}
          placeholder={translate("variables.searchPlaceholder")}
        />
        <HStack gap={4} mt={2}>
          <ImportVariablesButton disabled={selectedRows.size > 0} />
          <Spacer />
          <ExpandCollapseButtons
            collapseLabel={translate("common:expand.collapse")}
            expandLabel={translate("common:expand.expand")}
            onCollapse={onClose}
            onExpand={onOpen}
          />
          <AddVariableButton disabled={selectedRows.size > 0} />
        </HStack>
      </VStack>
      <Box overflow="auto">
        <DataTable
          columns={columns}
          data={data?.variables ?? []}
          errorMessage={<ErrorAlert error={error} />}
          initialState={tableURLState}
          isFetching={isFetching}