Merge branch 'master' into feature/migrate-remaining-alert-component

redpanda-data · Oct 30, 2023 · 410b49e · 410b49e
2 parents 0a6af9c + 0cb9c93
commit 410b49e
Show file tree

Hide file tree

Showing 21 changed files with 334 additions and 302 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -28,7 +28,7 @@
         "@heroicons/react": "^1.0.6",
         "@monaco-editor/react": "^4.6",
         "@primer/octicons-react": "^17",
-        "@redpanda-data/ui": "^3.27.0",
+        "@redpanda-data/ui": "^3.30.1",
         "@textea/json-viewer": "^1.24.4",
         "antd": "^4.21",
         "array-move": "^4",

diff --git a/frontend/src/components/pages/acls/CreateServiceAccountEditor.tsx b/frontend/src/components/pages/acls/CreateServiceAccountEditor.tsx
@@ -1,11 +1,11 @@
 import { ReloadOutlined } from '@ant-design/icons';
-import { Select } from 'antd';
 import { Button, Input, Flex, Checkbox } from '@redpanda-data/ui';
 import { observer } from 'mobx-react';
 import { useState } from 'react';
 import { CreateUserRequest } from '../../../state/restInterfaces';
 import { Label, LabelTooltip } from '../../../utils/tsxUtils';
 import { Tooltip } from '@redpanda-data/ui';
+import { SingleSelect } from '../../misc/Select';
 
 export const CreateServiceAccountEditor = observer((p: { state: CreateUserRequest }) => {
     const state = p.state;
@@ -72,22 +72,15 @@ export const CreateServiceAccountEditor = observer((p: { state: CreateUserReques
                 </Label>
 
                 <Label text="Mechanism">
-                    {/* <Select options={[
-                    { label: 'SCRAM-SHA-256', value: 'SCRAM-SHA-256' },
-                    { label: 'SCRAM-SHA-512', value: 'SCRAM-SHA-512' },
-                ]}
-                    value={state.mechanism}
-                    onChange={e => state.mechanism = e}
-                /> */}
-
-                <Select
-                    style={{ width: '300px' }}
-                    value={state.mechanism}
-                    onChange={e => state.mechanism = e}
-                >
-                    <Select.Option value="SCRAM-SHA-256">SCRAM-SHA-256</Select.Option>
-                    <Select.Option value="SCRAM-SHA-512">SCRAM-SHA-512</Select.Option>
-                </Select>
+                    <SingleSelect<'SCRAM-SHA-256' | 'SCRAM-SHA-512'> options={[{
+                        value: 'SCRAM-SHA-256',
+                        label: 'SCRAM-SHA-256',
+                    }, {
+                        value: 'SCRAM-SHA-512',
+                        label: 'SCRAM-SHA-512',
+                    }]} value={state.mechanism} onChange={e => {
+                        state.mechanism = e;
+                    }}/>
             </Label>
 
             </div>

diff --git a/frontend/src/components/pages/acls/Operation.tsx b/frontend/src/components/pages/acls/Operation.tsx
@@ -9,26 +9,33 @@
 * by the Apache License, Version 2.0
 */
 
-import { CSSProperties } from 'react';
+import { CSSProperties, FC, ReactElement, ReactNode } from 'react';
 import { observer } from 'mobx-react';
-import { Select } from 'antd';
 import { AclOperation, AclStrPermission } from '../../../state/restInterfaces';
-import { CheckIcon, XIcon, MinusIcon } from '@heroicons/react/solid';
-const { Option } = Select;
-
+import { SingleSelect } from '../../misc/Select';
+import { CheckIcon, CloseIcon, MinusIcon } from '@chakra-ui/icons';
+import { Flex } from '@redpanda-data/ui';
+import { Label } from '../../../utils/tsxUtils';
 
 const icons = {
     minus: <MinusIcon color="grey" />,
     check: <CheckIcon color="green" />,
-    cross: <XIcon color="red" />,
+    cross: <CloseIcon color="red" />,
 }
 
+const OptionContent: FC<{
+    children: ReactNode,
+    icon: ReactElement,
+}> = ({children, icon}) => <Flex gap={2} alignItems="center" pointerEvents="none">
+    {icon}
+    <span>{children}</span>
+</Flex>
 
 export const Operation = observer((p: {
     operation: string | AclOperation,
     value: AclStrPermission,
     disabled?: boolean,
-    onChange?: (v: AclStrPermission) => void,
+    onChange: (v: AclStrPermission) => void,
     style?: CSSProperties
 }) => {
     const disabled = p.disabled ?? false;
@@ -37,39 +44,30 @@ export const Operation = observer((p: {
         ? p.operation
         : AclOperation[p.operation];
 
-    const optionContent = (icon: JSX.Element, text: string) => <>
-        <div className="iconSelectOption">
-            {icon}
-            <span>{text}</span>
-        </div>
-    </>
-
-    return <Select
-        className="aclOperationSelect"
-        style={Object.assign({}, p.style, { pointerEvents: disabled ? 'none' : undefined })}
-        bordered={!disabled}
-        disabled={disabled}
-
-        size="middle"
-        showArrow={false}
-        value={p.value}
-        onChange={p.onChange}
-        virtual={false}
-        defaultValue="Any"
-
-        dropdownMatchSelectWidth={false}
-
-        optionLabelProp="label"
-
-    >
-        <Option value="Any" label={optionContent(icons.minus, operationName)}>
-            {optionContent(icons.minus, 'Not set')}
-        </Option>
-        <Option value="Allow" label={optionContent(icons.check, operationName)}>
-            {optionContent(icons.check, 'Allow')}
-        </Option>
-        <Option value="Deny" label={optionContent(icons.cross, operationName)}>
-            {optionContent(icons.cross, 'Deny')}
-        </Option>
-    </Select>
+    return (
+        <Label text={operationName}>
+            <SingleSelect<AclStrPermission>
+                components={{
+                    DropdownIndicator: null,
+                }}
+                options={[
+                    {
+                        value: 'Any',
+                        label: <OptionContent icon={icons.minus}>Not set</OptionContent>
+                    },
+                    {
+                        value: 'Allow',
+                        label: <OptionContent icon={icons.check}>Allow</OptionContent>
+                    },
+                    {
+                        value: 'Deny',
+                        label: <OptionContent icon={icons.cross}>Deny</OptionContent>
+                    },
+                ]}
+                value={p.value}
+                onChange={p.onChange}
+                isDisabled={disabled}
+            />
+        </Label>
+    )
 });
diff --git a/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx b/frontend/src/components/pages/acls/PrincipalGroupEditor.tsx
@@ -18,7 +18,7 @@ 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 { Box, Button, HStack, Icon, Input, InputGroup, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, useToast, VStack } from '@redpanda-data/ui';
+import { Box, Button, Grid, HStack, Icon, Input, InputGroup, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, useToast, VStack } from '@redpanda-data/ui';
 import { SingleSelect } from '../../misc/Select';
 
 
@@ -311,24 +311,9 @@ const ResourceACLsEditor = observer((p: {
                 </Label>
             )}
 
-            <Label text="Operations">
-                <div
-                    style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        rowGap: '8px',
-                        columnGap: '20px',
-                        flexWrap: 'wrap',
-                        width: '100%',
-                        maxHeight: '60px',
-                        alignItems: 'flex-start'
-                    }}
-                >
+            <Label text="Operations" style={{width: '100%'}}>
+                <Grid templateColumns="repeat(auto-fill, minmax(110px, 1fr))" gap={6} width="full">
                     <Operation
-                        style={{
-                            marginBottom: '30px', // force 'all' to appear separate
-                            marginRight: '16px'
-                        }}
                         operation={AclOperation.All}
                         value={res.all}
                         onChange={p => (res.all = p)}
@@ -339,7 +324,7 @@ const ResourceACLsEditor = observer((p: {
                         .map(([operation, permission]) => (
                             <Operation key={operation} operation={operation} value={isAllSet ? res.all : permission} onChange={p => ((res.permissions as any)[operation] = p)} disabled={isAllSet} />
                         ))}
-                </div>
+                </Grid>
             </Label>
 
             {p.onDelete && (

diff --git a/frontend/src/components/pages/connect/Connector.Details.tsx b/frontend/src/components/pages/connect/Connector.Details.tsx
@@ -9,8 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-/* eslint-disable no-useless-escape */
-import { Skeleton } from 'antd';
 import { useEffect, useState } from 'react';
 import { observer, useLocalObservable } from 'mobx-react';
 import { comparer } from 'mobx';
@@ -28,7 +26,7 @@ import './helper';
 import { ConfirmModal, NotConfigured, statusColors, TaskState } from './helper';
 import PageContent from '../../misc/PageContent';
 import { delay } from '../../../utils/utils';
-import { Button, Alert, AlertIcon, Box, CodeBlock, Flex, Grid, Heading, Tabs, Text, useDisclosure, Modal as RPModal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Tooltip } from '@redpanda-data/ui';
+import { Button, Alert, AlertIcon, Box, CodeBlock, Flex, Grid, Heading, Tabs, Text, useDisclosure, Modal as RPModal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Tooltip, SkeletonText } from '@redpanda-data/ui';
 import Section from '../../misc/Section';
 import React from 'react';
 import { getConnectorFriendlyName } from './ConnectorBoxCard';
@@ -68,12 +66,9 @@ const KafkaConnectorMain = observer(
             restartingTask: null,
             deletingConnector: null,
         }));
-        if (!connectClusterStore.isInitialized)
-            return (
-                <div>
-                    <Skeleton loading={true} active={true} paragraph={{ rows: 20, width: '100%' }} />
-                </div>
-            );
+        if (!connectClusterStore.isInitialized) {
+            return <SkeletonText mt={5} noOfLines={20} spacing={5} skeletonHeight={4} />
+        }
 
         const connectorStore = connectClusterStore.getConnectorStore(connectorName);