Skip to content

Commit

Permalink
Merge pull request #863 from redpanda-data/feature/autocomplete-migra…
Browse files Browse the repository at this point in the history 
…tion

Autocomplete migration
  • Loading branch information
@jvorcak
jvorcak authored Oct 11, 2023
2 parents e4b176d + 1541a96 commit 63ae78e
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 59 deletions.
54 changes: 27 additions & 27 deletions frontend/src/components/pages/acls/PrincipalGroupEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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);

Expand Down Expand Up @@ -139,28 +135,32 @@ export const AclPrincipalGroupEditor = observer((p: {
}
>
<InputGroup>
<Select
value={group.principalType}
onChange={x => (group.principalType = x)}
disabled
showArrow={false}
style={{
width: '80px',
background: 'hsl(0deg 0% 98%)',
cursor: 'default'
}}
>
<Option value="User">User</Option>
{/* <Option value="Group">Group</Option> */}
</Select>
<AutoComplete
style={{ width: 260 }}
options={principalOptions}
filterOption={(inputValue, option) => containsIgnoreCase(option!.value, inputValue)}
<Box mr={2} minW={150}>
<SingleSelect<string>
value={group.principalType}
options={[
{
label: 'User',
value: 'User',
},
// {
// label: 'Group',
// value: 'Group'
// }
]}
onChange={(value) => {
group.principalType = value
}}
/>
</Box>

<Input
value={group.principalName}
onChange={v => {
if (v.includes(':')) return;
group.principalName = v;
onChange={(e) => {
if (e.target.value.includes(':')) {
return;
}
group.principalName = e.target.value;
}}
{...{ spellCheck: false }}
/>
Expand Down
52 changes: 20 additions & 32 deletions frontend/src/components/pages/topics/Tab.Messages/PreviewSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 = <div>
Expand Down Expand Up @@ -166,9 +167,9 @@ export class PreviewSettings extends Component<{ getShowDialog: () => boolean, s
<div
ref={draggableProvided.innerRef}
{...draggableProvided.draggableProps}
{...draggableProvided.dragHandleProps}
>
<PreviewTagSettings tag={tag} index={index}
draggableProvided={draggableProvided}
onRemove={() => tags.removeAll(t => t.id == tag.id)}
allCurrentKeys={currentKeys}
/>
Expand Down Expand Up @@ -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 <div style={{
display: 'flex', placeItems: 'center', gap: '4px',
background: 'hsl(0deg, 0%, 91%)', padding: '4px', borderRadius: '4px',
marginBottom: '6px'
}}>
return <Flex placeItems="center" gap={1} p={1} borderRadius={1} mb={1.5}>

{/* Move Handle */}
<span className="moveHandle"><ThreeBarsIcon /></span>
<span className="moveHandle" {...draggableProvided.dragHandleProps}><ThreeBarsIcon /></span>

{/* Enabled */}
<Checkbox isChecked={tag.isActive} onChange={e => tag.isActive = e.target.checked} />
Expand Down Expand Up @@ -286,29 +283,20 @@ class PreviewTagSettings extends Component<{ tag: PreviewTagV2, index: number, o
<span className="inlineButton" ><GearIcon /></span>
</Popover>

{/* Pattern */}
<AutoComplete options={allCurrentKeys.map(t => ({ 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' }}
/>
<Box w="full">
<SingleSelect<string>
placeholder="Pattern..."
value={tag.pattern}
onChange={(value) => {
tag.pattern = value
}}
options={allCurrentKeys.map(t => ({label: t, value: t}))}
/>
</Box>

{/* Remove */}
<span className="inlineButton" onClick={onRemove} ><XIcon /></span>
</div>;
</Flex>;
}
}

Expand Down

0 comments on commit 63ae78e

Please sign in to comment.