feat(console): model argument schema support array/enum etc (#3132)

console/packages/starwhale-ui/src/RJSFForm/Argument/templates/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,90 @@
+import { CSSProperties } from 'react'
+import { ArrayFieldTemplateItemType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils'
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+    T = any,
+    S extends StrictRJSFSchema = RJSFSchema,
+    F extends FormContextType = any
+>(props: ArrayFieldTemplateItemType<T, S, F>) {
+    const {
+        children,
+        className,
+        disabled,
+        hasToolbar,
+        hasMoveDown,
+        hasMoveUp,
+        hasRemove,
+        hasCopy,
+        index,
+        onCopyIndexClick,
+        onDropIndexClick,
+        onReorderClick,
+        readonly,
+        registry,
+        uiSchema,
+    } = props
+    const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates
+    const btnStyle: CSSProperties = {
+        flex: 1,
+        paddingLeft: 6,
+        paddingRight: 6,
+        fontWeight: 'bold',
+    }
+    return (
+        <div className={className}>
+            <div className={hasToolbar ? 'col-xs-9' : 'col-xs-12'}>{children}</div>
+            {hasToolbar && (
+                <div className='col-xs-3 array-item-toolbox'>
+                    <div
+                        className='btn-group'
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'space-around',
+                        }}
+                    >
+                        {(hasMoveUp || hasMoveDown) && (
+                            <MoveUpButton
+                                style={btnStyle}
+                                disabled={disabled || readonly || !hasMoveUp}
+                                onClick={onReorderClick(index, index - 1)}
+                                uiSchema={uiSchema}
+                                registry={registry}
+                            />
+                        )}
+                        {(hasMoveUp || hasMoveDown) && (
+                            <MoveDownButton
+                                style={btnStyle}
+                                disabled={disabled || readonly || !hasMoveDown}
+                                onClick={onReorderClick(index, index + 1)}
+                                uiSchema={uiSchema}
+                                registry={registry}
+                            />
+                        )}
+                        {hasCopy && (
+                            <CopyButton
+                                style={btnStyle}
+                                disabled={disabled || readonly}
+                                onClick={onCopyIndexClick(index)}
+                                uiSchema={uiSchema}
+                                registry={registry}
+                            />
+                        )}
+                        {hasRemove && (
+                            <RemoveButton
+                                style={btnStyle}
+                                disabled={disabled || readonly}
+                                onClick={onDropIndexClick(index)}
+                                uiSchema={uiSchema}
+                                registry={registry}
+                            />
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}

console/packages/starwhale-ui/src/RJSFForm/Argument/templates/ArrayFieldTemplate.tsx

@@ -0,0 +1,89 @@
+import {
+    getTemplate,
+    getUiOptions,
+    ArrayFieldTemplateProps,
+    ArrayFieldTemplateItemType,
+    FormContextType,
+    RJSFSchema,
+    StrictRJSFSchema,
+} from '@rjsf/utils'
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+    T = any,
+    S extends StrictRJSFSchema = RJSFSchema,
+    F extends FormContextType = any
+>(props: ArrayFieldTemplateProps<T, S, F>) {
+    const {
+        canAdd,
+        className,
+        disabled,
+        idSchema,
+        uiSchema,
+        items,
+        onAddClick,
+        readonly,
+        registry,
+        // required,
+        schema,
+        // title,
+    } = props
+    const uiOptions = getUiOptions<T, S, F>(uiSchema)
+    const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+        'ArrayFieldDescriptionTemplate',
+        registry,
+        uiOptions
+    )
+    const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+        'ArrayFieldItemTemplate',
+        registry,
+        uiOptions
+    )
+    // const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    //     'ArrayFieldTitleTemplate',
+    //     registry,
+    //     uiOptions
+    // )
+    // Button templates are not overridden in the uiSchema
+    const {
+        ButtonTemplates: { AddButton },
+    } = registry.templates
+
+    return (
+        <fieldset className={className} id={idSchema.$id}>
+            {/* <ArrayFieldTitleTemplate
+                idSchema={idSchema}
+                title={uiOptions.title || title}
+                required={required}
+                schema={schema}
+                uiSchema={uiSchema}
+                registry={registry}
+            /> */}
+            <ArrayFieldDescriptionTemplate
+                idSchema={idSchema}
+                description={uiOptions.description || schema.description}
+                schema={schema}
+                uiSchema={uiSchema}
+                registry={registry}
+            />
+            <div className='row array-item-list'>
+                {items &&
+                    items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+                        <ArrayFieldItemTemplate key={key} {...itemProps} />
+                    ))}
+            </div>
+            {canAdd && (
+                <AddButton
+                    className='array-item-add'
+                    onClick={onAddClick}
+                    disabled={disabled || readonly}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                />
+            )}
+        </fieldset>
+    )
+}

console/packages/starwhale-ui/src/RJSFForm/Argument/templates/IconButton.tsx

@@ -0,0 +1,97 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils'
+import { ExtendButton } from '@starwhale/ui/Button'
+
+export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+    props: IconButtonProps<T, S, F>
+) {
+    const { icon, ...otherProps } = props
+    return (
+        // <button type='button' className={`btn btn-${iconType} ${className}`} {...otherProps}>
+        //     <i className={`iconfont icon-${icon}`} />
+        // </button>
+        //
+        // @ts-ignore
+        <ExtendButton {...otherProps} icon={icon as any} kind='secondary' />
+    )
+}
+
+export function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+    props: IconButtonProps<T, S, F>
+) {
+    const {
+        registry: { translateString },
+    } = props
+    return (
+        <IconButton
+            title={translateString(TranslatableString.CopyButton)}
+            className='array-item-copy'
+            {...props}
+            icon='add'
+        />
+    )
+}
+
+export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+    props: IconButtonProps<T, S, F>
+) {
+    const {
+        registry: { translateString },
+    } = props
+    return (
+        <IconButton
+            title={translateString(TranslatableString.CopyButton)}
+            className='array-item-copy'
+            {...props}
+            icon='copy'
+        />
+    )
+}
+
+export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+    props: IconButtonProps<T, S, F>
+) {
+    const {
+        registry: { translateString },
+    } = props
+    return (
+        <IconButton
+            title={translateString(TranslatableString.MoveDownButton)}
+            className='array-item-move-down'
+            {...props}
+            icon='decline'
+        />
+    )
+}
+
+export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+    props: IconButtonProps<T, S, F>
+) {
+    const {
+        registry: { translateString },
+    } = props
+    return (
+        <IconButton
+            title={translateString(TranslatableString.MoveUpButton)}
+            className='array-item-move-up'
+            {...props}
+            icon='rise'
+        />
+    )
+}
+
+export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+    props: IconButtonProps<T, S, F>
+) {
+    const {
+        registry: { translateString },
+    } = props
+    return (
+        <IconButton
+            title={translateString(TranslatableString.RemoveButton)}
+            className='array-item-remove'
+            {...props}
+            iconType='danger'
+            icon='close'
+        />
+    )
+}

console/packages/starwhale-ui/src/RJSFForm/Argument/templates/index.ts

@@ -0,0 +1,36 @@
+import ArrayFieldItemTemplate from './ArrayFieldItemTemplate'
+import ArrayFieldTemplate from './ArrayFieldTemplate'
+// import BaseInputTemplate from "./BaseInputTemplate";
+// import DescriptionField from "./DescriptionField";
+// import ErrorList from "./ErrorList";
+import { AddButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton'
+// import FieldErrorTemplate from "./FieldErrorTemplate";
+// import FieldTemplate from './FieldTemplate'
+// import SubmitButton from "./SubmitButton";
+// import TitleField from "./TitleField";
+// import WrapIfAdditionalTemplate from "./WrapIfAdditionalTemplate";
+import { TemplatesType } from '@rjsf/utils'
+
+const Index: Partial<TemplatesType> = {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate: ArrayFieldTemplate as TemplatesType['ArrayFieldTemplate'],
+    // BaseInputTemplate,
+    // @ts-ignore
+    ButtonTemplates: {
+        AddButton,
+        MoveDownButton,
+        MoveUpButton,
+        RemoveButton,
+        // SubmitButton,
+    },
+    // DescriptionFieldTemplate: DescriptionField,
+    // ErrorListTemplate: ErrorList,
+    // FieldErrorTemplate,
+    // FieldTemplate,
+    // ObjectFieldTemplate,
+    //   ObjectFieldTemplate as TemplatesType["ObjectFieldTemplate"],
+    // TitleFieldTemplate: TitleField as TemplatesType["TitleFieldTemplate"],
+    // WrapIfAdditionalTemplate,
+}
+
+export default Index