npm - @cobaltcore-dev/aurora - Versions diffs - 0.8.1 → 0.10.0 - Mend

@cobaltcore-dev/aurora 0.8.1 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/dist/client/{securitygroups-CNFLu9zS.mjs.map → securitygroups-CcA2TpAt.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"securitygroups-CNFLu9zS.mjs","names":["React","useState","Modal","Button","ModalFooter","ButtonRow","Message","TextInput","DeleteSecurityGroupDialog","isOpen","onClose","securityGroup","onDelete","isDeleting","error","useLingui","confirmationText","setConfirmationText","deleteWord","t","isDeleteEnabled","toLowerCase","securityGroupName","name","id","handleDelete","e","preventDefault","handleClose","open","onCancel","size","title","modalFooter","className","variant","onClick","disabled","data-testid","div","dismissible","p","strong","value","onChange","target","placeholder","autoComplete","DataGridCell","DataGridRow","PopupMenu","PopupMenuItem","PopupMenuOptions","SecurityGroupTableRow","securityGroup","sg","permissions","onEdit","onDelete","onViewDetails","isReadOnly","useLingui","BooleanValue","value","span","t","handleShowDetails","data-testid","id","onClick","className","div","p","name","description","shared","project_id","stateful","e","stopPropagation","label","canUpdate","canDelete","useState","useEffect","useRef","DataGrid","DataGridHeadCell","DataGridRow","Stack","Spinner","useNavigate","useProjectId","EditSecurityGroupModal","DeleteSecurityGroupDialog","SecurityGroupTableRow","SecurityGroupListContainer","securityGroups","isLoading","isError","error","permissions","onDeleteSecurityGroup","isDeletingSecurityGroup","deleteError","onUpdateSecurityGroup","isUpdatingSecurityGroup","updateError","currentProjectId","useLingui","navigate","projectId","selectedSecurityGroup","setSelectedSecurityGroup","editModalOpen","setEditModalOpen","deleteDialogOpen","setDeleteDialogOpen","prevIsDeletingRef","prevIsUpdatingRef","handleEdit","sg","handleDelete","handleViewDetails","to","params","securityGroupId","id","closeEditModal","closeDeleteDialog","deletionJustFinished","current","updateJustFinished","className","distribution","alignment","direction","variant","size","message","t","length","columns","map","label","isReadOnly","Boolean","project_id","securityGroup","onEdit","onDelete","onViewDetails","open","onClose","onUpdate","data","isOpen","isDeleting","React","useState","Modal","Form","FormRow","FormSection","TextInput","Checkbox","Button","ButtonRow","Spinner","ModalFooter","Textarea","Message","defaultSecurityGroupValues","name","description","stateful","CreateSecurityGroupModal","isOpen","onClose","onCreate","isLoading","error","useLingui","properties","setProperties","errors","setErrors","handleInputChange","e","value","type","target","checked","prev","newErrors","validateForm","trim","t","Object","keys","length","handleSubmit","preventDefault","securityGroupData","undefined","handleClose","open","onCancel","size","title","modalFooter","className","variant","onClick","disabled","data-testid","dismissible","div","span","id","label","onChange","required","errortext","placeholder","rows","useState","useNavigate","Button","trpcReact","ListToolbar","buildFilterParams","useListWithFiltering","useProjectId","SecurityGroupListContainer","CreateSecurityGroupModal","SECURITY_GROUP_SHARED","TRUE","FALSE","SecurityGroups","useLingui","navigate","projectId","createModalOpen","setCreateModalOpen","deleteError","setDeleteError","createError","setCreateError","updateError","setUpdateError","searchTerm","sortSettings","filterSettings","handleSearchChange","handleSortChange","handleFilterChange","defaultSortKey","defaultSortDir","sortOptions","label","t","value","filters","displayName","filterName","values","Object","supportsMultiValue","utils","useUtils","permissions","canCreate","canUpdate","canDelete","canManageAccess","data","securityGroups","isLoading","isError","error","network","securityGroup","list","useQuery","project_id","sort_key","sortBy","sort_dir","sortDirection","enabled","createSecurityGroupMutation","create","useMutation","onSuccess","createdSecurityGroup","invalidate","to","params","securityGroupId","id","onError","message","deleteSecurityGroupMutation","deleteById","updateSecurityGroupMutation","update","handleCreateSecurityGroup","securityGroupData","mutateAsync","handleDeleteSecurityGroup","mutate","handleUpdateSecurityGroup","div","className","onSort","onFilter","onSearch","actions","onClick","variant","onCreateClick","onDeleteSecurityGroup","isDeletingSecurityGroup","isPending","onUpdateSecurityGroup","isUpdatingSecurityGroup","currentProjectId","isOpen","onClose","onCreate","useLingui","SecurityGroups","ContentHeading","RouteComponent","t","component"],"sources":["../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/-modals/DeleteSecurityGroupDialog.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/SecurityGroupTableRow.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/SecurityGroupListContainer.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/-modals/CreateSecurityGroupModal.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/SecurityGroupsList.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/index.tsx?tsr-split=component"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Modal, Button, ModalFooter, ButtonRow, Message, TextInput } from \"@cloudoperators/juno-ui-components\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport type { SecurityGroup } from \"@/server/Network/types/securityGroup\"\n\ninterface DeleteSecurityGroupDialogProps {\n isOpen: boolean\n securityGroup: SecurityGroup\n onClose: () => void\n onDelete: (securityGroupId: string) => void\n isDeleting?: boolean\n error?: string \| null\n}\n\nexport const DeleteSecurityGroupDialog: React.FC<DeleteSecurityGroupDialogProps> = ({\n isOpen,\n onClose,\n securityGroup,\n onDelete,\n isDeleting = false,\n error = null,\n}) => {\n const { t } = useLingui()\n const [confirmationText, setConfirmationText] = useState(\"\")\n\n const deleteWord = t`delete`\n const isDeleteEnabled = confirmationText.toLowerCase() === deleteWord.toLowerCase()\n const securityGroupName = securityGroup.name \|\| securityGroup.id\n\n const handleDelete = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault()\n if (isDeleteEnabled && !isDeleting) {\n onDelete(securityGroup.id)\n }\n }\n\n const handleClose = () => {\n setConfirmationText(\"\")\n onClose()\n }\n\n return (\n <Modal\n open={isOpen}\n onCancel={handleClose}\n size=\"small\"\n title={t`Delete Security Group \"${securityGroupName}\"`}\n modalFooter={\n <ModalFooter className=\"flex justify-end\">\n <ButtonRow>\n <Button variant=\"default\" onClick={handleClose} disabled={isDeleting}>\n <Trans>Cancel</Trans>\n </Button>\n <Button\n variant=\"primary-danger\"\n onClick={handleDelete}\n disabled={!isDeleteEnabled \|\| isDeleting}\n data-testid=\"confirm-delete-button\"\n >\n {isDeleting ? <Trans>Deleting...</Trans> : <Trans>Delete</Trans>}\n </Button>\n </ButtonRow>\n </ModalFooter>\n }\n >\n <div>\n {/* Error Message /}\n {error && (\n <Message dismissible={false} variant=\"error\" className=\"mt-4\">\n {error}\n </Message>\n )}\n\n {/ Warning /}\n <Trans>This action cannot be undone. The security group will be permanently deleted.</Trans>\n\n {/ Confirmation Input /}\n <div className=\"mt-4\">\n <p className=\"mb-2 text-sm\">\n <Trans>\n Type <strong>{deleteWord}</strong> to confirm:\n </Trans>\n </p>\n <TextInput\n id=\"confirmation\"\n name=\"confirmation\"\n value={confirmationText}\n onChange={(e) => setConfirmationText(e.target.value)}\n placeholder={deleteWord}\n disabled={isDeleting}\n autoComplete=\"off\"\n data-testid=\"delete-confirmation-input\"\n />\n </div>\n </div>\n </Modal>\n )\n}\n","import {\n DataGridCell,\n DataGridRow,\n PopupMenu,\n PopupMenuItem,\n PopupMenuOptions,\n} from \"@cloudoperators/juno-ui-components\"\nimport { useLingui, Trans } from \"@lingui/react/macro\"\nimport type { SecurityGroup } from \"@/server/Network/types/securityGroup\"\n\nexport interface SecurityGroupPermissions {\n canCreate: boolean\n canUpdate: boolean\n canDelete: boolean\n canManageAccess: boolean\n}\n\ninterface SecurityGroupTableRowProps {\n securityGroup: SecurityGroup\n permissions: SecurityGroupPermissions\n onEdit: (sg: SecurityGroup) => void\n onDelete: (sg: SecurityGroup) => void\n onViewDetails?: (sg: SecurityGroup) => void\n isReadOnly?: boolean\n}\n\nexport function SecurityGroupTableRow({\n securityGroup: sg,\n permissions,\n onEdit,\n onDelete,\n onViewDetails,\n isReadOnly = false,\n}: SecurityGroupTableRowProps) {\n const { t } = useLingui()\n\n const BooleanValue = ({ value }: { value: boolean \| undefined }) => <span>{value ? t`Yes` : t`No`}</span>\n\n const handleShowDetails = () => {\n if (onViewDetails) {\n onViewDetails(sg)\n }\n }\n\n return (\n <DataGridRow\n key={sg.id}\n data-testid={`security-group-row-${sg.id}`}\n onClick={handleShowDetails}\n className=\"hover:bg-theme-background-lvl-2 cursor-pointer\"\n >\n <DataGridCell>\n <div>\n <p className=\"text-md\">{sg.name}</p>\n <p className=\"text-theme-light text-xs\">{sg.id}</p>\n </div>\n </DataGridCell>\n <DataGridCell>{sg.description \|\| t`—`}</DataGridCell>\n <DataGridCell>\n <BooleanValue value={sg.shared} />\n {sg.shared && (\n <p>\n <Trans>Owner</Trans>: <span className=\"text-theme-light text-xs\">{sg.project_id}</span>\n </p>\n )}\n </DataGridCell>\n <DataGridCell>\n <BooleanValue value={sg.stateful} />\n </DataGridCell>\n <DataGridCell onClick={(e) => e.stopPropagation()} className=\"items-end justify-end pr-0\">\n <PopupMenu>\n <PopupMenuOptions>\n <PopupMenuItem label={t`Show Details`} onClick={() => handleShowDetails()} />\n {permissions.canUpdate && !isReadOnly && <PopupMenuItem label={t`Edit`} onClick={() => onEdit(sg)} />}\n {permissions.canDelete && !isReadOnly && <PopupMenuItem label={t`Delete`} onClick={() => onDelete(sg)} />}\n </PopupMenuOptions>\n </PopupMenu>\n </DataGridCell>\n </DataGridRow>\n )\n}\n","import { useState, useEffect, useRef } from \"react\"\nimport { DataGrid, DataGridHeadCell, DataGridRow, Stack, Spinner } from \"@cloudoperators/juno-ui-components\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport { useNavigate } from \"@tanstack/react-router\"\nimport { useProjectId } from \"@/client/hooks\"\nimport type { SecurityGroup } from \"@/server/Network/types/securityGroup\"\nimport type { UpdateSecurityGroupInput } from \"@/server/Network/types/securityGroup\"\nimport { EditSecurityGroupModal } from \"./-modals/EditSecurityGroupModal\"\nimport { DeleteSecurityGroupDialog } from \"./-modals/DeleteSecurityGroupDialog\"\nimport { SecurityGroupTableRow, type SecurityGroupPermissions } from \"./SecurityGroupTableRow\"\n\ninterface SecurityGroupListContainerProps {\n securityGroups: SecurityGroup[]\n isLoading: boolean\n isError: boolean\n error: { message?: string } \| null\n permissions: SecurityGroupPermissions\n onCreateClick?: () => void\n onDeleteSecurityGroup?: (securityGroupId: string) => void\n isDeletingSecurityGroup?: boolean\n deleteError?: string \| null\n onUpdateSecurityGroup?: (\n securityGroupId: string,\n data: Omit<UpdateSecurityGroupInput, \"securityGroupId\" \| \"project_id\">\n ) => void\n isUpdatingSecurityGroup?: boolean\n updateError?: string \| null\n currentProjectId?: string\n}\n\nexport const SecurityGroupListContainer = ({\n securityGroups,\n isLoading,\n isError,\n error,\n permissions,\n onDeleteSecurityGroup,\n isDeletingSecurityGroup = false,\n deleteError = null,\n onUpdateSecurityGroup,\n isUpdatingSecurityGroup = false,\n updateError = null,\n currentProjectId,\n}: SecurityGroupListContainerProps) => {\n const { t } = useLingui()\n const navigate = useNavigate()\n const projectId = useProjectId()\n const [selectedSecurityGroup, setSelectedSecurityGroup] = useState<SecurityGroup \| null>(null)\n const [editModalOpen, setEditModalOpen] = useState(false)\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)\n const prevIsDeletingRef = useRef<boolean>(false)\n const prevIsUpdatingRef = useRef<boolean>(false)\n\n const handleEdit = (sg: SecurityGroup) => {\n setSelectedSecurityGroup(sg)\n setEditModalOpen(true)\n }\n\n const handleDelete = (sg: SecurityGroup) => {\n setSelectedSecurityGroup(sg)\n setDeleteDialogOpen(true)\n }\n\n const handleViewDetails = (sg: SecurityGroup) => {\n navigate({\n to: \"/projects/$projectId/network/securitygroups/$securityGroupId\",\n params: { projectId, securityGroupId: sg.id },\n })\n }\n\n const closeEditModal = () => {\n setSelectedSecurityGroup(null)\n setEditModalOpen(false)\n }\n\n const closeDeleteDialog = () => {\n setSelectedSecurityGroup(null)\n setDeleteDialogOpen(false)\n }\n\n // Close delete dialog when deletion completes successfully\n useEffect(() => {\n // Check if deletion just finished (was deleting before, now not deleting)\n const deletionJustFinished = prevIsDeletingRef.current && !isDeletingSecurityGroup\n\n // Close dialog if deletion just finished and there's no error\n if (deletionJustFinished && deleteDialogOpen && !deleteError) {\n closeDeleteDialog()\n }\n\n // Update the ref for next render\n prevIsDeletingRef.current = isDeletingSecurityGroup\n }, [isDeletingSecurityGroup, deleteError, deleteDialogOpen])\n\n // Close edit modal when update completes successfully\n useEffect(() => {\n // Check if update just finished (was updating before, now not updating)\n const updateJustFinished = prevIsUpdatingRef.current && !isUpdatingSecurityGroup\n\n // Close modal if update just finished and there's no error\n if (updateJustFinished && editModalOpen && !updateError) {\n closeEditModal()\n }\n\n // Update the ref for next render\n prevIsUpdatingRef.current = isUpdatingSecurityGroup\n }, [isUpdatingSecurityGroup, updateError, editModalOpen])\n\n // Loading state\n if (isLoading) {\n return (\n <Stack className=\"py-8\" distribution=\"center\" alignment=\"center\" direction=\"vertical\">\n <Spinner variant=\"primary\" size=\"large\" className=\"mb-2\" />\n <Trans>Loading...</Trans>\n </Stack>\n )\n }\n\n // Error state\n if (isError) {\n return (\n <Stack className=\"py-8\" distribution=\"center\" alignment=\"center\" direction=\"vertical\">\n {error?.message ?? t`Failed to load security groups`}\n </Stack>\n )\n }\n\n // Empty state\n if (securityGroups.length === 0) {\n return <Trans>There are no groups</Trans>\n }\n\n return (\n <>\n <DataGrid columns={5}>\n <DataGridRow>\n {[t`Name`, t`Description`, t`Shared`, t`Stateful`, \"\"].map((label) => (\n <DataGridHeadCell key={label}>{label}</DataGridHeadCell>\n ))}\n </DataGridRow>\n {securityGroups.map((sg) => {\n // Compute isReadOnly only when the security group has an explicit project owner\n const isReadOnly = Boolean(currentProjectId && sg.project_id && sg.project_id !== currentProjectId)\n\n return (\n <SecurityGroupTableRow\n key={sg.id}\n securityGroup={sg}\n permissions={permissions}\n onEdit={handleEdit}\n onDelete={handleDelete}\n onViewDetails={handleViewDetails}\n isReadOnly={isReadOnly}\n />\n )\n })}\n </DataGrid>\n\n {selectedSecurityGroup && (\n <>\n <EditSecurityGroupModal\n securityGroup={selectedSecurityGroup}\n open={editModalOpen}\n onClose={closeEditModal}\n onUpdate={async (id, data) => {\n if (onUpdateSecurityGroup) {\n await onUpdateSecurityGroup(id, data)\n }\n }}\n isLoading={isUpdatingSecurityGroup}\n error={updateError}\n />\n <DeleteSecurityGroupDialog\n securityGroup={selectedSecurityGroup}\n isOpen={deleteDialogOpen}\n onClose={closeDeleteDialog}\n onDelete={(id) => {\n if (onDeleteSecurityGroup) {\n onDeleteSecurityGroup(id)\n }\n }}\n isDeleting={isDeletingSecurityGroup}\n error={deleteError}\n />\n </>\n )}\n </>\n )\n}\n","import React, { useState } from \"react\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport {\n Modal,\n Form,\n FormRow,\n FormSection,\n TextInput,\n Checkbox,\n Button,\n ButtonRow,\n Spinner,\n ModalFooter,\n Textarea,\n Message,\n} from \"@cloudoperators/juno-ui-components\"\nimport { CreateSecurityGroupInput } from \"@/server/Network/types/securityGroup\"\n\ninterface CreateSecurityGroupModalProps {\n isOpen: boolean\n onClose: () => void\n onCreate: (securityGroupData: Omit<CreateSecurityGroupInput, \"project_id\">) => Promise<void>\n isLoading?: boolean\n error?: string \| null\n}\n\ninterface SecurityGroupProperties {\n name: string\n description: string\n stateful: boolean\n}\n\nconst defaultSecurityGroupValues: SecurityGroupProperties = {\n name: \"\",\n description: \"\",\n stateful: true,\n}\n\nexport const CreateSecurityGroupModal: React.FC<CreateSecurityGroupModalProps> = ({\n isOpen,\n onClose,\n onCreate,\n isLoading = false,\n error = null,\n}) => {\n const { t } = useLingui()\n\n const [properties, setProperties] = useState<SecurityGroupProperties>({ ...defaultSecurityGroupValues })\n const [errors, setErrors] = useState<{ [key: string]: string }>({})\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n const { name, value, type } = e.target\n const checked = (e.target as HTMLInputElement).checked\n\n setProperties((prev) => ({\n ...prev,\n [name]: type === \"checkbox\" ? checked : value,\n }))\n\n if (errors[name]) {\n setErrors((prev) => {\n const newErrors = { ...prev }\n delete newErrors[name]\n return newErrors\n })\n }\n }\n\n const validateForm = (): boolean => {\n const newErrors: { [key: string]: string } = {}\n\n if (!properties.name \|\| properties.name.trim() === \"\") {\n newErrors.name = t`Security group name is required`\n }\n\n setErrors(newErrors)\n return Object.keys(newErrors).length === 0\n }\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault()\n\n if (!validateForm()) {\n return\n }\n\n const securityGroupData: Omit<CreateSecurityGroupInput, \"project_id\"> = {\n name: properties.name.trim(),\n description: properties.description.trim() \|\| undefined,\n stateful: properties.stateful,\n }\n\n await onCreate(securityGroupData)\n handleClose()\n }\n\n const handleClose = () => {\n setProperties({ ...defaultSecurityGroupValues })\n setErrors({})\n onClose()\n }\n\n return (\n <Modal\n open={isOpen}\n onCancel={handleClose}\n size=\"large\"\n title={t`Create Security Group`}\n modalFooter={\n <ModalFooter className=\"flex justify-end\">\n <ButtonRow>\n <Button variant=\"default\" onClick={handleClose} disabled={isLoading}>\n <Trans>Cancel</Trans>\n </Button>\n <Button\n variant=\"primary\"\n onClick={(e) => {\n handleSubmit(e)\n }}\n disabled={isLoading}\n data-testid=\"create-security-group-button\"\n >\n {isLoading ? <Spinner size=\"small\" /> : <Trans>Create Security Group</Trans>}\n </Button>\n </ButtonRow>\n </ModalFooter>\n }\n >\n {/ Error Message */}\n {error && (\n <Message dismissible={false} variant=\"error\" className=\"mb-4\">\n {error}\n </Message>\n )}\n\n {isLoading && (\n <div className=\"mb-4 flex items-center justify-center gap-2\">\n <Spinner variant=\"primary\" />\n <span className=\"text-theme-high text-sm\">\n <Trans>Creating security group...</Trans>\n </span>\n </div>\n )}\n\n {!isLoading && (\n <Form className=\"mb-6\">\n <FormSection className=\"mb-6\">\n <FormRow className=\"mb-6\">\n <TextInput\n id=\"name\"\n name=\"name\"\n label={t`Name`}\n value={properties.name}\n onChange={handleInputChange}\n required\n errortext={errors.name}\n placeholder={t`Type name`}\n disabled={isLoading}\n />\n </FormRow>\n\n <FormRow className=\"mb-6\">\n <Textarea\n id=\"description\"\n name=\"description\"\n label={t`Description`}\n value={properties.description}\n onChange={handleInputChange}\n placeholder={t`Description`}\n disabled={isLoading}\n rows={3}\n />\n </FormRow>\n\n <FormRow className=\"mb-0\">\n <Checkbox\n id=\"stateful\"\n name=\"stateful\"\n label={t`Stateful`}\n checked={properties.stateful}\n onChange={handleInputChange}\n disabled={isLoading}\n />\n </FormRow>\n </FormSection>\n </Form>\n )}\n </Modal>\n )\n}\n","import { useState } from \"react\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport { useNavigate } from \"@tanstack/react-router\"\nimport { Button } from \"@cloudoperators/juno-ui-components\"\nimport { trpcReact } from \"@/client/trpcClient\"\nimport { ListToolbar } from \"@/client/components/ListToolbar\"\nimport { buildFilterParams } from \"@/client/utils/buildFilterParams\"\nimport { useListWithFiltering } from \"@/client/utils/useListWithFiltering\"\nimport { useProjectId } from \"@/client/hooks\"\nimport { SecurityGroupListContainer } from \"./SecurityGroupListContainer\"\nimport { CreateSecurityGroupModal } from \"./-modals/CreateSecurityGroupModal\"\nimport { CreateSecurityGroupInput, UpdateSecurityGroupInput } from \"@/server/Network/types/securityGroup\"\n\n// Security group shared filter constants\nconst SECURITY_GROUP_SHARED = {\n TRUE: \"true\",\n FALSE: \"false\",\n} as const\n\ntype SecurityGroupSortKey = \"name\" \| \"project_id\"\n\nexport const SecurityGroups = () => {\n const { t } = useLingui()\n const navigate = useNavigate()\n const projectId = useProjectId()\n\n const [createModalOpen, setCreateModalOpen] = useState(false)\n const [deleteError, setDeleteError] = useState<string \| null>(null)\n const [createError, setCreateError] = useState<string \| null>(null)\n const [updateError, setUpdateError] = useState<string \| null>(null)\n\n const { searchTerm, sortSettings, filterSettings, handleSearchChange, handleSortChange, handleFilterChange } =\n useListWithFiltering<SecurityGroupSortKey>({\n defaultSortKey: \"name\",\n defaultSortDir: \"asc\",\n sortOptions: [\n { label: t`Name`, value: \"name\" },\n { label: t`Project id`, value: \"project_id\" },\n ],\n filterSettings: {\n filters: [\n {\n displayName: t`Shared`,\n filterName: \"shared\",\n values: Object.values(SECURITY_GROUP_SHARED),\n supportsMultiValue: false,\n },\n ],\n },\n })\n\n const utils = trpcReact.useUtils()\n\n // TODO: replace with trpc.network.canUser when security group permissions are available\n const permissions = {\n canCreate: true,\n canUpdate: true,\n canDelete: true,\n canManageAccess: true,\n }\n\n const {\n data: securityGroups = [],\n isLoading,\n isError,\n error,\n } = trpcReact.network.securityGroup.list.useQuery(\n {\n project_id: projectId \|\| \"\",\n sort_key: sortSettings.sortBy,\n sort_dir: sortSettings.sortDirection,\n ...buildFilterParams(filterSettings),\n ...(searchTerm ? { searchTerm } : {}),\n },\n {\n enabled: !!projectId,\n }\n )\n\n const createSecurityGroupMutation = trpcReact.network.securityGroup.create.useMutation({\n onSuccess: (createdSecurityGroup) => {\n // Invalidate and refetch the security groups list\n utils.network.securityGroup.list.invalidate()\n setCreateError(null)\n\n // Navigate to the details page of the newly created security group\n navigate({\n to: \"/projects/$projectId/network/securitygroups/$securityGroupId\",\n params: {\n projectId,\n securityGroupId: createdSecurityGroup.id,\n },\n })\n },\n onError: (error) => {\n // Backend handles error parsing, just display the message\n setCreateError(error.message \|\| t`Failed to create security group`)\n },\n })\n\n const deleteSecurityGroupMutation = trpcReact.network.securityGroup.deleteById.useMutation({\n onSuccess: () => {\n // Invalidate and refetch the security groups list\n utils.network.securityGroup.list.invalidate()\n setDeleteError(null)\n },\n onError: (error) => {\n // Backend handles error parsing, just display the message\n setDeleteError(error.message \|\| t`Failed to delete security group`)\n },\n })\n\n const updateSecurityGroupMutation = trpcReact.network.securityGroup.update.useMutation({\n onSuccess: () => {\n // Invalidate and refetch the security groups list\n utils.network.securityGroup.list.invalidate()\n setUpdateError(null)\n },\n onError: (error) => {\n // Backend handles error parsing, just display the message\n setUpdateError(error.message \|\| t`Failed to update security group`)\n },\n })\n\n const handleCreateSecurityGroup = async (securityGroupData: Omit<CreateSecurityGroupInput, \"project_id\">) => {\n setCreateError(null)\n await createSecurityGroupMutation.mutateAsync({ project_id: projectId, ...securityGroupData })\n }\n\n const handleDeleteSecurityGroup = (securityGroupId: string) => {\n setDeleteError(null)\n deleteSecurityGroupMutation.mutate({ project_id: projectId, securityGroupId })\n }\n\n const handleUpdateSecurityGroup = async (\n securityGroupId: string,\n data: Omit<UpdateSecurityGroupInput, \"securityGroupId\" \| \"project_id\">\n ) => {\n setUpdateError(null)\n await updateSecurityGroupMutation.mutateAsync({ project_id: projectId, securityGroupId, ...data })\n }\n\n return (\n <div className=\"relative\">\n <ListToolbar\n sortSettings={sortSettings}\n filterSettings={filterSettings}\n searchTerm={searchTerm}\n onSort={handleSortChange}\n onFilter={handleFilterChange}\n onSearch={handleSearchChange}\n actions={\n permissions.canCreate && (\n <Button onClick={() => setCreateModalOpen(true)} variant=\"primary\">\n <Trans>Create Security Group</Trans>\n </Button>\n )\n }\n />\n\n <SecurityGroupListContainer\n securityGroups={securityGroups}\n isLoading={isLoading}\n isError={isError}\n error={error}\n permissions={permissions}\n onCreateClick={() => setCreateModalOpen(true)}\n onDeleteSecurityGroup={handleDeleteSecurityGroup}\n isDeletingSecurityGroup={deleteSecurityGroupMutation.isPending}\n deleteError={deleteError}\n onUpdateSecurityGroup={handleUpdateSecurityGroup}\n isUpdatingSecurityGroup={updateSecurityGroupMutation.isPending}\n updateError={updateError}\n currentProjectId={projectId}\n />\n\n <CreateSecurityGroupModal\n isOpen={createModalOpen}\n onClose={() => setCreateModalOpen(false)}\n onCreate={handleCreateSecurityGroup}\n isLoading={createSecurityGroupMutation.isPending}\n error={createError}\n />\n </div>\n )\n}\n","import { createFileRoute } from \"@tanstack/react-router\"\nimport { t } from \"@lingui/core/macro\"\nimport { useLingui } from \"@lingui/react/macro\"\nimport { SecurityGroups } from \"./-components/SecurityGroupsList\"\nimport type { RouteInfo } from \"@/client/routes/routeInfo\"\nimport { ContentHeading } from \"@cloudoperators/juno-ui-components\"\n\nexport const Route = createFileRoute(\"/_auth/projects/$projectId/network/securitygroups/\")({\n staticData: {\n section: \"network\",\n service: \"securitygroups\",\n sectionCrumb: { labelKey: \"Network\" },\n crumb: { labelKey: \"Security Groups\" },\n } satisfies RouteInfo,\n head: () => ({ meta: [{ title: t`Security Groups` }] }),\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const { t } = useLingui()\n return (\n <>\n <ContentHeading>{t`Security Groups`}</ContentHeading>\n <SecurityGroups />\n </>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"securitygroups-CcA2TpAt.mjs","names":["React","useState","Modal","Button","ModalFooter","ButtonRow","Message","TextInput","DeleteSecurityGroupDialog","isOpen","onClose","securityGroup","onDelete","isDeleting","error","useLingui","confirmationText","setConfirmationText","deleteWord","t","isDeleteEnabled","toLowerCase","securityGroupName","name","id","handleDelete","e","preventDefault","handleClose","open","onCancel","size","title","modalFooter","className","variant","onClick","disabled","data-testid","div","dismissible","p","strong","value","onChange","target","placeholder","autoComplete","DataGridCell","DataGridRow","PopupMenu","PopupMenuItem","PopupMenuOptions","SecurityGroupTableRow","securityGroup","sg","permissions","onEdit","onDelete","onViewDetails","isReadOnly","useLingui","BooleanValue","value","span","t","handleShowDetails","data-testid","id","onClick","className","div","p","name","description","shared","project_id","stateful","e","stopPropagation","label","canUpdate","canDelete","useState","useEffect","useRef","DataGrid","DataGridHeadCell","DataGridRow","Stack","Spinner","useNavigate","useProjectId","EditSecurityGroupModal","DeleteSecurityGroupDialog","SecurityGroupTableRow","SecurityGroupListContainer","securityGroups","isLoading","isError","error","permissions","onDeleteSecurityGroup","isDeletingSecurityGroup","deleteError","onUpdateSecurityGroup","isUpdatingSecurityGroup","updateError","currentProjectId","useLingui","navigate","projectId","selectedSecurityGroup","setSelectedSecurityGroup","editModalOpen","setEditModalOpen","deleteDialogOpen","setDeleteDialogOpen","prevIsDeletingRef","prevIsUpdatingRef","handleEdit","sg","handleDelete","handleViewDetails","to","params","securityGroupId","id","closeEditModal","closeDeleteDialog","deletionJustFinished","current","updateJustFinished","className","distribution","alignment","direction","variant","size","message","t","length","columns","map","label","isReadOnly","Boolean","project_id","securityGroup","onEdit","onDelete","onViewDetails","open","onClose","onUpdate","data","isOpen","isDeleting","React","useState","Modal","Form","FormRow","FormSection","TextInput","Checkbox","Button","ButtonRow","Spinner","ModalFooter","Textarea","Message","defaultSecurityGroupValues","name","description","stateful","CreateSecurityGroupModal","isOpen","onClose","onCreate","isLoading","error","useLingui","properties","setProperties","errors","setErrors","handleInputChange","e","value","type","target","checked","prev","newErrors","validateForm","trim","t","Object","keys","length","handleSubmit","preventDefault","securityGroupData","undefined","handleClose","open","onCancel","size","title","modalFooter","className","variant","onClick","disabled","data-testid","dismissible","div","span","id","label","onChange","required","errortext","placeholder","rows","useState","useNavigate","Button","trpcReact","ListToolbar","buildFilterParams","useListWithFiltering","useProjectId","SecurityGroupListContainer","CreateSecurityGroupModal","SECURITY_GROUP_SHARED","TRUE","FALSE","SecurityGroups","useLingui","navigate","projectId","createModalOpen","setCreateModalOpen","deleteError","setDeleteError","createError","setCreateError","updateError","setUpdateError","searchTerm","sortSettings","filterSettings","handleSearchChange","handleSortChange","handleFilterChange","defaultSortKey","defaultSortDir","sortOptions","label","t","value","filters","displayName","filterName","values","Object","supportsMultiValue","utils","useUtils","permissions","canCreate","canUpdate","canDelete","canManageAccess","data","securityGroups","isLoading","isError","error","network","securityGroup","list","useQuery","project_id","sort_key","sortBy","sort_dir","sortDirection","enabled","createSecurityGroupMutation","create","useMutation","onSuccess","createdSecurityGroup","invalidate","to","params","securityGroupId","id","onError","message","deleteSecurityGroupMutation","deleteById","updateSecurityGroupMutation","update","handleCreateSecurityGroup","securityGroupData","mutateAsync","handleDeleteSecurityGroup","mutate","handleUpdateSecurityGroup","div","className","onSort","onFilter","onSearch","actions","onClick","variant","onCreateClick","onDeleteSecurityGroup","isDeletingSecurityGroup","isPending","onUpdateSecurityGroup","isUpdatingSecurityGroup","currentProjectId","isOpen","onClose","onCreate","useLingui","SecurityGroups","ContentHeading","RouteComponent","t","component"],"sources":["../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/-modals/DeleteSecurityGroupDialog.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/SecurityGroupTableRow.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/SecurityGroupListContainer.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/-modals/CreateSecurityGroupModal.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/-components/SecurityGroupsList.tsx","../../src/client/routes/_auth/projects/$projectId/network/securitygroups/index.tsx?tsr-split=component"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Modal, Button, ModalFooter, ButtonRow, Message, TextInput } from \"@cloudoperators/juno-ui-components\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport type { SecurityGroup } from \"@/server/Network/types/securityGroup\"\n\ninterface DeleteSecurityGroupDialogProps {\n isOpen: boolean\n securityGroup: SecurityGroup\n onClose: () => void\n onDelete: (securityGroupId: string) => void\n isDeleting?: boolean\n error?: string \| null\n}\n\nexport const DeleteSecurityGroupDialog: React.FC<DeleteSecurityGroupDialogProps> = ({\n isOpen,\n onClose,\n securityGroup,\n onDelete,\n isDeleting = false,\n error = null,\n}) => {\n const { t } = useLingui()\n const [confirmationText, setConfirmationText] = useState(\"\")\n\n const deleteWord = t`delete`\n const isDeleteEnabled = confirmationText.toLowerCase() === deleteWord.toLowerCase()\n const securityGroupName = securityGroup.name \|\| securityGroup.id\n\n const handleDelete = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault()\n if (isDeleteEnabled && !isDeleting) {\n onDelete(securityGroup.id)\n }\n }\n\n const handleClose = () => {\n setConfirmationText(\"\")\n onClose()\n }\n\n return (\n <Modal\n open={isOpen}\n onCancel={handleClose}\n size=\"small\"\n title={t`Delete Security Group \"${securityGroupName}\"`}\n modalFooter={\n <ModalFooter className=\"flex justify-end\">\n <ButtonRow>\n <Button variant=\"default\" onClick={handleClose} disabled={isDeleting}>\n <Trans>Cancel</Trans>\n </Button>\n <Button\n variant=\"primary-danger\"\n onClick={handleDelete}\n disabled={!isDeleteEnabled \|\| isDeleting}\n data-testid=\"confirm-delete-button\"\n >\n {isDeleting ? <Trans>Deleting...</Trans> : <Trans>Delete</Trans>}\n </Button>\n </ButtonRow>\n </ModalFooter>\n }\n >\n <div>\n {/* Error Message /}\n {error && (\n <Message dismissible={false} variant=\"error\" className=\"mt-4\">\n {error}\n </Message>\n )}\n\n {/ Warning /}\n <Trans>This action cannot be undone. The security group will be permanently deleted.</Trans>\n\n {/ Confirmation Input /}\n <div className=\"mt-4\">\n <p className=\"mb-2 text-sm\">\n <Trans>\n Type <strong>{deleteWord}</strong> to confirm:\n </Trans>\n </p>\n <TextInput\n id=\"confirmation\"\n name=\"confirmation\"\n value={confirmationText}\n onChange={(e) => setConfirmationText(e.target.value)}\n placeholder={deleteWord}\n disabled={isDeleting}\n autoComplete=\"off\"\n data-testid=\"delete-confirmation-input\"\n />\n </div>\n </div>\n </Modal>\n )\n}\n","import {\n DataGridCell,\n DataGridRow,\n PopupMenu,\n PopupMenuItem,\n PopupMenuOptions,\n} from \"@cloudoperators/juno-ui-components\"\nimport { useLingui, Trans } from \"@lingui/react/macro\"\nimport type { SecurityGroup } from \"@/server/Network/types/securityGroup\"\n\nexport interface SecurityGroupPermissions {\n canCreate: boolean\n canUpdate: boolean\n canDelete: boolean\n canManageAccess: boolean\n}\n\ninterface SecurityGroupTableRowProps {\n securityGroup: SecurityGroup\n permissions: SecurityGroupPermissions\n onEdit: (sg: SecurityGroup) => void\n onDelete: (sg: SecurityGroup) => void\n onViewDetails?: (sg: SecurityGroup) => void\n isReadOnly?: boolean\n}\n\nexport function SecurityGroupTableRow({\n securityGroup: sg,\n permissions,\n onEdit,\n onDelete,\n onViewDetails,\n isReadOnly = false,\n}: SecurityGroupTableRowProps) {\n const { t } = useLingui()\n\n const BooleanValue = ({ value }: { value: boolean \| undefined }) => <span>{value ? t`Yes` : t`No`}</span>\n\n const handleShowDetails = () => {\n if (onViewDetails) {\n onViewDetails(sg)\n }\n }\n\n return (\n <DataGridRow\n key={sg.id}\n data-testid={`security-group-row-${sg.id}`}\n onClick={handleShowDetails}\n className=\"hover:bg-theme-background-lvl-2 cursor-pointer\"\n >\n <DataGridCell>\n <div>\n <p className=\"text-md\">{sg.name}</p>\n <p className=\"text-theme-light text-xs\">{sg.id}</p>\n </div>\n </DataGridCell>\n <DataGridCell>{sg.description \|\| t`—`}</DataGridCell>\n <DataGridCell>\n <BooleanValue value={sg.shared} />\n {sg.shared && (\n <p>\n <Trans>Owner</Trans>: <span className=\"text-theme-light text-xs\">{sg.project_id}</span>\n </p>\n )}\n </DataGridCell>\n <DataGridCell>\n <BooleanValue value={sg.stateful} />\n </DataGridCell>\n <DataGridCell onClick={(e) => e.stopPropagation()} className=\"items-end justify-end pr-0\">\n <PopupMenu>\n <PopupMenuOptions>\n <PopupMenuItem label={t`Show Details`} onClick={() => handleShowDetails()} />\n {permissions.canUpdate && !isReadOnly && <PopupMenuItem label={t`Edit`} onClick={() => onEdit(sg)} />}\n {permissions.canDelete && !isReadOnly && <PopupMenuItem label={t`Delete`} onClick={() => onDelete(sg)} />}\n </PopupMenuOptions>\n </PopupMenu>\n </DataGridCell>\n </DataGridRow>\n )\n}\n","import { useState, useEffect, useRef } from \"react\"\nimport { DataGrid, DataGridHeadCell, DataGridRow, Stack, Spinner } from \"@cloudoperators/juno-ui-components\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport { useNavigate } from \"@tanstack/react-router\"\nimport { useProjectId } from \"@/client/hooks\"\nimport type { SecurityGroup } from \"@/server/Network/types/securityGroup\"\nimport type { UpdateSecurityGroupInput } from \"@/server/Network/types/securityGroup\"\nimport { EditSecurityGroupModal } from \"./-modals/EditSecurityGroupModal\"\nimport { DeleteSecurityGroupDialog } from \"./-modals/DeleteSecurityGroupDialog\"\nimport { SecurityGroupTableRow, type SecurityGroupPermissions } from \"./SecurityGroupTableRow\"\n\ninterface SecurityGroupListContainerProps {\n securityGroups: SecurityGroup[]\n isLoading: boolean\n isError: boolean\n error: { message?: string } \| null\n permissions: SecurityGroupPermissions\n onCreateClick?: () => void\n onDeleteSecurityGroup?: (securityGroupId: string) => void\n isDeletingSecurityGroup?: boolean\n deleteError?: string \| null\n onUpdateSecurityGroup?: (\n securityGroupId: string,\n data: Omit<UpdateSecurityGroupInput, \"securityGroupId\" \| \"project_id\">\n ) => void\n isUpdatingSecurityGroup?: boolean\n updateError?: string \| null\n currentProjectId?: string\n}\n\nexport const SecurityGroupListContainer = ({\n securityGroups,\n isLoading,\n isError,\n error,\n permissions,\n onDeleteSecurityGroup,\n isDeletingSecurityGroup = false,\n deleteError = null,\n onUpdateSecurityGroup,\n isUpdatingSecurityGroup = false,\n updateError = null,\n currentProjectId,\n}: SecurityGroupListContainerProps) => {\n const { t } = useLingui()\n const navigate = useNavigate()\n const projectId = useProjectId()\n const [selectedSecurityGroup, setSelectedSecurityGroup] = useState<SecurityGroup \| null>(null)\n const [editModalOpen, setEditModalOpen] = useState(false)\n const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)\n const prevIsDeletingRef = useRef<boolean>(false)\n const prevIsUpdatingRef = useRef<boolean>(false)\n\n const handleEdit = (sg: SecurityGroup) => {\n setSelectedSecurityGroup(sg)\n setEditModalOpen(true)\n }\n\n const handleDelete = (sg: SecurityGroup) => {\n setSelectedSecurityGroup(sg)\n setDeleteDialogOpen(true)\n }\n\n const handleViewDetails = (sg: SecurityGroup) => {\n navigate({\n to: \"/projects/$projectId/network/securitygroups/$securityGroupId\",\n params: { projectId, securityGroupId: sg.id },\n })\n }\n\n const closeEditModal = () => {\n setSelectedSecurityGroup(null)\n setEditModalOpen(false)\n }\n\n const closeDeleteDialog = () => {\n setSelectedSecurityGroup(null)\n setDeleteDialogOpen(false)\n }\n\n // Close delete dialog when deletion completes successfully\n useEffect(() => {\n // Check if deletion just finished (was deleting before, now not deleting)\n const deletionJustFinished = prevIsDeletingRef.current && !isDeletingSecurityGroup\n\n // Close dialog if deletion just finished and there's no error\n if (deletionJustFinished && deleteDialogOpen && !deleteError) {\n closeDeleteDialog()\n }\n\n // Update the ref for next render\n prevIsDeletingRef.current = isDeletingSecurityGroup\n }, [isDeletingSecurityGroup, deleteError, deleteDialogOpen])\n\n // Close edit modal when update completes successfully\n useEffect(() => {\n // Check if update just finished (was updating before, now not updating)\n const updateJustFinished = prevIsUpdatingRef.current && !isUpdatingSecurityGroup\n\n // Close modal if update just finished and there's no error\n if (updateJustFinished && editModalOpen && !updateError) {\n closeEditModal()\n }\n\n // Update the ref for next render\n prevIsUpdatingRef.current = isUpdatingSecurityGroup\n }, [isUpdatingSecurityGroup, updateError, editModalOpen])\n\n // Loading state\n if (isLoading) {\n return (\n <Stack className=\"py-8\" distribution=\"center\" alignment=\"center\" direction=\"vertical\">\n <Spinner variant=\"primary\" size=\"large\" className=\"mb-2\" />\n <Trans>Loading...</Trans>\n </Stack>\n )\n }\n\n // Error state\n if (isError) {\n return (\n <Stack className=\"py-8\" distribution=\"center\" alignment=\"center\" direction=\"vertical\">\n {error?.message ?? t`Failed to load security groups`}\n </Stack>\n )\n }\n\n // Empty state\n if (securityGroups.length === 0) {\n return <Trans>There are no groups</Trans>\n }\n\n return (\n <>\n <DataGrid columns={5}>\n <DataGridRow>\n {[t`Name`, t`Description`, t`Shared`, t`Stateful`, \"\"].map((label) => (\n <DataGridHeadCell key={label}>{label}</DataGridHeadCell>\n ))}\n </DataGridRow>\n {securityGroups.map((sg) => {\n // Compute isReadOnly only when the security group has an explicit project owner\n const isReadOnly = Boolean(currentProjectId && sg.project_id && sg.project_id !== currentProjectId)\n\n return (\n <SecurityGroupTableRow\n key={sg.id}\n securityGroup={sg}\n permissions={permissions}\n onEdit={handleEdit}\n onDelete={handleDelete}\n onViewDetails={handleViewDetails}\n isReadOnly={isReadOnly}\n />\n )\n })}\n </DataGrid>\n\n {selectedSecurityGroup && (\n <>\n <EditSecurityGroupModal\n securityGroup={selectedSecurityGroup}\n open={editModalOpen}\n onClose={closeEditModal}\n onUpdate={async (id, data) => {\n if (onUpdateSecurityGroup) {\n await onUpdateSecurityGroup(id, data)\n }\n }}\n isLoading={isUpdatingSecurityGroup}\n error={updateError}\n />\n <DeleteSecurityGroupDialog\n securityGroup={selectedSecurityGroup}\n isOpen={deleteDialogOpen}\n onClose={closeDeleteDialog}\n onDelete={(id) => {\n if (onDeleteSecurityGroup) {\n onDeleteSecurityGroup(id)\n }\n }}\n isDeleting={isDeletingSecurityGroup}\n error={deleteError}\n />\n </>\n )}\n </>\n )\n}\n","import React, { useState } from \"react\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport {\n Modal,\n Form,\n FormRow,\n FormSection,\n TextInput,\n Checkbox,\n Button,\n ButtonRow,\n Spinner,\n ModalFooter,\n Textarea,\n Message,\n} from \"@cloudoperators/juno-ui-components\"\nimport { CreateSecurityGroupInput } from \"@/server/Network/types/securityGroup\"\n\ninterface CreateSecurityGroupModalProps {\n isOpen: boolean\n onClose: () => void\n onCreate: (securityGroupData: Omit<CreateSecurityGroupInput, \"project_id\">) => Promise<void>\n isLoading?: boolean\n error?: string \| null\n}\n\ninterface SecurityGroupProperties {\n name: string\n description: string\n stateful: boolean\n}\n\nconst defaultSecurityGroupValues: SecurityGroupProperties = {\n name: \"\",\n description: \"\",\n stateful: true,\n}\n\nexport const CreateSecurityGroupModal: React.FC<CreateSecurityGroupModalProps> = ({\n isOpen,\n onClose,\n onCreate,\n isLoading = false,\n error = null,\n}) => {\n const { t } = useLingui()\n\n const [properties, setProperties] = useState<SecurityGroupProperties>({ ...defaultSecurityGroupValues })\n const [errors, setErrors] = useState<{ [key: string]: string }>({})\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => {\n const { name, value, type } = e.target\n const checked = (e.target as HTMLInputElement).checked\n\n setProperties((prev) => ({\n ...prev,\n [name]: type === \"checkbox\" ? checked : value,\n }))\n\n if (errors[name]) {\n setErrors((prev) => {\n const newErrors = { ...prev }\n delete newErrors[name]\n return newErrors\n })\n }\n }\n\n const validateForm = (): boolean => {\n const newErrors: { [key: string]: string } = {}\n\n if (!properties.name \|\| properties.name.trim() === \"\") {\n newErrors.name = t`Security group name is required`\n }\n\n setErrors(newErrors)\n return Object.keys(newErrors).length === 0\n }\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault()\n\n if (!validateForm()) {\n return\n }\n\n const securityGroupData: Omit<CreateSecurityGroupInput, \"project_id\"> = {\n name: properties.name.trim(),\n description: properties.description.trim() \|\| undefined,\n stateful: properties.stateful,\n }\n\n await onCreate(securityGroupData)\n handleClose()\n }\n\n const handleClose = () => {\n setProperties({ ...defaultSecurityGroupValues })\n setErrors({})\n onClose()\n }\n\n return (\n <Modal\n open={isOpen}\n onCancel={handleClose}\n size=\"large\"\n title={t`Create Security Group`}\n modalFooter={\n <ModalFooter className=\"flex justify-end\">\n <ButtonRow>\n <Button variant=\"default\" onClick={handleClose} disabled={isLoading}>\n <Trans>Cancel</Trans>\n </Button>\n <Button\n variant=\"primary\"\n onClick={(e) => {\n handleSubmit(e)\n }}\n disabled={isLoading}\n data-testid=\"create-security-group-button\"\n >\n {isLoading ? <Spinner size=\"small\" /> : <Trans>Create Security Group</Trans>}\n </Button>\n </ButtonRow>\n </ModalFooter>\n }\n >\n {/ Error Message */}\n {error && (\n <Message dismissible={false} variant=\"error\" className=\"mb-4\">\n {error}\n </Message>\n )}\n\n {isLoading && (\n <div className=\"mb-4 flex items-center justify-center gap-2\">\n <Spinner variant=\"primary\" />\n <span className=\"text-theme-high text-sm\">\n <Trans>Creating security group...</Trans>\n </span>\n </div>\n )}\n\n {!isLoading && (\n <Form className=\"mb-6\">\n <FormSection className=\"mb-6\">\n <FormRow className=\"mb-6\">\n <TextInput\n id=\"name\"\n name=\"name\"\n label={t`Name`}\n value={properties.name}\n onChange={handleInputChange}\n required\n errortext={errors.name}\n placeholder={t`Type name`}\n disabled={isLoading}\n />\n </FormRow>\n\n <FormRow className=\"mb-6\">\n <Textarea\n id=\"description\"\n name=\"description\"\n label={t`Description`}\n value={properties.description}\n onChange={handleInputChange}\n placeholder={t`Description`}\n disabled={isLoading}\n rows={3}\n />\n </FormRow>\n\n <FormRow className=\"mb-0\">\n <Checkbox\n id=\"stateful\"\n name=\"stateful\"\n label={t`Stateful`}\n checked={properties.stateful}\n onChange={handleInputChange}\n disabled={isLoading}\n />\n </FormRow>\n </FormSection>\n </Form>\n )}\n </Modal>\n )\n}\n","import { useState } from \"react\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport { useNavigate } from \"@tanstack/react-router\"\nimport { Button } from \"@cloudoperators/juno-ui-components\"\nimport { trpcReact } from \"@/client/trpcClient\"\nimport { ListToolbar } from \"@/client/components/ListToolbar\"\nimport { buildFilterParams } from \"@/client/utils/buildFilterParams\"\nimport { useListWithFiltering } from \"@/client/utils/useListWithFiltering\"\nimport { useProjectId } from \"@/client/hooks\"\nimport { SecurityGroupListContainer } from \"./SecurityGroupListContainer\"\nimport { CreateSecurityGroupModal } from \"./-modals/CreateSecurityGroupModal\"\nimport { CreateSecurityGroupInput, UpdateSecurityGroupInput } from \"@/server/Network/types/securityGroup\"\n\n// Security group shared filter constants\nconst SECURITY_GROUP_SHARED = {\n TRUE: \"true\",\n FALSE: \"false\",\n} as const\n\ntype SecurityGroupSortKey = \"name\" \| \"project_id\"\n\nexport const SecurityGroups = () => {\n const { t } = useLingui()\n const navigate = useNavigate()\n const projectId = useProjectId()\n\n const [createModalOpen, setCreateModalOpen] = useState(false)\n const [deleteError, setDeleteError] = useState<string \| null>(null)\n const [createError, setCreateError] = useState<string \| null>(null)\n const [updateError, setUpdateError] = useState<string \| null>(null)\n\n const { searchTerm, sortSettings, filterSettings, handleSearchChange, handleSortChange, handleFilterChange } =\n useListWithFiltering<SecurityGroupSortKey>({\n defaultSortKey: \"name\",\n defaultSortDir: \"asc\",\n sortOptions: [\n { label: t`Name`, value: \"name\" },\n { label: t`Project id`, value: \"project_id\" },\n ],\n filterSettings: {\n filters: [\n {\n displayName: t`Shared`,\n filterName: \"shared\",\n values: Object.values(SECURITY_GROUP_SHARED),\n supportsMultiValue: false,\n },\n ],\n },\n })\n\n const utils = trpcReact.useUtils()\n\n // TODO: replace with trpc.network.canUser when security group permissions are available\n const permissions = {\n canCreate: true,\n canUpdate: true,\n canDelete: true,\n canManageAccess: true,\n }\n\n const {\n data: securityGroups = [],\n isLoading,\n isError,\n error,\n } = trpcReact.network.securityGroup.list.useQuery(\n {\n project_id: projectId \|\| \"\",\n sort_key: sortSettings.sortBy,\n sort_dir: sortSettings.sortDirection,\n ...buildFilterParams(filterSettings),\n ...(searchTerm ? { searchTerm } : {}),\n },\n {\n enabled: !!projectId,\n }\n )\n\n const createSecurityGroupMutation = trpcReact.network.securityGroup.create.useMutation({\n onSuccess: (createdSecurityGroup) => {\n // Invalidate and refetch the security groups list\n utils.network.securityGroup.list.invalidate()\n setCreateError(null)\n\n // Navigate to the details page of the newly created security group\n navigate({\n to: \"/projects/$projectId/network/securitygroups/$securityGroupId\",\n params: {\n projectId,\n securityGroupId: createdSecurityGroup.id,\n },\n })\n },\n onError: (error) => {\n // Backend handles error parsing, just display the message\n setCreateError(error.message \|\| t`Failed to create security group`)\n },\n })\n\n const deleteSecurityGroupMutation = trpcReact.network.securityGroup.deleteById.useMutation({\n onSuccess: () => {\n // Invalidate and refetch the security groups list\n utils.network.securityGroup.list.invalidate()\n setDeleteError(null)\n },\n onError: (error) => {\n // Backend handles error parsing, just display the message\n setDeleteError(error.message \|\| t`Failed to delete security group`)\n },\n })\n\n const updateSecurityGroupMutation = trpcReact.network.securityGroup.update.useMutation({\n onSuccess: () => {\n // Invalidate and refetch the security groups list\n utils.network.securityGroup.list.invalidate()\n setUpdateError(null)\n },\n onError: (error) => {\n // Backend handles error parsing, just display the message\n setUpdateError(error.message \|\| t`Failed to update security group`)\n },\n })\n\n const handleCreateSecurityGroup = async (securityGroupData: Omit<CreateSecurityGroupInput, \"project_id\">) => {\n setCreateError(null)\n await createSecurityGroupMutation.mutateAsync({ project_id: projectId, ...securityGroupData })\n }\n\n const handleDeleteSecurityGroup = (securityGroupId: string) => {\n setDeleteError(null)\n deleteSecurityGroupMutation.mutate({ project_id: projectId, securityGroupId })\n }\n\n const handleUpdateSecurityGroup = async (\n securityGroupId: string,\n data: Omit<UpdateSecurityGroupInput, \"securityGroupId\" \| \"project_id\">\n ) => {\n setUpdateError(null)\n await updateSecurityGroupMutation.mutateAsync({ project_id: projectId, securityGroupId, ...data })\n }\n\n return (\n <div className=\"relative\">\n <ListToolbar\n sortSettings={sortSettings}\n filterSettings={filterSettings}\n searchTerm={searchTerm}\n onSort={handleSortChange}\n onFilter={handleFilterChange}\n onSearch={handleSearchChange}\n actions={\n permissions.canCreate && (\n <Button onClick={() => setCreateModalOpen(true)} variant=\"primary\">\n <Trans>Create Security Group</Trans>\n </Button>\n )\n }\n />\n\n <SecurityGroupListContainer\n securityGroups={securityGroups}\n isLoading={isLoading}\n isError={isError}\n error={error}\n permissions={permissions}\n onCreateClick={() => setCreateModalOpen(true)}\n onDeleteSecurityGroup={handleDeleteSecurityGroup}\n isDeletingSecurityGroup={deleteSecurityGroupMutation.isPending}\n deleteError={deleteError}\n onUpdateSecurityGroup={handleUpdateSecurityGroup}\n isUpdatingSecurityGroup={updateSecurityGroupMutation.isPending}\n updateError={updateError}\n currentProjectId={projectId}\n />\n\n <CreateSecurityGroupModal\n isOpen={createModalOpen}\n onClose={() => setCreateModalOpen(false)}\n onCreate={handleCreateSecurityGroup}\n isLoading={createSecurityGroupMutation.isPending}\n error={createError}\n />\n </div>\n )\n}\n","import { createFileRoute } from \"@tanstack/react-router\"\nimport { t } from \"@lingui/core/macro\"\nimport { useLingui } from \"@lingui/react/macro\"\nimport { SecurityGroups } from \"./-components/SecurityGroupsList\"\nimport type { RouteInfo } from \"@/client/routes/routeInfo\"\nimport { ContentHeading } from \"@cloudoperators/juno-ui-components\"\n\nexport const Route = createFileRoute(\"/_auth/projects/$projectId/network/securitygroups/\")({\n staticData: {\n section: \"network\",\n service: \"securitygroups\",\n sectionCrumb: { labelKey: \"Network\" },\n crumb: { labelKey: \"Security Groups\" },\n } satisfies RouteInfo,\n head: () => ({ meta: [{ title: t`Security Groups` }] }),\n component: RouteComponent,\n})\n\nfunction RouteComponent() {\n const { t } = useLingui()\n return (\n <>\n <ContentHeading>{t`Security Groups`}</ContentHeading>\n <SecurityGroups />\n </>\n )\n}\n"],"mappings":"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"}

package/dist/client/{useListWithFiltering-v2A0-SZb.mjs → useListWithFiltering-CVzhMyEA.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { V as e, Y as t, Z as n, q as r } from "./build-BdRRmNf5.mjs";
-import { t as i } from "./SortInput-VK7IYqQv.mjs";
+import { t as i } from "./SortInput-DLcusjGZ.mjs";
 import { n as a, t as o } from "./FiltersInput-GzR4D0q6.mjs";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 import { startTransition as u, useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
@@ -154,4 +154,4 @@ function v({ defaultSortKey: e, defaultSortDir: t, sortOptions: n, filterSetting
 //#endregion
 export { _ as n, v as t };
-//# sourceMappingURL=useListWithFiltering-v2A0-SZb.mjs.map
+//# sourceMappingURL=useListWithFiltering-CVzhMyEA.mjs.map

package/dist/client/{useListWithFiltering-v2A0-SZb.mjs.map → useListWithFiltering-CVzhMyEA.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useListWithFiltering-v2A0-SZb.mjs","names":["useCallback","useRef","useEffect","SearchInput","Stack","TabNavigation","TabNavigationItem","SelectedFilters","FiltersInput","SortInput","ListToolbar","filterSettings","onFilter","sortSettings","onSort","searchTerm","onSearch","searchInputProps","actions","tabs","totalCount","filteredCount","itemName","lastUpdated","useLingui","debounceTimerRef","undefined","current","clearTimeout","formatLastUpdated","date","dateObj","Date","toLocaleString","showCountInfo","handleFilterDelete","filterToRemove","selectedFilters","filter","name","value","handleSelect","selectedFilter","filterExists","some","supportsMultiValue","filters","find","filterName","newSelected","handleSearch","searchValue","handleSearchInput","event","currentTarget","window","setTimeout","handleSearchClear","filtersProps","onChange","sortProps","options","sortBy","sortDirection","onSortByChange","param","onSortDirectionChange","direction","searchProps","placeholder","t","onInput","onClear","div","className","activeItem","onActiveItemChange","items","map","item","label","alignment","gap","length","onDelete","span","formattedDate","startTransition","useState","useListWithFiltering","defaultSortKey","defaultSortDir","sortOptions","filterSettings","initialFilterSettings","searchTerm","setSearchTerm","handleSearchChange","term","searchValue","sortSettings","setSortSettings","options","sortBy","sortDirection","handleSortChange","newSortSettings","settings","toString","setFilterSettings","handleFilterChange","newFilterSettings"],"sources":["../../src/client/components/ListToolbar/index.tsx","../../src/client/utils/useListWithFiltering.ts"],"sourcesContent":["import { ReactNode, useCallback, useRef, useEffect } from \"react\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport {\n SearchInput,\n SearchInputProps,\n Stack,\n TabNavigation,\n TabNavigationItem,\n} from \"@cloudoperators/juno-ui-components\"\nimport { SelectedFilters } from \"./SelectedFilters\"\nimport { FiltersInput } from \"./FiltersInput\"\nimport { SortInput } from \"./SortInput\"\nimport { FilterSettings, SelectedFilter, SortSettings } from \"./types\"\n\nexport type ListToolbarProps = {\n filterSettings?: FilterSettings\n onFilter?: (filterSettings: FilterSettings) => void\n sortSettings?: SortSettings\n onSort?: (sortSettings: SortSettings) => void\n searchTerm?: string\n onSearch?: (searchTerm: string) => void\n searchInputProps?: Omit<SearchInputProps, \"value\" \| \"onSearch\" \| \"onClear\" \| \"onInput\">\n actions?: ReactNode\n tabs?: {\n items: Array<{ label: string; value: string }>\n activeItem: string\n onActiveItemChange: (value: ReactNode) => void\n }\n // Count information\n totalCount?: number\n itemName?: string // e.g. \"items\", \"users\", \"projects\" - used in count display\n filteredCount?: number\n // Last updated timestamp\n lastUpdated?: Date \| string\n}\n\nexport const ListToolbar = ({\n filterSettings,\n onFilter,\n sortSettings,\n onSort,\n searchTerm,\n onSearch,\n searchInputProps = {},\n actions,\n tabs,\n totalCount,\n filteredCount,\n itemName = \"items\",\n lastUpdated,\n}: ListToolbarProps) => {\n const { t } = useLingui()\n\n const debounceTimerRef = useRef<number \| undefined>(undefined)\n\n useEffect(() => {\n return () => {\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current)\n }\n }\n }, [])\n\n // Format last updated time\n const formatLastUpdated = (date: Date \| string \| undefined): string => {\n if (!date) return \"\"\n const dateObj = typeof date === \"string\" ? new Date(date) : date\n return dateObj.toLocaleString()\n }\n\n const showCountInfo = totalCount !== undefined && filteredCount !== undefined\n\n const handleFilterDelete = useCallback(\n (filterToRemove: SelectedFilter) => {\n if (!onFilter \|\| !filterSettings) return\n onFilter({\n ...filterSettings,\n selectedFilters: filterSettings.selectedFilters?.filter(\n (filter) => !(filter.name === filterToRemove.name && filter.value === filterToRemove.value)\n ),\n })\n },\n [filterSettings, onFilter]\n )\n\n const handleSelect = (selectedFilter: SelectedFilter) => {\n if (!onFilter \|\| !filterSettings) return\n const filterExists = filterSettings.selectedFilters?.some(\n (filter) => filter.name === selectedFilter.name && filter.value === selectedFilter.value\n )\n if (filterExists) return\n\n const supportsMultiValue = filterSettings.filters.find(\n (filter) => selectedFilter.name === filter.filterName\n )?.supportsMultiValue\n\n const newSelected = supportsMultiValue\n ? [...(filterSettings.selectedFilters \|\| []), selectedFilter]\n : [\n ...(filterSettings.selectedFilters \|\| []).filter((filter) => filter.name !== selectedFilter.name),\n selectedFilter,\n ]\n\n onFilter({ ...filterSettings, selectedFilters: newSelected })\n }\n\n const handleSearch = useCallback(\n (value: string \| number \| string[] \| undefined) => {\n const searchValue = typeof value === \"string\" ? value : \"\"\n\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current)\n }\n\n onSearch?.(searchValue)\n },\n [onSearch]\n )\n\n const handleSearchInput = useCallback(\n (event: React.FormEvent<HTMLInputElement>) => {\n const searchValue = event.currentTarget.value\n if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)\n debounceTimerRef.current = window.setTimeout(() => onSearch?.(searchValue), 500)\n },\n [onSearch]\n )\n\n const handleSearchClear = useCallback(() => {\n if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)\n onSearch?.(\"\")\n }, [onSearch])\n\n const filtersProps = filterSettings && onFilter ? { filters: filterSettings.filters, onChange: handleSelect } : null\n const sortProps =\n sortSettings && onSort\n ? {\n options: sortSettings.options,\n sortBy: sortSettings.sortBy,\n sortDirection: sortSettings.sortDirection \|\| \"asc\",\n onSortByChange: (param: string \| number \| string[] \| undefined) =>\n onSort({ ...sortSettings, sortBy: param, sortDirection: sortSettings.sortDirection \|\| \"asc\" }),\n onSortDirectionChange: (direction: \"asc\" \| \"desc\") => onSort({ ...sortSettings, sortDirection: direction }),\n }\n : null\n\n const searchProps: (SearchInputProps & { \"data-testid\"?: string }) \| null = onSearch\n ? {\n placeholder: t`Search...`,\n \"data-testid\": \"searchbar\",\n value: searchTerm,\n onInput: handleSearchInput,\n onClear: handleSearchClear,\n onSearch: handleSearch,\n ...searchInputProps,\n }\n : null\n\n return (\n <>\n {tabs && (\n <div className=\"w-full\">\n <TabNavigation activeItem={tabs.activeItem} onActiveItemChange={tabs.onActiveItemChange}>\n {tabs.items.map((item) => (\n <TabNavigationItem key={item.value} label={item.label} value={item.value} />\n ))}\n </TabNavigation>\n </div>\n )}\n <Stack alignment=\"center\" gap=\"6\" className=\"bg-theme-background-lvl-1 flex w-full flex-col p-4\">\n {actions && (\n <Stack direction=\"horizontal\" className=\"w-full justify-end\">\n {actions}\n </Stack>\n )}\n\n <div className=\"flex w-full flex-col items-stretch gap-4 md:flex-row md:items-center\">\n {filtersProps && (\n <div className=\"w-full md:w-auto md:min-w-37.5\">\n <FiltersInput {...filtersProps} />\n </div>\n )}\n {sortProps && (\n <div className=\"w-full md:w-auto md:min-w-45\">\n <SortInput {...sortProps} />\n </div>\n )}\n {searchProps && (\n <div className=\"w-full md:ml-auto md:w-auto md:min-w-25\">\n <SearchInput {...searchProps} />\n </div>\n )}\n </div>\n\n {filterSettings?.selectedFilters && filterSettings.selectedFilters.length > 0 && onFilter && (\n <div className=\"w-full\">\n <SelectedFilters\n selectedFilters={filterSettings.selectedFilters}\n onDelete={handleFilterDelete}\n onClear={() => onFilter({ ...filterSettings, selectedFilters: [] })}\n />\n </div>\n )}\n {/* Count and Last Updated Info /}\n {(showCountInfo \|\| lastUpdated) && (\n <div className=\"text-theme-secondary flex w-full items-center justify-between text-sm\">\n <div className=\"flex items-center gap-2\">\n {showCountInfo && (\n <span>\n <Trans>\n Showing {filteredCount} of {totalCount} {itemName}\n </Trans>\n </span>\n )}\n {lastUpdated &&\n (() => {\n const formattedDate = formatLastUpdated(lastUpdated)\n return (\n <span>\n <Trans>Last updated: {formattedDate}</Trans>\n </span>\n )\n })()}\n </div>\n </div>\n )}\n </Stack>\n </>\n )\n}\n","import { startTransition, useState } from \"react\"\nimport { FilterSettings, SortOption, SortSettings } from \"@/client/components/ListToolbar/types\"\n\n/\n Sort direction enumeration\n * Used across all sort-enabled list views\n /\nexport type SortDirection = \"asc\" \| \"desc\"\n\n/\n Generic required sort settings with guaranteed non-optional properties\n * Used by components to maintain a fully-defined sort state\n \n Type parameter K is the sort key type (string literal union of allowed sort fields)\n \n @example\n * // For floating IPs\n * type FloatingIpListSortSettings = ListSortConfig<FloatingIpsSortKey>\n \n // For security groups\n * type SecurityGroupListSortSettings = ListSortConfig<\"name\" \| \"project_id\">\n /\nexport type ListSortConfig<T extends string = string> = {\n /\n Array of available sort options to display in the UI\n /\n options: SortOption[]\n /\n The currently selected sort field (guaranteed to be one of the available options)\n /\n sortBy: T\n /\n The currently active sort direction (guaranteed to be either \"asc\" or \"desc\")\n /\n sortDirection: SortDirection\n}\n\n/\n Configuration options for the useListWithFiltering hook\n /\nexport interface UseListWithFilteringOptions<T extends string> {\n /* Default sort key to use on initial render /\n defaultSortKey: T\n /* Default sort direction to use on initial render /\n defaultSortDir: SortDirection\n /* Available sort options to display in the sort dropdown /\n sortOptions: Array<{ label: string; value: string }>\n /* Initial filter settings configuration /\n filterSettings: FilterSettings\n}\n\n/\n Return value from the useListWithFiltering hook\n /\nexport interface UseListWithFilteringReturn<T extends string> {\n // State\n searchTerm: string\n sortSettings: ListSortConfig<T>\n filterSettings: FilterSettings\n\n // Handlers\n handleSearchChange: (term: string \| number \| string[] \| undefined) => void\n handleSortChange: (newSortSettings: SortSettings) => void\n handleFilterChange: (newFilterSettings: FilterSettings) => void\n}\n\n/\n Custom hook to manage common list view state: search, sort, and filter\n \n Extracts shared logic from list components to ensure consistent behavior\n * across all list pages and reduce code duplication.\n \n @example\n * ```tsx\n * const listState = useListWithFiltering({\n * defaultSortKey: \"name\",\n * defaultSortDir: \"asc\",\n * sortOptions: [\n * { label: t`Name`, value: \"name\" },\n * { label: t`Created`, value: \"created_at\" },\n * ],\n * filterSettings: {\n * filters: [\n * { displayName: t`Status`, filterName: \"status\", values: [\"active\", \"inactive\"] }\n * ]\n * }\n * })\n * ```\n */\nexport function useListWithFiltering<T extends string>({\n defaultSortKey,\n defaultSortDir,\n sortOptions,\n filterSettings: initialFilterSettings,\n}: UseListWithFilteringOptions<T>): UseListWithFilteringReturn<T> {\n // Search\n const [searchTerm, setSearchTerm] = useState(\"\")\n const handleSearchChange = (term: string \| number \| string[] \| undefined) => {\n const searchValue = typeof term === \"string\" ? term : \"\"\n startTransition(() => setSearchTerm(searchValue))\n }\n\n // Sort\n const [sortSettings, setSortSettings] = useState<ListSortConfig<T>>({\n options: sortOptions,\n sortBy: defaultSortKey,\n sortDirection: defaultSortDir,\n })\n const handleSortChange = (newSortSettings: SortSettings) => {\n const settings: ListSortConfig<T> = {\n options: newSortSettings.options ?? sortSettings.options,\n sortBy: (newSortSettings.sortBy?.toString() as T) \|\| defaultSortKey,\n sortDirection: (newSortSettings.sortDirection as SortDirection) \|\| defaultSortDir,\n }\n setSortSettings(settings)\n }\n\n // Filter\n const [filterSettings, setFilterSettings] = useState<FilterSettings>(initialFilterSettings)\n const handleFilterChange = (newFilterSettings: FilterSettings) => {\n startTransition(() => setFilterSettings(newFilterSettings))\n }\n\n return {\n searchTerm,\n sortSettings,\n filterSettings,\n handleSearchChange,\n handleSortChange,\n handleFilterChange,\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"useListWithFiltering-CVzhMyEA.mjs","names":["useCallback","useRef","useEffect","SearchInput","Stack","TabNavigation","TabNavigationItem","SelectedFilters","FiltersInput","SortInput","ListToolbar","filterSettings","onFilter","sortSettings","onSort","searchTerm","onSearch","searchInputProps","actions","tabs","totalCount","filteredCount","itemName","lastUpdated","useLingui","debounceTimerRef","undefined","current","clearTimeout","formatLastUpdated","date","dateObj","Date","toLocaleString","showCountInfo","handleFilterDelete","filterToRemove","selectedFilters","filter","name","value","handleSelect","selectedFilter","filterExists","some","supportsMultiValue","filters","find","filterName","newSelected","handleSearch","searchValue","handleSearchInput","event","currentTarget","window","setTimeout","handleSearchClear","filtersProps","onChange","sortProps","options","sortBy","sortDirection","onSortByChange","param","onSortDirectionChange","direction","searchProps","placeholder","t","onInput","onClear","div","className","activeItem","onActiveItemChange","items","map","item","label","alignment","gap","length","onDelete","span","formattedDate","startTransition","useState","useListWithFiltering","defaultSortKey","defaultSortDir","sortOptions","filterSettings","initialFilterSettings","searchTerm","setSearchTerm","handleSearchChange","term","searchValue","sortSettings","setSortSettings","options","sortBy","sortDirection","handleSortChange","newSortSettings","settings","toString","setFilterSettings","handleFilterChange","newFilterSettings"],"sources":["../../src/client/components/ListToolbar/index.tsx","../../src/client/utils/useListWithFiltering.ts"],"sourcesContent":["import { ReactNode, useCallback, useRef, useEffect } from \"react\"\nimport { Trans, useLingui } from \"@lingui/react/macro\"\nimport {\n SearchInput,\n SearchInputProps,\n Stack,\n TabNavigation,\n TabNavigationItem,\n} from \"@cloudoperators/juno-ui-components\"\nimport { SelectedFilters } from \"./SelectedFilters\"\nimport { FiltersInput } from \"./FiltersInput\"\nimport { SortInput } from \"./SortInput\"\nimport { FilterSettings, SelectedFilter, SortSettings } from \"./types\"\n\nexport type ListToolbarProps = {\n filterSettings?: FilterSettings\n onFilter?: (filterSettings: FilterSettings) => void\n sortSettings?: SortSettings\n onSort?: (sortSettings: SortSettings) => void\n searchTerm?: string\n onSearch?: (searchTerm: string) => void\n searchInputProps?: Omit<SearchInputProps, \"value\" \| \"onSearch\" \| \"onClear\" \| \"onInput\">\n actions?: ReactNode\n tabs?: {\n items: Array<{ label: string; value: string }>\n activeItem: string\n onActiveItemChange: (value: ReactNode) => void\n }\n // Count information\n totalCount?: number\n itemName?: string // e.g. \"items\", \"users\", \"projects\" - used in count display\n filteredCount?: number\n // Last updated timestamp\n lastUpdated?: Date \| string\n}\n\nexport const ListToolbar = ({\n filterSettings,\n onFilter,\n sortSettings,\n onSort,\n searchTerm,\n onSearch,\n searchInputProps = {},\n actions,\n tabs,\n totalCount,\n filteredCount,\n itemName = \"items\",\n lastUpdated,\n}: ListToolbarProps) => {\n const { t } = useLingui()\n\n const debounceTimerRef = useRef<number \| undefined>(undefined)\n\n useEffect(() => {\n return () => {\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current)\n }\n }\n }, [])\n\n // Format last updated time\n const formatLastUpdated = (date: Date \| string \| undefined): string => {\n if (!date) return \"\"\n const dateObj = typeof date === \"string\" ? new Date(date) : date\n return dateObj.toLocaleString()\n }\n\n const showCountInfo = totalCount !== undefined && filteredCount !== undefined\n\n const handleFilterDelete = useCallback(\n (filterToRemove: SelectedFilter) => {\n if (!onFilter \|\| !filterSettings) return\n onFilter({\n ...filterSettings,\n selectedFilters: filterSettings.selectedFilters?.filter(\n (filter) => !(filter.name === filterToRemove.name && filter.value === filterToRemove.value)\n ),\n })\n },\n [filterSettings, onFilter]\n )\n\n const handleSelect = (selectedFilter: SelectedFilter) => {\n if (!onFilter \|\| !filterSettings) return\n const filterExists = filterSettings.selectedFilters?.some(\n (filter) => filter.name === selectedFilter.name && filter.value === selectedFilter.value\n )\n if (filterExists) return\n\n const supportsMultiValue = filterSettings.filters.find(\n (filter) => selectedFilter.name === filter.filterName\n )?.supportsMultiValue\n\n const newSelected = supportsMultiValue\n ? [...(filterSettings.selectedFilters \|\| []), selectedFilter]\n : [\n ...(filterSettings.selectedFilters \|\| []).filter((filter) => filter.name !== selectedFilter.name),\n selectedFilter,\n ]\n\n onFilter({ ...filterSettings, selectedFilters: newSelected })\n }\n\n const handleSearch = useCallback(\n (value: string \| number \| string[] \| undefined) => {\n const searchValue = typeof value === \"string\" ? value : \"\"\n\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current)\n }\n\n onSearch?.(searchValue)\n },\n [onSearch]\n )\n\n const handleSearchInput = useCallback(\n (event: React.FormEvent<HTMLInputElement>) => {\n const searchValue = event.currentTarget.value\n if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)\n debounceTimerRef.current = window.setTimeout(() => onSearch?.(searchValue), 500)\n },\n [onSearch]\n )\n\n const handleSearchClear = useCallback(() => {\n if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current)\n onSearch?.(\"\")\n }, [onSearch])\n\n const filtersProps = filterSettings && onFilter ? { filters: filterSettings.filters, onChange: handleSelect } : null\n const sortProps =\n sortSettings && onSort\n ? {\n options: sortSettings.options,\n sortBy: sortSettings.sortBy,\n sortDirection: sortSettings.sortDirection \|\| \"asc\",\n onSortByChange: (param: string \| number \| string[] \| undefined) =>\n onSort({ ...sortSettings, sortBy: param, sortDirection: sortSettings.sortDirection \|\| \"asc\" }),\n onSortDirectionChange: (direction: \"asc\" \| \"desc\") => onSort({ ...sortSettings, sortDirection: direction }),\n }\n : null\n\n const searchProps: (SearchInputProps & { \"data-testid\"?: string }) \| null = onSearch\n ? {\n placeholder: t`Search...`,\n \"data-testid\": \"searchbar\",\n value: searchTerm,\n onInput: handleSearchInput,\n onClear: handleSearchClear,\n onSearch: handleSearch,\n ...searchInputProps,\n }\n : null\n\n return (\n <>\n {tabs && (\n <div className=\"w-full\">\n <TabNavigation activeItem={tabs.activeItem} onActiveItemChange={tabs.onActiveItemChange}>\n {tabs.items.map((item) => (\n <TabNavigationItem key={item.value} label={item.label} value={item.value} />\n ))}\n </TabNavigation>\n </div>\n )}\n <Stack alignment=\"center\" gap=\"6\" className=\"bg-theme-background-lvl-1 flex w-full flex-col p-4\">\n {actions && (\n <Stack direction=\"horizontal\" className=\"w-full justify-end\">\n {actions}\n </Stack>\n )}\n\n <div className=\"flex w-full flex-col items-stretch gap-4 md:flex-row md:items-center\">\n {filtersProps && (\n <div className=\"w-full md:w-auto md:min-w-37.5\">\n <FiltersInput {...filtersProps} />\n </div>\n )}\n {sortProps && (\n <div className=\"w-full md:w-auto md:min-w-45\">\n <SortInput {...sortProps} />\n </div>\n )}\n {searchProps && (\n <div className=\"w-full md:ml-auto md:w-auto md:min-w-25\">\n <SearchInput {...searchProps} />\n </div>\n )}\n </div>\n\n {filterSettings?.selectedFilters && filterSettings.selectedFilters.length > 0 && onFilter && (\n <div className=\"w-full\">\n <SelectedFilters\n selectedFilters={filterSettings.selectedFilters}\n onDelete={handleFilterDelete}\n onClear={() => onFilter({ ...filterSettings, selectedFilters: [] })}\n />\n </div>\n )}\n {/* Count and Last Updated Info /}\n {(showCountInfo \|\| lastUpdated) && (\n <div className=\"text-theme-secondary flex w-full items-center justify-between text-sm\">\n <div className=\"flex items-center gap-2\">\n {showCountInfo && (\n <span>\n <Trans>\n Showing {filteredCount} of {totalCount} {itemName}\n </Trans>\n </span>\n )}\n {lastUpdated &&\n (() => {\n const formattedDate = formatLastUpdated(lastUpdated)\n return (\n <span>\n <Trans>Last updated: {formattedDate}</Trans>\n </span>\n )\n })()}\n </div>\n </div>\n )}\n </Stack>\n </>\n )\n}\n","import { startTransition, useState } from \"react\"\nimport { FilterSettings, SortOption, SortSettings } from \"@/client/components/ListToolbar/types\"\n\n/\n Sort direction enumeration\n * Used across all sort-enabled list views\n /\nexport type SortDirection = \"asc\" \| \"desc\"\n\n/\n Generic required sort settings with guaranteed non-optional properties\n * Used by components to maintain a fully-defined sort state\n \n Type parameter K is the sort key type (string literal union of allowed sort fields)\n \n @example\n * // For floating IPs\n * type FloatingIpListSortSettings = ListSortConfig<FloatingIpsSortKey>\n \n // For security groups\n * type SecurityGroupListSortSettings = ListSortConfig<\"name\" \| \"project_id\">\n /\nexport type ListSortConfig<T extends string = string> = {\n /\n Array of available sort options to display in the UI\n /\n options: SortOption[]\n /\n The currently selected sort field (guaranteed to be one of the available options)\n /\n sortBy: T\n /\n The currently active sort direction (guaranteed to be either \"asc\" or \"desc\")\n /\n sortDirection: SortDirection\n}\n\n/\n Configuration options for the useListWithFiltering hook\n /\nexport interface UseListWithFilteringOptions<T extends string> {\n /* Default sort key to use on initial render /\n defaultSortKey: T\n /* Default sort direction to use on initial render /\n defaultSortDir: SortDirection\n /* Available sort options to display in the sort dropdown /\n sortOptions: Array<{ label: string; value: string }>\n /* Initial filter settings configuration /\n filterSettings: FilterSettings\n}\n\n/\n Return value from the useListWithFiltering hook\n /\nexport interface UseListWithFilteringReturn<T extends string> {\n // State\n searchTerm: string\n sortSettings: ListSortConfig<T>\n filterSettings: FilterSettings\n\n // Handlers\n handleSearchChange: (term: string \| number \| string[] \| undefined) => void\n handleSortChange: (newSortSettings: SortSettings) => void\n handleFilterChange: (newFilterSettings: FilterSettings) => void\n}\n\n/\n Custom hook to manage common list view state: search, sort, and filter\n \n Extracts shared logic from list components to ensure consistent behavior\n * across all list pages and reduce code duplication.\n \n @example\n * ```tsx\n * const listState = useListWithFiltering({\n * defaultSortKey: \"name\",\n * defaultSortDir: \"asc\",\n * sortOptions: [\n * { label: t`Name`, value: \"name\" },\n * { label: t`Created`, value: \"created_at\" },\n * ],\n * filterSettings: {\n * filters: [\n * { displayName: t`Status`, filterName: \"status\", values: [\"active\", \"inactive\"] }\n * ]\n * }\n * })\n * ```\n */\nexport function useListWithFiltering<T extends string>({\n defaultSortKey,\n defaultSortDir,\n sortOptions,\n filterSettings: initialFilterSettings,\n}: UseListWithFilteringOptions<T>): UseListWithFilteringReturn<T> {\n // Search\n const [searchTerm, setSearchTerm] = useState(\"\")\n const handleSearchChange = (term: string \| number \| string[] \| undefined) => {\n const searchValue = typeof term === \"string\" ? term : \"\"\n startTransition(() => setSearchTerm(searchValue))\n }\n\n // Sort\n const [sortSettings, setSortSettings] = useState<ListSortConfig<T>>({\n options: sortOptions,\n sortBy: defaultSortKey,\n sortDirection: defaultSortDir,\n })\n const handleSortChange = (newSortSettings: SortSettings) => {\n const settings: ListSortConfig<T> = {\n options: newSortSettings.options ?? sortSettings.options,\n sortBy: (newSortSettings.sortBy?.toString() as T) \|\| defaultSortKey,\n sortDirection: (newSortSettings.sortDirection as SortDirection) \|\| defaultSortDir,\n }\n setSortSettings(settings)\n }\n\n // Filter\n const [filterSettings, setFilterSettings] = useState<FilterSettings>(initialFilterSettings)\n const handleFilterChange = (newFilterSettings: FilterSettings) => {\n startTransition(() => setFilterSettings(newFilterSettings))\n }\n\n return {\n searchTerm,\n sortSettings,\n filterSettings,\n handleSearchChange,\n handleSortChange,\n handleFilterChange,\n }\n}\n"],"mappings":"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"}