@leav/ui 0.0.1-alpha-2 → 0.0.1-alpha-3

package/src/components/EditApplication/EditApplicationInfo/EditApplicationInfoForm/EditApplicationInfoForm.tsx

@@ -1,316 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {endpointFormatRegex, getFlagByLang, idFormatRegex, slugifyString} from '@leav/utils';
-import {ColorPicker, Form, FormInstance} from 'antd';
-import {Color} from 'antd/lib/color-picker';
-import {KitInput, KitSelect} from 'aristid-ds';
-import React, {useState} from 'react';
-import styled from 'styled-components';
-import {useLang} from '../../../../hooks';
-import {useSharedTranslation} from '../../../../hooks/useSharedTranslation';
-import {ApplicationType, GetApplicationByIdQuery} from '../../../../_gqlTypes';
-import {SubmitStateNotifier} from '../../../SubmitStateNotifier';
-import ModuleSelector from './ModuleSelector';
-
-const DescriptionFormItem = styled(Form.Item)`
-    .ant-form-item-extra {
-        min-height: 0;
-    }
-`;
-
-interface IEditApplicationInfoFormProps {
-    form: FormInstance;
-    application: GetApplicationByIdQuery['applications']['list'][number];
-    loading: boolean;
-    onSubmitField: (field: string, value: any) => Promise<void>;
-    onCheckApplicationUniqueness: (fieldToCheck: 'id' | 'endpoint', value: any) => Promise<boolean>;
-}
-
-function EditApplicationInfoForm({
-    form,
-    application,
-    onSubmitField,
-    onCheckApplicationUniqueness,
-    loading
-}: IEditApplicationInfoFormProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {availableLangs, defaultLang} = useLang();
-    const isEditing = !!application;
-
-    const [isInternalApp, setIsInternalApp] = useState(true);
-    const [hasIdBeenEdited, setHasIdBeenEdited] = useState(false);
-    const [hasEndpointBeenEdited, setHasEndpointBeenEdited] = useState(false);
-    const [runningFieldsSubmit, setRunningFieldsSubmit] = useState<string[]>([]);
-    const [processedFieldsSubmit, setProcessedFieldsSubmit] = useState<string[]>([]);
-    const isReadOnly = isEditing && !application?.permissions?.admin_application;
-
-    const _getRequiredMessage = (field: string) =>
-        t('errors.field_required', {
-            interpolation: {escapeValue: false},
-            fieldName: t(`applications.${field}`)
-        });
-
-    const _handleLabelChange = (lang: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (isEditing || lang !== defaultLang) {
-            return;
-        }
-
-        // If ID or endpoint hasn't been edited manually, generate it from label
-        if (!hasIdBeenEdited) {
-            form.setFieldsValue({id: slugifyString(e.target.value)});
-        }
-
-        if (!hasEndpointBeenEdited) {
-            form.setFieldsValue({endpoint: slugifyString(e.target.value, '-')});
-        }
-    };
-
-    const _handleIdChange = () => {
-        setHasIdBeenEdited(true);
-    };
-
-    const _handleEndpointChange = () => {
-        setHasEndpointBeenEdited(true);
-    };
-
-    const _handleTypeChange = (value: ApplicationType) => {
-        setIsInternalApp(value === ApplicationType.internal);
-    };
-
-    const _handleAppUniquenessValidation = (fieldToCheck: 'id' | 'endpoint') => async (rule, value) => {
-        if (value && (!isEditing || value !== formInitValues[fieldToCheck])) {
-            const isAppUnique = await onCheckApplicationUniqueness(fieldToCheck, value);
-
-            if (!isAppUnique) {
-                throw new Error();
-            }
-        }
-    };
-
-    const _handleFieldSubmit = async (field: string, value: any) => {
-        if (!form.isFieldTouched(field)) {
-            return;
-        }
-
-        setRunningFieldsSubmit([...runningFieldsSubmit, field]);
-
-        await onSubmitField(field, value);
-        setProcessedFieldsSubmit([...processedFieldsSubmit, field]);
-
-        setRunningFieldsSubmit(runningFieldsSubmit.filter(f => f !== field));
-    };
-
-    const _handleColorChange = (value: Color) => {
-        if (isEditing) {
-            _handleFieldSubmit('color', value.toHexString());
-        }
-    };
-
-    const _handleBlur = (field: string) => async (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        if (isEditing) {
-            _handleFieldSubmit(field, e.target.value);
-        }
-    };
-
-    const _handleSubmitOnEnter = (field: string) => (
-        e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-        // If shift is pressed, don't submit
-        if (e.shiftKey || !isEditing) {
-            return;
-        }
-
-        if (e.key === 'Enter') {
-            e.preventDefault();
-
-            _handleFieldSubmit(field, e.currentTarget.value);
-        }
-    };
-
-    const label = application?.label
-        ? {
-              ...availableLangs.reduce((acc, lang) => {
-                  acc[`label_${lang}`] = application.label[lang] ?? '';
-                  return acc;
-              }, {})
-          }
-        : {};
-
-    const description = application?.description
-        ? {
-              ...availableLangs.reduce((acc, lang) => {
-                  acc[`description_${lang}`] = application.description[lang] ?? '';
-                  return acc;
-              }, {})
-          }
-        : {};
-
-    const formInitValues = {
-        type: ApplicationType.internal,
-        ...application,
-        ...label,
-        ...description
-    };
-
-    const _getFieldState = (field: string) => {
-        if (runningFieldsSubmit.find(f => f === field)) {
-            return 'processing';
-        } else if (processedFieldsSubmit.find(f => f === field)) {
-            return 'success';
-        } else if (form.getFieldError(field).length) {
-            return 'error';
-        } else {
-            return 'idle';
-        }
-    };
-
-    const appsBaseUrl = window.location.origin + '/app/';
-
-    const typeSelectOptions = Object.values(ApplicationType).map(type => ({
-        label: t(`applications.type_${type}`),
-        value: type
-    }));
-
-    return (
-        <Form
-            aria-label="application_form"
-            form={form}
-            labelCol={{span: 6}}
-            wrapperCol={{span: 24}}
-            initialValues={formInitValues}
-            labelWrap
-            disabled={!isEditing && loading}
-        >
-            {availableLangs.map((lang, index) => (
-                <Form.Item
-                    key={`label_${lang}`}
-                    name={`label_${lang}`}
-                    rules={[{required: lang === defaultLang, message: t('errors.default_language_required')}]}
-                    style={{marginBottom: '0.5rem'}}
-                >
-                    <KitInput
-                        label={!index ? t('applications.label') : null}
-                        placeholder={t(`lang.${lang.toLowerCase()}`)}
-                        title={t(`lang.${lang.toLowerCase()}`)}
-                        aria-label={`label_${lang}`}
-                        onChange={_handleLabelChange(lang)}
-                        onBlur={_handleBlur(`label_${lang}`)}
-                        onKeyPress={_handleSubmitOnEnter(`label_${lang}`)}
-                        disabled={isReadOnly || !!runningFieldsSubmit.find(f => f === `label_${lang}`)}
-                        suffix={<SubmitStateNotifier state={_getFieldState(`label_${lang}`)} />}
-                        prefix={getFlagByLang(lang)}
-                    />
-                </Form.Item>
-            ))}
-            {availableLangs.map((lang, index) => (
-                <DescriptionFormItem
-                    key={`description_${lang}`}
-                    name={`description_${lang}`}
-                    style={{marginBottom: '0.5rem'}}
-                    extra={
-                        <SubmitStateNotifier
-                            style={{position: 'absolute', top: '0.5rem', right: '0.5rem'}}
-                            state={_getFieldState(`description_${lang}`)}
-                        />
-                    }
-                >
-                    <KitInput.TextArea
-                        label={!index ? t('applications.description') : null}
-                        placeholder={t(`lang.${lang.toLowerCase()}`)}
-                        title={t(`lang.${lang.toLowerCase()}`)}
-                        aria-label={`description_${lang}`}
-                        onBlur={_handleBlur(`description_${lang}`)}
-                        onKeyDown={_handleSubmitOnEnter(`description_${lang}`)}
-                        disabled={isReadOnly}
-                        prefix="🇫🇷"
-                    />
-                </DescriptionFormItem>
-            ))}
-            <Form.Item
-                name="id"
-                key="id"
-                validateTrigger={['onBlur', 'onChange', 'onSubmit']}
-                rules={[
-                    {required: true, message: _getRequiredMessage('id')},
-                    {pattern: idFormatRegex, message: t('errors.invalid_id_format')},
-                    {
-                        validateTrigger: ['onBlur', 'onSubmit'],
-                        validator: _handleAppUniquenessValidation('id'),
-                        message: t('errors.id_already_exists')
-                    }
-                ]}
-                hasFeedback
-            >
-                <KitInput
-                    label={t('applications.id')}
-                    disabled={isReadOnly || isEditing}
-                    onChange={_handleIdChange}
-                    aria-label="id"
-                />
-            </Form.Item>
-            <Form.Item name="type" key="type" rules={[{required: true, message: _getRequiredMessage('type')}]}>
-                <KitSelect
-                    label={t('applications.type')}
-                    onChange={_handleTypeChange}
-                    disabled={isReadOnly || isEditing}
-                    aria-label={t('applications.type')}
-                    options={typeSelectOptions}
-                />
-            </Form.Item>
-            {isInternalApp && (
-                <ModuleSelector
-                    name="module"
-                    disabled={isReadOnly || isEditing}
-                    rules={[{required: true, message: _getRequiredMessage('module')}]}
-                />
-            )}
-            <Form.Item
-                name="endpoint"
-                key="endpoint"
-                validateTrigger={['onBlur', 'onChange', 'onSubmit']}
-                rules={[
-                    {
-                        required: true,
-                        message: _getRequiredMessage(isInternalApp ? 'endpoint' : 'url')
-                    },
-                    {
-                        pattern: isInternalApp ? endpointFormatRegex : null,
-                        message: t('errors.invalid_endpoint_format')
-                    },
-                    {
-                        validateTrigger: ['onBlur', 'onSubmit'],
-                        validator: isInternalApp ? _handleAppUniquenessValidation('endpoint') : null,
-                        message: t('errors.endpoint_already_used')
-                    },
-                    {
-                        type: isInternalApp ? 'string' : 'url',
-                        message: t('errors.invalid_url_format')
-                    }
-                ]}
-                hasFeedback
-            >
-                <KitInput
-                    label={t(isInternalApp ? 'applications.endpoint' : 'applications.url')}
-                    prefix={isInternalApp ? appsBaseUrl : null}
-                    onBlur={_handleBlur('endpoint')}
-                    onKeyDown={_handleSubmitOnEnter('endpoint')}
-                    onChange={_handleEndpointChange}
-                    suffix={<SubmitStateNotifier state={_getFieldState('endpoint')} />}
-                    disabled={isReadOnly}
-                    aria-label="endpoint"
-                />
-            </Form.Item>
-            <Form.Item
-                name="color"
-                label={t('applications.color')}
-                validateTrigger={['onBlur', 'onChange', 'onSubmit']}
-                hasFeedback
-            >
-                <ColorPicker format="hex" onChangeComplete={_handleColorChange} disabled={isReadOnly} />
-            </Form.Item>
-        </Form>
-    );
-}
-
-export default EditApplicationInfoForm;

package/src/components/EditApplication/EditApplicationInfo/EditApplicationInfoForm/ModuleSelector/ModuleSelector.tsx

@@ -1,51 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Form, FormItemProps} from 'antd';
-import {KitSelect} from 'aristid-ds';
-import styled from 'styled-components';
-import {themeVars} from '../../../../../antdTheme';
-import {useSharedTranslation} from '../../../../../hooks/useSharedTranslation';
-import {useGetApplicationModulesQuery} from '../../../../../_gqlTypes';
-
-const OptionLabel = styled.div`
-    font-weight: bold;
-`;
-
-const OptionDescription = styled.div`
-    color: ${themeVars.secondaryTextColor};
-`;
-
-interface IModuleSelectorProps extends FormItemProps {
-    disabled: boolean;
-}
-
-function ModuleSelector({disabled, ...itemProps}: IModuleSelectorProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {loading, data} = useGetApplicationModulesQuery();
-    const form = Form.useFormInstance();
-    const selectedModule = Form.useWatch('module', form);
-
-    const modules = data?.applicationsModules ?? [];
-    const options = modules.map(module => ({
-        label: module.id,
-        value: module.id,
-        description: module.description
-    }));
-    const helper = modules.find(m => m.id === selectedModule)?.description;
-
-    return (
-        <Form.Item {...itemProps}>
-            <KitSelect
-                label={t('applications.module')}
-                loading={loading}
-                disabled={disabled}
-                aria-label={t('applications.module')}
-                options={options}
-                helper={helper}
-            />
-        </Form.Item>
-    );
-}
-
-export default ModuleSelector;

package/src/components/EditApplication/EditApplicationInfo/EditApplicationInfoForm/ModuleSelector/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import ModuleSelector from './ModuleSelector';
-export default ModuleSelector;

package/src/components/EditApplication/EditApplicationInfo/EditApplicationInfoForm/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import EditApplicationInfoForm from './EditApplicationInfoForm';
-export default EditApplicationInfoForm;

package/src/components/EditApplication/EditApplicationInfo/index.ts

@@ -1,4 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as EditApplicationInfo} from './EditApplicationInfo';

package/src/components/EditApplication/_types.ts

@@ -1,12 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {TabsProps} from 'antd';
-
-export interface IEditApplicationProps {
-    applicationId?: string;
-    onSetSubmitFunction?: (submitFunction: () => Promise<void>) => void;
-    activeTab?: 'info' | string;
-    tabContentStyle?: React.CSSProperties;
-    additionalTabs?: TabsProps['items'];
-}

package/src/components/EditApplication/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as EditApplication} from './EditApplication';
-export * from './_types';

package/src/components/EditAttributeModal/EditAttribute/EditAttribute.tsx

@@ -1,68 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Tabs, TabsProps} from 'antd';
-import styled from 'styled-components';
-import {AttributeDetailsFragment, useGetAttributeByIdQuery} from '../../../_gqlTypes';
-import {useSharedTranslation} from '../../../hooks/useSharedTranslation';
-import {ErrorDisplay} from '../../ErrorDisplay';
-import {Loading} from '../../Loading';
-import {EditAttributeInfo} from './EditAttributeInfo';
-
-interface IEditAttributeProps {
-    attributeId?: string;
-    onSetSubmitFunction?: (submitFunction: () => Promise<AttributeDetailsFragment>) => void;
-    readOnly?: boolean;
-}
-
-const TabContentWrapper = styled.div`
-    height: calc(95vh - 15rem);
-`;
-
-function EditAttribute({attributeId, onSetSubmitFunction, readOnly: isReadOnly}: IEditAttributeProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const isEditing = !!attributeId;
-
-    const {loading, error, data} = useGetAttributeByIdQuery({
-        fetchPolicy: 'cache-and-network',
-        variables: {
-            id: attributeId
-        },
-        skip: !attributeId
-    });
-
-    if (loading) {
-        return <Loading />;
-    }
-
-    if (error) {
-        return <ErrorDisplay message={error?.message} />;
-    }
-
-    const attributeData = data?.attributes?.list[0] ?? null;
-
-    const attributeInfoComp = (
-        <EditAttributeInfo attribute={attributeData} onSetSubmitFunction={onSetSubmitFunction} readOnly={isReadOnly} />
-    );
-
-    // If creating new library, return the form directly
-    if (!isEditing) {
-        return attributeInfoComp;
-    }
-
-    if (!attributeData) {
-        return <ErrorDisplay message={t('attributes.unknown_attribute')} />;
-    }
-
-    const tabs: TabsProps['items'] = [
-        {
-            key: 'info',
-            label: t('global.info'),
-            children: <TabContentWrapper>{attributeInfoComp}</TabContentWrapper>
-        }
-    ];
-
-    return <Tabs items={tabs} />;
-}
-
-export default EditAttribute;

package/src/components/EditAttributeModal/EditAttribute/EditAttributeInfo/EditAttributeInfo.tsx

@@ -1,188 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Form} from 'antd';
-import {useEffect} from 'react';
-import {
-    AttributeDetailsFragment,
-    AttributeType,
-    useCheckAttributeExistenceLazyQuery,
-    useSaveAttributeMutation
-} from '../../../../_gqlTypes';
-import {useLang} from '../../../../hooks';
-import {EditAttributeInfoForm} from './EditAttributeInfoForm';
-
-interface IEditAttributeInfoProps {
-    attribute?: AttributeDetailsFragment;
-    onSetSubmitFunction?: (submitFunction: () => Promise<AttributeDetailsFragment>) => void;
-    readOnly?: boolean;
-}
-
-function EditAttributeInfo({attribute, onSetSubmitFunction, readOnly}: IEditAttributeInfoProps): JSX.Element {
-    const {availableLangs} = useLang();
-    const [form] = Form.useForm();
-    const isEditing = !!attribute;
-
-    const [saveAttribute, {loading}] = useSaveAttributeMutation();
-
-    const [checkAttributeExistence] = useCheckAttributeExistenceLazyQuery({
-        fetchPolicy: 'no-cache',
-        nextFetchPolicy: 'no-cache',
-        partialRefetch: false
-    });
-
-    const _submitForm = async () => {
-        await form.validateFields();
-        const values = form.getFieldsValue();
-
-        const label = Object.keys(values)
-            .filter(key => key.startsWith('label_'))
-            .reduce((acc, key) => {
-                acc[key.replace('label_', '')] = values[key] ?? '';
-                return acc;
-            }, {});
-
-        const description = Object.keys(values)
-            .filter(key => key.startsWith('description_'))
-            .reduce((acc, key) => {
-                acc[key.replace('description_', '')] = values[key] ?? '';
-                return acc;
-            }, {});
-
-        const isStandardType = values.type === AttributeType.simple || values.type === AttributeType.advanced;
-        const isLinkType = values.type === AttributeType.simple_link || values.type === AttributeType.advanced_link;
-        const isTreeType = values.type === AttributeType.tree;
-        const isTypeNotSimple = values.type !== AttributeType.simple && values.type !== AttributeType.simple_link;
-
-        try {
-            const res = await saveAttribute({
-                variables: {
-                    attribute: {
-                        id: values.id,
-                        label,
-                        description,
-                        type: values.type,
-                        format: isStandardType ? values.format : null,
-                        readonly: values.readonly,
-                        unique: values.type === AttributeType.simple ? values.unique : false,
-                        multiple_values: isTypeNotSimple ? values.multiple_values : false,
-                        versions_conf: isTypeNotSimple
-                            ? {
-                                  versionable: values?.versions_conf?.versionable ?? false,
-                                  mode: values?.versions_conf?.mode ?? null,
-                                  profile: values?.versions_conf?.profile ?? null
-                              }
-                            : null,
-                        linked_library: isLinkType ? values.linked_library.id : null,
-                        linked_tree: isTreeType ? values.linked_tree.id : null
-                    }
-                }
-            });
-
-            return res.data.saveAttribute;
-        } catch (e) {
-            // Display errors in form
-            form.setFields(
-                Object.keys(e.graphQLErrors?.[0]?.extensions?.fields ?? {}).map(fieldName => {
-                    return {
-                        name: fieldName,
-                        errors: [e.graphQLErrors[0].extensions.fields[fieldName]]
-                    };
-                })
-            );
-
-            throw e;
-        }
-    };
-
-    const _submitField = async (field: string, value: any) => {
-        // Consider boolean fields as always touched
-        if (!isEditing || (!form.isFieldTouched(field) && typeof value !== 'boolean')) {
-            return;
-        }
-
-        await form.validateFields([field]);
-
-        let dataToSave;
-        if (field.startsWith('label_')) {
-            const modifiedLang = field.replace('label_', '');
-            dataToSave = {
-                label: availableLangs.reduce((acc, lang) => {
-                    acc[lang] = lang === modifiedLang ? value : form.getFieldValue(`label_${lang}`);
-                    return acc;
-                }, {})
-            };
-        } else if (field.startsWith('description_')) {
-            const modifiedLang = field.replace('description_', '');
-            dataToSave = {
-                description: availableLangs.reduce((acc, lang) => {
-                    acc[lang] = lang === modifiedLang ? value : form.getFieldValue(`description_${lang}`);
-                    return acc;
-                }, {})
-            };
-        } else if (field.startsWith('versions_conf')) {
-            dataToSave = {
-                versions_conf: form.getFieldValue('versions_conf')
-            };
-        } else {
-            dataToSave = {
-                [field]: value
-            };
-        }
-
-        try {
-            await saveAttribute({
-                variables: {
-                    attribute: {
-                        id: attribute.id,
-                        ...dataToSave
-                    }
-                }
-            });
-
-            form.setFields([
-                {
-                    name: field,
-                    touched: false
-                }
-            ]);
-        } catch (err) {
-            // Display errors in form
-            form.setFields([
-                {
-                    name: field,
-                    errors: [err.graphQLErrors?.[0]?.extensions?.fields?.[field] ?? err.message]
-                }
-            ]);
-        }
-    };
-
-    const _isAttributeUnique = async (value: any) => {
-        const {data: attributeExistenceData} = await checkAttributeExistence({
-            variables: {
-                id: value
-            }
-        });
-
-        return !attributeExistenceData?.attributes?.totalCount;
-    };
-
-    useEffect(() => {
-        if (onSetSubmitFunction) {
-            onSetSubmitFunction(_submitForm);
-        }
-    }, []);
-
-    return (
-        <EditAttributeInfoForm
-            form={form}
-            onCheckAttributeUniqueness={_isAttributeUnique}
-            onSubmitField={_submitField}
-            attribute={attribute}
-            loading={loading}
-            readOnly={readOnly}
-        />
-    );
-}
-
-export default EditAttributeInfo;