From a2809f71154b7c46232d4ee7cd1faa29a25245b8 Mon Sep 17 00:00:00 2001 From: Seyed Mahmoud SHAHROKNI Date: Tue, 25 Nov 2025 15:13:06 +0100 Subject: [PATCH 1/3] [FEATURE] Table Add data link settings under column settings Signed-off-by: Seyed Mahmoud SHAHROKNI Signed-off-by: Seyed Mahmoud SHAHROKNI Signed-off-by: Seyed Mahmoud SHAHROKNI Signed-off-by: Seyed Mahmoud SHAHROKNI --- table/schemas/table.cue | 5 + .../components/ColumnsEditor/ColumnEditor.tsx | 169 +++++++++++++++++- table/src/models/table-model.ts | 6 + 3 files changed, 179 insertions(+), 1 deletion(-) diff --git a/table/schemas/table.cue b/table/schemas/table.cue index e1132d94..8d1c8061 100644 --- a/table/schemas/table.cue +++ b/table/schemas/table.cue @@ -45,6 +45,11 @@ spec: close({ width?: number | "auto" hide?: bool cellSettings?: [...#cellSettings] + dataLink?: { + url: string + title?: string + openNewTab: bool + } } #valueCondition: { diff --git a/table/src/components/ColumnsEditor/ColumnEditor.tsx b/table/src/components/ColumnsEditor/ColumnEditor.tsx index ac63b5d9..eae8b4c4 100644 --- a/table/src/components/ColumnsEditor/ColumnEditor.tsx +++ b/table/src/components/ColumnsEditor/ColumnEditor.tsx @@ -11,7 +11,22 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Button, ButtonGroup, Stack, StackProps, Switch, TextField } from '@mui/material'; +import { + Box, + Button, + ButtonGroup, + DialogActions, + DialogContent, + DialogTitle, + FormControl, + FormLabel, + IconButton, + Stack, + StackProps, + Switch, + TextField, + Typography, +} from '@mui/material'; import { ReactElement, useState } from 'react'; import { AlignSelector, @@ -21,9 +36,14 @@ import { OptionsEditorGrid, OptionsEditorGroup, SortSelectorButtons, + Dialog, } from '@perses-dev/components'; import { FormatOptions } from '@perses-dev/core'; import { PluginKindSelect } from '@perses-dev/plugin-system'; +import ContentCopyIcon from 'mdi-material-ui/ContentCopy'; +import DeleteIcon from 'mdi-material-ui/Delete'; +import InformationIcon from 'mdi-material-ui/Information'; +import LinkIcon from 'mdi-material-ui/Link'; import { ColumnSettings } from '../../models'; import { ConditionalPanel } from '../ConditionalPanel'; @@ -39,13 +59,120 @@ export interface ColumnEditorProps extends Omit { onChange: (column: ColumnSettings) => void; } +type LinkManagementDialogueProps = Pick & { + actionTitle: string; + open: boolean; + setOpen: (value: boolean) => void; +}; +const LinkManagementDialogue = (props: LinkManagementDialogueProps): ReactElement => { + const { + actionTitle, + open, + column: { dataLink }, + column, + onChange, + setOpen, + } = props; + + const [url, setUrl] = useState(dataLink?.url); + const [title, setTitle] = useState(dataLink?.title); + const [openNewTab, setOpenNewTab] = useState(!!dataLink?.openNewTab); + + const handleSaveDataLink = (): void => { + if (!url) return; + onChange({ ...column, dataLink: { url, title, openNewTab } }); + setOpen(false); + }; + + return ( + + {actionTitle} + + + + + URL + + { + setUrl(e.target.value); + }} + type="url" + placeholder="http://target.com/x/{dynamic}/z" + value={url} + /> + + + + Title + { + setTitle(e.target.value); + }} + placeholder="Title" + type="text" + value={title} + /> + + + Open in new tab + + { + setOpenNewTab(e.target.checked); + }} + checked={openNewTab} + /> + + + + + + + {`You can create dynamic links by proper positioning of {dynamic}`} + + + + + + + + + + + ); +}; + export function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps): ReactElement { const [width, setWidth] = useState( column.width === undefined || column.width === 'auto' ? 100 : column.width ); + const [openAddLinkDialogue, setOpenAddLinkDialogue] = useState(false); + const linkManagementAction = column?.dataLink ? 'Edit Link' : 'Add Link'; + return ( + @@ -206,6 +333,46 @@ export function ColumnEditor({ column, onChange, ...others }: ColumnEditorProps) )} + + + } + onClick={(): void => { + setOpenAddLinkDialogue(true); + }} + > + {linkManagementAction} + + } + /> + {column?.dataLink?.url && ( + + + {column?.dataLink?.title || column?.dataLink?.url} + + { + if (column?.dataLink?.url) navigator.clipboard.writeText(column?.dataLink?.url); + }} + size="small" + > + + + { + onChange({ ...column, dataLink: undefined }); + }} + size="small" + > + + + + )} + + diff --git a/table/src/models/table-model.ts b/table/src/models/table-model.ts index c23487d7..52bc071d 100644 --- a/table/src/models/table-model.ts +++ b/table/src/models/table-model.ts @@ -63,6 +63,12 @@ export interface ColumnSettings { hide?: boolean; // Customize cell display based on their value for this specific column. cellSettings?: CellSettings[]; + + dataLink?: { + url: string; + title?: string; + openNewTab: boolean; + }; } export interface ValueCondition { From 4883b7c481309578e92eafd5891f9250f153e30b Mon Sep 17 00:00:00 2001 From: Seyed Mahmoud SHAHROKNI Date: Thu, 27 Nov 2025 16:28:26 +0100 Subject: [PATCH 2/3] first iteration Signed-off-by: Seyed Mahmoud SHAHROKNI --- table/src/components/ColumnsEditor/ColumnEditor.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/table/src/components/ColumnsEditor/ColumnEditor.tsx b/table/src/components/ColumnsEditor/ColumnEditor.tsx index eae8b4c4..2878f9cd 100644 --- a/table/src/components/ColumnsEditor/ColumnEditor.tsx +++ b/table/src/components/ColumnsEditor/ColumnEditor.tsx @@ -64,7 +64,7 @@ type LinkManagementDialogueProps = Pick void; }; -const LinkManagementDialogue = (props: LinkManagementDialogueProps): ReactElement => { +const LinkManagementDialog = (props: LinkManagementDialogueProps): ReactElement => { const { actionTitle, open, @@ -143,7 +143,9 @@ const LinkManagementDialogue = (props: LinkManagementDialogueProps): ReactElemen - +