This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun pushed a commit to branch v3-1-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-1-test by this push:
new 546e9a09e18 UI variables page: added option to view text as multi
lines (#61679) (#62779)
546e9a09e18 is described below
commit 546e9a09e180c5c8167508bbef6465385bea0f4b
Author: Pierre Jeambrun <[email protected]>
AuthorDate: Tue Mar 3 11:44:15 2026 +0100
UI variables page: added option to view text as multi lines (#61679)
(#62779)
* Variables page added a button to set or unset text trim
* ui variable page, fold and expand buttons:
* reused expandCollapse component
* used useDisclosure instead of useState
* affect only the variable.value field
* * Variable page fold/expand buttons affect also variable.description
* tooltip text fixed
* formatting issues resolved
(cherry picked from commit 5764d69208ff39aa77ed9f43b16908e048ebc628)
Co-authored-by: Tomi <[email protected]>
---
.../airflow/ui/src/pages/Variables/Variables.tsx | 37 +++++++++++++++++++---
1 file changed, 32 insertions(+), 5 deletions(-)
diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
index c9d3e623d7f..fe4da5a688a 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/Variables.tsx
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { Flex, HStack, Spacer, VStack } from "@chakra-ui/react";
+import { Flex, HStack, Spacer, VStack, useDisclosure } from "@chakra-ui/react";
import type { ColumnDef } from "@tanstack/react-table";
import type { TFunction } from "i18next";
import { useEffect, useMemo, useState } from "react";
@@ -30,6 +30,7 @@ import { DataTable } from "src/components/DataTable";
import { useRowSelection, type GetColumnsParams } from
"src/components/DataTable/useRowSelection";
import { useTableURLState } from "src/components/DataTable/useTableUrlState";
import { ErrorAlert } from "src/components/ErrorAlert";
+import { ExpandCollapseButtons } from "src/components/ExpandCollapseButtons";
import { SearchBar } from "src/components/SearchBar";
import { Button, Tooltip } from "src/components/ui";
import { ActionBar } from "src/components/ui/ActionBar";
@@ -44,13 +45,19 @@ import AddVariableButton from
"./ManageVariable/AddVariableButton";
import DeleteVariableButton from "./ManageVariable/DeleteVariableButton";
import EditVariableButton from "./ManageVariable/EditVariableButton";
+type ColumnProps = {
+ readonly open: boolean;
+ readonly translate: TFunction;
+};
+
const getColumns = ({
allRowsSelected,
onRowSelect,
onSelectAll,
+ open,
selectedRows,
translate,
-}: { translate: TFunction } & GetColumnsParams):
Array<ColumnDef<VariableResponse>> => [
+}: ColumnProps & GetColumnsParams): Array<ColumnDef<VariableResponse>> => [
{
accessorKey: "select",
cell: ({ row }) => (
@@ -82,12 +89,24 @@ const getColumns = ({
},
{
accessorKey: "value",
- cell: ({ row }) => <TrimText showTooltip text={row.original.value} />,
+ cell: ({ row }) => (
+ <TrimText
+ charLimit={open ? row.original.value.length : undefined}
+ showTooltip
+ text={row.original.value}
+ />
+ ),
header: translate("columns.value"),
},
{
accessorKey: "description",
- cell: ({ row }) => <TrimText showTooltip text={row.original.description}
/>,
+ cell: ({ row }) => (
+ <TrimText
+ charLimit={open ? row.original.description?.length : undefined}
+ showTooltip
+ text={row.original.description}
+ />
+ ),
header: translate("columns.description"),
},
{
@@ -117,6 +136,7 @@ export const Variables = () => {
sorting: [{ desc: false, id: "key" }],
}); // To make multiselection smooth
const [searchParams, setSearchParams] = useSearchParams();
+ const { onClose, onOpen, open } = useDisclosure();
const { NAME_PATTERN, OFFSET }: SearchParamsKeysType = SearchParamsKeys;
const [variableKeyPattern, setVariableKeyPattern] =
useState(searchParams.get(NAME_PATTERN) ?? undefined);
const [selectedVariables, setSelectedVariables] = useState<Record<string,
string | undefined>>({});
@@ -143,10 +163,11 @@ export const Variables = () => {
allRowsSelected,
onRowSelect: handleRowSelect,
onSelectAll: handleSelectAll,
+ open,
selectedRows,
translate,
}),
- [allRowsSelected, handleRowSelect, handleSelectAll, selectedRows,
translate],
+ [allRowsSelected, handleRowSelect, handleSelectAll, open, selectedRows,
translate],
);
const handleSearchChange = (value: string) => {
@@ -199,6 +220,12 @@ export const Variables = () => {
<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>
