From 1541a96fe2d9519dbd26a9db955236ebb02e3bc8 Mon Sep 17 00:00:00 2001 From: Jan Vorcak Date: Fri, 6 Oct 2023 08:44:51 +0200 Subject: [PATCH] Autocomplete migration --- .../pages/acls/PrincipalGroupEditor.tsx | 54 +++++++++---------- .../topics/Tab.Messages/PreviewSettings.tsx | 52 +++++++----------- 2 files changed, 47 insertions(+), 59 deletions(-) diff --git a/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx b/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx index 5630ab909..ec721cca0 100644 --- a/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx +++ b/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx @@ -11,17 +11,15 @@ import { useState } from 'react'; import { observer } from 'mobx-react'; -import { AutoComplete, Select } from 'antd'; import { api } from '../../../state/backendApi'; import { AclOperation, AclStrOperation, AclStrResourceType } from '../../../state/restInterfaces'; import { AnimatePresence, animProps_radioOptionGroup, MotionDiv } from '../../../utils/animationProps'; -import { containsIgnoreCase } from '../../../utils/utils'; import { Code, Label, LabelTooltip } from '../../../utils/tsxUtils'; import { HiOutlineTrash } from 'react-icons/hi'; import { AclPrincipalGroup, createEmptyConsumerGroupAcl, createEmptyTopicAcl, createEmptyTransactionalIdAcl, ResourceACLs, unpackPrincipalGroup } from './Models'; import { Operation } from './Operation'; -import { Button, HStack, Icon, Text, Input, InputGroup, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, useToast, VStack } from '@redpanda-data/ui'; -const { Option } = Select; +import { Box, Button, HStack, Icon, Input, InputGroup, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, useToast, VStack } from '@redpanda-data/ui'; +import { SingleSelect } from '../../misc/Select'; export const AclPrincipalGroupEditor = observer((p: { @@ -32,8 +30,6 @@ export const AclPrincipalGroupEditor = observer((p: { const group = p.principalGroup; const toast = useToast() - const existingPrincipals: string[] = []; - const principalOptions = existingPrincipals.map(p => ({ value: p })); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(undefined as string | undefined); @@ -139,28 +135,32 @@ export const AclPrincipalGroupEditor = observer((p: { } > - - containsIgnoreCase(option!.value, inputValue)} + + + value={group.principalType} + options={[ + { + label: 'User', + value: 'User', + }, + // { + // label: 'Group', + // value: 'Group' + // } + ]} + onChange={(value) => { + group.principalType = value + }} + /> + + + { - if (v.includes(':')) return; - group.principalName = v; + onChange={(e) => { + if (e.target.value.includes(':')) { + return; + } + group.principalName = e.target.value; }} {...{ spellCheck: false }} /> diff --git a/frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx b/frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx index 4acb73129..af6df3e04 100644 --- a/frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx +++ b/frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx @@ -9,12 +9,12 @@ * by the Apache License, Version 2.0 */ -import { AutoComplete, Input } from 'antd'; +import { Input } from 'antd'; import { arrayMoveMutable } from 'array-move'; import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import React, { Component } from 'react'; -import { DragDropContext, Draggable, Droppable, DropResult, ResponderProvided } from 'react-beautiful-dnd'; +import { DragDropContext, Draggable, DraggableProvided, Droppable, DropResult, ResponderProvided } from 'react-beautiful-dnd'; import { api } from '../../../../state/backendApi'; import { PreviewTagV2 } from '../../../../state/ui'; import { uiState } from '../../../../state/uiState'; @@ -23,7 +23,8 @@ import { Code, Label, OptionGroup, toSafeString } from '../../../../utils/tsxUti import { CollectedProperty, collectElements2, getAllMessageKeys, randomId } from '../../../../utils/utils'; import globExampleImg from '../../../../assets/globExample.png'; import { GearIcon, InfoIcon, ThreeBarsIcon, XIcon } from '@primer/octicons-react'; -import { Button, Checkbox, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover } from '@redpanda-data/ui'; +import { Box, Button, Checkbox, Flex, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover } from '@redpanda-data/ui'; +import { SingleSelect } from '../../../misc/Select'; const globHelp =
@@ -166,9 +167,9 @@ export class PreviewSettings extends Component<{ getShowDialog: () => boolean, s
tags.removeAll(t => t.id == tag.id)} allCurrentKeys={currentKeys} /> @@ -246,18 +247,14 @@ todo: - */ @observer -class PreviewTagSettings extends Component<{ tag: PreviewTagV2, index: number, onRemove: () => void, allCurrentKeys: string[] }>{ +class PreviewTagSettings extends Component<{ tag: PreviewTagV2, index: number, onRemove: () => void, allCurrentKeys: string[], draggableProvided: DraggableProvided }>{ render() { - const { tag, onRemove, allCurrentKeys } = this.props; + const { tag, onRemove, allCurrentKeys, draggableProvided } = this.props; - return
+ return {/* Move Handle */} - + {/* Enabled */} tag.isActive = e.target.checked} /> @@ -286,29 +283,20 @@ class PreviewTagSettings extends Component<{ tag: PreviewTagV2, index: number, o - {/* Pattern */} - ({ label: t, value: t }))} - size="small" - style={{ flexGrow: 1, flexBasis: '400px' }} - - defaultActiveFirstOption={true} - onSearch={(_value: string) => { - // console.log('onSearch ', value); - }} - value={tag.pattern} - - onChange={(value: string) => tag.pattern = value} - placeholder="Pattern..." - filterOption={(inputValue, option) => option?.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} - - notFoundContent="None" - - {...{ spellCheck: 'false' }} - /> + + + placeholder="Pattern..." + value={tag.pattern} + onChange={(value) => { + tag.pattern = value + }} + options={allCurrentKeys.map(t => ({label: t, value: t}))} + /> + {/* Remove */} -
; + ; } }