Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-20 21:32:31 -05:00
Code Issues Activity

fix(console): remove react warning from connector config form (#3720)

Browse source
This commit is contained in:
Charles Zhao 2023-04-20 11:45:33 +08:00 • committed by GitHub
parent e0649aa81a
commit 0acda89071
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 19 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/console/src/components/CodeEditor/index.tsx
View file

@ -1,6 +1,6 @@
import classNames from 'classnames';
import type { ChangeEvent, KeyboardEvent } from 'react';
import { useLayoutEffect, useMemo, useRef } from 'react';
import { useLayoutEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yDark as a11yDarkTheme } from 'react-syntax-highlighter/dist/esm/styles/prism';
@ -17,8 +17,7 @@ type Props = {
value?: string;
onChange?: (value: string) => void;
tabSize?: number;
hasError?: boolean;
errorMessage?: string;
error?: string | boolean;
placeholder?: string;
};
@ -29,8 +28,7 @@ function CodeEditor({
value,
onChange,
tabSize = 2,
hasError,
errorMessage,
error,
placeholder,
}: Props) {
const textareaRef = useRef<HTMLTextAreaElement>(null);
@ -79,13 +77,7 @@ function CodeEditor({
};
// TODO @sijie temp solution for required error (the errorMessage is an empty string)
const finalErrorMessage = useMemo(() => {
if (errorMessage) {
return errorMessage;
}
return t('general.required');
}, [errorMessage, t]);
const finalErrorMessage = typeof error === 'string' && !!error ? error : t('general.required');
const maxLineNumberDigits = ((value ?? '').split('\n').length + 1).toString().length;
const isShowingPlaceholder = !value;
@ -141,7 +133,7 @@ function CodeEditor({
</SyntaxHighlighter>
</div>
</div>
{hasError && <div className={styles.errorMessage}>{finalErrorMessage}</div>}
{finalErrorMessage && <div className={styles.errorMessage}>{finalErrorMessage}</div>}
</>
);
}

6
packages/console/src/components/Select/index.tsx
View file

@ -23,7 +23,7 @@ type Props<T> = {
options: Array<Option<T>>;
onChange?: (value?: T) => void;
isReadOnly?: boolean;
hasError?: boolean;
error?: string | boolean;
placeholder?: ReactNode;
isClearable?: boolean;
size?: 'small' | 'medium' | 'large';
@ -35,7 +35,7 @@ function Select<T extends string>({
options,
onChange,
isReadOnly,
hasError,
error,
placeholder,
isClearable,
size = 'large',
@ -64,7 +64,7 @@ function Select<T extends string>({
styles[size],
isOpen && styles.open,
isReadOnly && styles.readOnly,
hasError && styles.error,
Boolean(error) && styles.error,
isClearable && value && styles.clearable,
className
)}

2
packages/console/src/components/TextInput/index.tsx
View file

@ -84,7 +84,7 @@ function TextInput(
<div
className={classNames(
styles.container,
error && styles.error,
Boolean(error) && styles.error,
isConfidential && isContentHidden && type === 'text' && styles.hideTextContainerContent,
icon && styles.withIcon,
disabled && styles.disabled,

6
packages/console/src/components/Textarea/index.tsx
View file

@ -6,15 +6,15 @@ import * as styles from './index.module.scss';
type Props = HTMLProps<HTMLTextAreaElement> & {
className?: string;
hasError?: boolean;
error?: string | boolean;
};
function Textarea(
{ className, hasError, ...rest }: Props,
{ className, error, ...rest }: Props,
reference: ForwardedRef<HTMLTextAreaElement>
) {
return (
<div className={classNames(styles.container, hasError && styles.error, className)}>
<div className={classNames(styles.container, Boolean(error) && styles.error, className)}>
<textarea {...rest} ref={reference} />
</div>
);

12
packages/console/src/pages/Connectors/components/ConfigForm/index.tsx
View file

@ -47,8 +47,7 @@ function ConfigForm({ formItems }: Props) {
}, [formItems, values]);
const renderFormItem = (item: ConnectorConfigFormItem) => {
const hasError = Boolean(errors[item.key]);
const errorMessage = errors[item.key]?.message;
const error = errors[item.key]?.message ?? Boolean(errors[item.key]);
const buildCommonProperties = () => ({
...register(item.key, {
@ -56,7 +55,7 @@ function ConfigForm({ formItems }: Props) {
valueAsNumber: item.type === ConnectorConfigFormItemType.Number,
}),
placeholder: item.placeholder,
hasError,
error,
});
if (item.type === ConnectorConfigFormItemType.Text) {
@ -109,7 +108,7 @@ function ConfigForm({ formItems }: Props) {
<Select
options={item.selectItems}
value={typeof value === 'string' ? value : undefined}
hasError={hasError}
error={error}
onChange={onChange}
/>
);
@ -119,8 +118,7 @@ function ConfigForm({ formItems }: Props) {
return (
<CodeEditor
language="json"
hasError={hasError}
errorMessage={errorMessage}
error={error}
value={typeof value === 'string' ? value : '{}'}
onChange={onChange}
/>
@ -131,7 +129,7 @@ function ConfigForm({ formItems }: Props) {
// This will happen when connector's version is ahead of AC
return (
<TextInput
error={hasError}
error={error}
value={typeof value === 'string' ? value : ''}
onChange={onChange}
/>

3
packages/console/src/pages/Connectors/components/ConnectorForm/ConfigForm.tsx
View file

@ -54,8 +54,7 @@ function ConfigForm({ formItems, className, connectorId, connectorType }: Props)
}}
render={({ field: { onChange, value } }) => (
<CodeEditor
hasError={Boolean(errors.config)}
errorMessage={errors.config?.message}
error={errors.config?.message ?? Boolean(errors.config)}
language="json"
value={value}
onChange={onChange}

2
packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx
View file

@ -131,7 +131,7 @@ function SignUpForm() {
render={({ field: { value, onChange } }) => (
<Select
value={value}
hasError={Boolean(errors.signUp?.identifier)}
error={Boolean(errors.signUp?.identifier)}
options={signUpIdentifiers.map((identifier) => ({
value: identifier,
title: (