@sap-ux/control-property-editor 0.2.0

package/src/panels/properties/InputTypeWrapper.tsx

@@ -0,0 +1,259 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import type { TFunction } from 'i18next';
+import { Label, Stack } from '@fluentui/react';
+
+import {
+    UIFocusZone,
+    UITooltip,
+    UITooltipUtils,
+    UIDirectionalHint,
+    getCalloutStyle,
+    UIDialog
+} from '@sap-ux/ui-components';
+
+import type { ControlProperty, PropertyChangeDeletionDetails } from '@sap-ux-private/control-property-editor-common';
+import {
+    CHECKBOX_EDITOR_TYPE,
+    deletePropertyChanges,
+    DROPDOWN_EDITOR_TYPE,
+    INPUT_EDITOR_TYPE,
+    INTEGER_VALUE_TYPE,
+    STRING_VALUE_TYPE
+} from '@sap-ux-private/control-property-editor-common';
+
+import { IconName } from '../../icons';
+import { ChangeIndicator } from '../../components/ChangeIndicator';
+
+import type { CacheValue } from './propertyValuesCache';
+import type { InputTypeToggleOptionProps, InputTypeWrapperProps } from './types';
+import { InputType, isExpression } from './types';
+import { PropertyDocumentation } from './PropertyDocumentation';
+import { defaultFontSize } from './constants';
+import { InputTypeSelector } from './InputTypeSelector';
+import { useTranslation } from 'react-i18next';
+
+export const getDefaultInputType = (editor: string, type: string, value: CacheValue): InputType => {
+    let defaultInputType: InputType = InputType.expression;
+    switch (editor) {
+        case DROPDOWN_EDITOR_TYPE:
+            defaultInputType = InputType.enumMember;
+            break;
+        case INPUT_EDITOR_TYPE:
+            defaultInputType = type === STRING_VALUE_TYPE ? InputType.string : InputType.number;
+            break;
+        case CHECKBOX_EDITOR_TYPE:
+            if (typeof value === 'boolean') {
+                defaultInputType = value ? InputType.booleanTrue : InputType.booleanFalse;
+            }
+            break;
+        default:
+    }
+    return defaultInputType;
+};
+
+/**
+ * Gets translated tooltip, if translation function exists.
+ *
+ * @param value string
+ * @param t TFunction
+ * @returns string
+ */
+function getToolTip(value: string, t?: TFunction): string {
+    if (t) {
+        return t(value);
+    } else {
+        return value;
+    }
+}
+
+export const getInputTypeToggleOptions = (property: ControlProperty, t?: TFunction): InputTypeToggleOptionProps[] => {
+    const { value, editor, type } = property;
+    const inputTypeToggleOptions: InputTypeToggleOptionProps[] = [];
+    switch (editor) {
+        case CHECKBOX_EDITOR_TYPE:
+            inputTypeToggleOptions.push({
+                inputType: InputType.booleanTrue,
+                tooltip: getToolTip('BOOLEAN_TYPE_TRUE', t),
+                iconName: IconName.boolTrue,
+                selected: typeof value === 'boolean' && value === true
+            });
+            inputTypeToggleOptions.push({
+                inputType: InputType.booleanFalse,
+                tooltip: getToolTip('BOOLEAN_TYPE_FALSE', t),
+                iconName: IconName.boolFalse,
+                selected: typeof value === 'boolean' && value === false
+            });
+            break;
+        case DROPDOWN_EDITOR_TYPE:
+            inputTypeToggleOptions.push({
+                inputType: InputType.enumMember,
+                tooltip: getToolTip('ENUM_TYPE', t),
+                iconName: IconName.dropdown,
+                selected: !!property.options.find((option) => option.key === value)
+            });
+            break;
+        case INPUT_EDITOR_TYPE:
+            if (type === STRING_VALUE_TYPE) {
+                inputTypeToggleOptions.push({
+                    inputType: InputType.string,
+                    tooltip: getToolTip('STRING_TYPE', t),
+                    iconName: IconName.string,
+                    selected: typeof value !== 'string' || !isExpression(value)
+                });
+            } else {
+                const textKey = type === INTEGER_VALUE_TYPE ? 'INTEGER_TYPE' : 'FLOAT_TYPE';
+                inputTypeToggleOptions.push({
+                    inputType: InputType.number,
+                    tooltip: getToolTip(textKey, t),
+                    iconName: IconName.number,
+                    selected: typeof value !== 'string' || !isExpression(value)
+                });
+            }
+            break;
+        default:
+    }
+
+    inputTypeToggleOptions.push({
+        inputType: InputType.expression,
+        tooltip: getToolTip('EXPRESSION_TYPE', t),
+        iconName: IconName.expression,
+        selected: typeof value === 'string' && isExpression(value)
+    });
+
+    return inputTypeToggleOptions;
+};
+
+/**
+ * React element for input type wrapper.
+ *
+ * @param props InputTypeWrapperProps
+ * @returns ReactElement
+ */
+export function InputTypeWrapper(props: InputTypeWrapperProps): ReactElement {
+    const { property, changes } = props;
+    const { name, isEnabled, documentation } = property;
+
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const [dialogState, setDialogState] = useState<PropertyChangeDeletionDetails | undefined>(undefined);
+    const documentationContent = documentation && (
+        <PropertyDocumentation
+            title={property.readableName}
+            defaultValue={documentation?.defaultValue}
+            description={documentation?.description}
+            propertyName={documentation?.propertyName}
+            propertyType={documentation?.propertyType}
+            onDelete={showDeleteConfirmation}
+        />
+    );
+
+    /**
+     *
+     * @param controlId string
+     * @param propertyName string
+     */
+    function showDeleteConfirmation(controlId: string, propertyName: string): void {
+        setDialogState({
+            controlId,
+            propertyName
+        });
+    }
+
+    function onConfirmDelete(): void {
+        if (dialogState) {
+            dispatch(deletePropertyChanges(dialogState));
+            setDialogState(undefined);
+        }
+    }
+
+    function onCancelDelete(): void {
+        setDialogState(undefined);
+    }
+
+    const indicator = changes ? (
+        <Stack.Item>
+            <ChangeIndicator id={`${name}--ChangeIndicator`} {...changes} />
+        </Stack.Item>
+    ) : (
+        <></>
+    );
+    return (
+        <UIFocusZone
+            isCircularNavigation={true}
+            data-testid={`${name}--InputTypeWrapper`}
+            style={{
+                marginBottom: 10,
+                marginTop: 10
+            }}>
+            <Stack horizontal horizontalAlign="space-between">
+                <UITooltip
+                    calloutProps={{
+                        gapSpace: 5,
+                        styles: getCalloutStyle({
+                            styles: {
+                                root: {
+                                    padding: 'none'
+                                },
+                                calloutMain: {
+                                    padding: 'none'
+                                }
+                            }
+                        })
+                    }}
+                    delay={2}
+                    maxWidth={400}
+                    directionalHint={UIDirectionalHint.leftCenter}
+                    id={`${name}--PropertyTooltip`}
+                    tooltipProps={UITooltipUtils.renderContent(documentationContent ?? '')}>
+                    <Stack
+                        horizontal
+                        horizontalAlign="space-between"
+                        tokens={{
+                            childrenGap: '5px'
+                        }}>
+                        {indicator}
+                        <Stack.Item>
+                            <Label
+                                data-aria-label={name}
+                                data-testid={`${name}--Label`}
+                                disabled={!isEnabled}
+                                style={{
+                                    color: 'var(--vscode-foreground)',
+                                    opacity: isEnabled ? 1 : 0.4,
+                                    fontSize: defaultFontSize,
+                                    fontWeight: 'bold',
+                                    padding: 0,
+                                    width: '190px',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    overflowX: 'hidden',
+                                    marginTop: 2
+                                }}>
+                                {property.readableName}
+                            </Label>
+                        </Stack.Item>
+                    </Stack>
+                </UITooltip>
+                <Stack horizontal horizontalAlign="end">
+                    <InputTypeSelector {...props} />
+                </Stack>
+            </Stack>
+            {props.children}
+            {dialogState && (
+                <UIDialog
+                    hidden={dialogState === undefined}
+                    onAccept={onConfirmDelete}
+                    acceptButtonText={t('CONFIRM_DELETE')}
+                    cancelButtonText={t('CANCEL_DELETE')}
+                    onCancel={onCancelDelete}
+                    dialogContentProps={{
+                        title: t('CONFIRM_DELETE_TITLE'),
+                        subText: t('CONFIRM_DELETE_SUBTEXT')
+                    }}></UIDialog>
+            )}
+        </UIFocusZone>
+    );
+}

package/src/panels/properties/NoControlSelected.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Text } from '@fluentui/react';
+import { useTranslation } from 'react-i18next';
+
+const NoControlSelected = () => {
+    const { t } = useTranslation();
+    return (
+        <>
+            <Text className="properties-no-control-selected-text">{t('NO_CONTROL_SELECTED')}</Text>
+            <Text className="properties-modify-text">{t('PROPERTIES_MODIFY_TEXT')}</Text>
+            <div className="properties-control-select-icon">
+                {
+                    <svg
+                        data-testid="Control-Property-Editor-No-Control-Selected"
+                        width="80"
+                        height="37"
+                        viewBox="0 0 80 37"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M0 2.75V0H3.16666V2H2V2.75H0ZM15.8333 0H9.5V2H15.8333V0ZM22.1667 0V2H28.5V0H22.1667ZM34.8333 0V2H41.1667V0H34.8333ZM47.5 0V2H53.8333V0H47.5ZM60.1667 0V2H66.5V0H60.1667ZM72.8333 0V2H74V2.75H76V0H72.8333ZM76 8.25H74V13.75H76V8.25ZM76 19.25H74V24.75H76V19.25ZM76 30.25H74V31H72.8333V33H76V30.25ZM66.5 33V31H60.1667V33H66.5ZM53.8333 33V31H47.5V33H53.8333ZM41.1667 33V31H34.8333V33H41.1667ZM28.5 33V31H22.1667V33H28.5ZM15.8333 33V31H9.5V33H15.8333ZM3.16667 33V31H2V30.25H0V33H3.16667ZM0 24.75H2V19.25H0V24.75ZM0 13.75H2V8.25H0V13.75Z"
+                            fill="var(--vscode-focusBorder)"
+                        />
+                        <path d="M66 12H69V20H66V12Z" fill="var(--vscode-icon-foreground)" />
+                        <path d="M72 23H80V26H72V23Z" fill="var(--vscode-icon-foreground)" />
+                        <path d="M63 23H55V26H63V23Z" fill="var(--vscode-icon-foreground)" />
+                        <path d="M66 29H69V37H66V29Z" fill="var(--vscode-icon-foreground)" />
+                        <path d="M69 23H66V26H69V23Z" fill="var(--vscode-icon-foreground)" />
+                    </svg>
+                }
+            </div>
+        </>
+    );
+};
+
+export { NoControlSelected };

package/src/panels/properties/Properties.scss

@@ -0,0 +1,102 @@
+@import './../../variables.scss';
+
+.property-content {
+    padding: 20px 15px;
+}
+
+.space {
+    margin-bottom: 10px;
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.space-toggle {
+    label {
+        font-size: $defaultFontSize;
+        font-weight: bold;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    margin-bottom: 12px;
+}
+.space-toggle-disabled {
+    label {
+        opacity: 0.55;
+    }
+}
+
+.dropdownEditor {
+    label {
+        font-weight: bold;
+        padding-bottom: 2px;
+        height: auto;
+    }
+    color: var(--vscode-foreground);
+    font-size: $defaultFontSize;
+    margin-bottom: 12px;
+}
+
+.stringEditor {
+    font-weight: bold;
+    font-size: $defaultFontSize;
+    div {
+        label {
+            font-weight: bold !important;
+            margin-bottom: 0px !important;
+        }
+    }
+    margin-bottom: 12px;
+}
+
+.stringEditorDisabled {
+    div {
+        div {
+            opacity: 0.4;
+        }
+    }
+}
+
+.properties-no-control-selected-text {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 29px;
+    text-align: center;
+    padding-top: 30px;
+    color: var(--vscode-foreground);
+}
+
+.properties-modify-text {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 18px;
+    text-align: center;
+    margin: 10%;
+    color: var(--vscode-foreground);
+}
+
+.properties-control-select-icon {
+    text-align: center;
+}
+.filter-properties {
+    display: flex;
+    margin: 0px 15px 10px 15px;
+    flex-direction: row;
+    align-items: center;
+}
+
+.funnel-properties-icon {
+    margin-left: 16px;
+    i {
+        line-height: 20px;
+    }
+}
+
+label[for='editable-properties-checkbox'] {
+    .ms-Checkbox-text {
+        font-size: 13px !important;
+    }
+}

package/src/panels/properties/PropertiesList.tsx

@@ -0,0 +1,162 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Control } from '@sap-ux-private/control-property-editor-common';
+import {
+    CHECKBOX_EDITOR_TYPE,
+    DROPDOWN_EDITOR_TYPE,
+    INPUT_EDITOR_TYPE
+} from '@sap-ux-private/control-property-editor-common';
+import { Separator } from '../../components/Separator';
+import type { RootState } from '../../store';
+import { DropdownEditor } from './DropdownEditor';
+import { HeaderField } from './HeaderField';
+import { getDefaultInputType, getInputTypeToggleOptions, InputTypeWrapper } from './InputTypeWrapper';
+import { setCachedValue } from './propertyValuesCache';
+import { StringEditor } from './StringEditor';
+import type { InputTypeWrapperProps } from './types';
+import { isExpression } from './types';
+import { sectionHeaderFontSize } from './constants';
+import { useSelector } from 'react-redux';
+import { UISearchBox } from '@sap-ux/ui-components';
+import { NoControlSelected } from './NoControlSelected';
+import { Label } from '@fluentui/react';
+import './Properties.scss';
+import { Funnel } from './Funnel';
+import type { ControlChangeStats, FilterOptions } from '../../slice';
+import { FilterName } from '../../slice';
+
+/**
+ * React element for all properties including id & type and property editors.
+ *
+ * @returns ReactElement
+ */
+export function PropertiesList(): ReactElement {
+    const { t } = useTranslation();
+    const control = useSelector<RootState, Control | undefined>((state) => state.selectedControl);
+    const controlChanges = useSelector<RootState, ControlChangeStats | undefined>(
+        (state) => state.changes.controls[control?.id ?? '']
+    );
+    const isEditableOnly = useSelector<RootState, FilterOptions[]>((state) => state.filterQuery).filter(
+        (item) => item.name === FilterName.showEditableProperties
+    )[0].value as boolean;
+    const [filterValue, setFilterValue] = useState('');
+    const doc = {
+        defaultValue: '-',
+        description: 'The unique identifier within a page, either configured or automatically generated.',
+        propertyName: 'id',
+        type: 'sap.ui.core.ID',
+        propertyType: 'ID'
+    };
+    if (!control) {
+        // Nothing selected, show message
+        return <NoControlSelected />;
+    }
+    const { id, type, properties, name } = control;
+    const onFilterChange = (
+        event?: React.ChangeEvent<HTMLInputElement> | undefined,
+        filterValue?: string | undefined
+    ): void => {
+        setFilterValue(filterValue?.toLowerCase() ?? '');
+    };
+    const editors = (
+        <>
+            {properties
+                .filter(
+                    (property) =>
+                        !filterValue ||
+                        property.name.toLowerCase().includes(filterValue) ||
+                        property.readableName.toLowerCase().includes(filterValue)
+                )
+                .filter((property) => (isEditableOnly && property.isEnabled) || !isEditableOnly)
+                .map((property) => {
+                    const props: InputTypeWrapperProps = {
+                        controlId: id,
+                        controlName: name,
+                        property,
+                        toggleOptions: getInputTypeToggleOptions(property, t),
+                        changes: controlChanges?.properties[property.name]
+                    };
+                    const defaultInputType = getDefaultInputType(property.editor, property.type, property.value);
+                    setCachedValue(id, property.name, defaultInputType, property.value);
+                    let result: ReactElement | undefined;
+                    switch (property.editor) {
+                        case CHECKBOX_EDITOR_TYPE:
+                            if (typeof property.value !== 'boolean') {
+                                result = <StringEditor {...props} />;
+                            }
+                            break;
+                        case DROPDOWN_EDITOR_TYPE:
+                            if (isExpression(property.value)) {
+                                result = <StringEditor {...props} />;
+                            } else {
+                                result = (
+                                    <DropdownEditor
+                                        {...{
+                                            key: property.name,
+                                            controlId: id,
+                                            property,
+                                            controlName: name
+                                        }}
+                                    />
+                                );
+                            }
+                            break;
+                        case INPUT_EDITOR_TYPE:
+                            result = <StringEditor {...props} />;
+                            break;
+                        default: {
+                            console.warn(
+                                `No property editor for '${JSON.stringify(property)}' found. Fallback to string editor`
+                            );
+                            result = <StringEditor {...props} />;
+                            break;
+                        }
+                    }
+                    return (
+                        <InputTypeWrapper key={property.name} {...props}>
+                            {result}
+                        </InputTypeWrapper>
+                    );
+                })}
+        </>
+    );
+    return (
+        <>
+            <div className="property-content">
+                <HeaderField label={t('CONTROL_ID_LABEL')} value={id} documentation={doc} hidden={false} />
+                <HeaderField label={t('CONTROL_TYPE_LABEL')} value={type} />
+            </div>
+            <Separator
+                style={{
+                    marginTop: '0px',
+                    marginBottom: '20px'
+                }}
+            />
+            <div className="filter-properties">
+                <UISearchBox
+                    id="SearchProperties"
+                    autoFocus={false}
+                    disableAnimation={false}
+                    placeholder={t('SEARCH_PROPERTIES')}
+                    onChange={onFilterChange}
+                />
+                <Funnel />
+            </div>
+            <div className={`property-content app-panel-scroller`}>
+                <Label
+                    data-aria-label={t('PROPERTIES')}
+                    style={{
+                        color: 'var(--vscode-foreground)',
+                        fontSize: sectionHeaderFontSize,
+                        fontWeight: 'bold',
+                        padding: 0,
+                        marginBottom: '10px'
+                    }}>
+                    {t('PROPERTIES')}
+                </Label>
+                {editors}
+            </div>
+        </>
+    );
+}

package/src/panels/properties/PropertiesPanel.tsx

@@ -0,0 +1,30 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { PropertiesList } from './PropertiesList';
+import { Separator, ThemeSelectorCallout, Toolbar } from '../../components';
+import { ViewChanger } from './ViewChanger';
+import { DeviceSelector } from './DeviceSelector';
+
+/**
+ * Main function to render the properties panel.
+ *
+ * @returns Properties panel as ReactElement
+ */
+export function PropertiesPanel(): ReactElement {
+    return (
+        <>
+            <Toolbar
+                left={
+                    <>
+                        <ThemeSelectorCallout />
+                        <Separator direction="vertical" style={{ marginLeft: '10px', marginRight: '10px' }} />
+                        <ViewChanger />
+                    </>
+                }
+                right={<DeviceSelector />}
+            />
+            <PropertiesList />
+        </>
+    );
+}

package/src/panels/properties/PropertyDocumentation.module.scss

@@ -0,0 +1,81 @@
+.container {
+    padding: 10px;
+}
+
+.header {
+    height: 46px;
+    padding: 13px 10px 13px 10px;
+    border-bottom: 1px solid var(--vscode-contrastBorder, var(--vscode-editorIndentGuide-background));
+}
+
+.savedChanges {
+    color: var(--vscode-terminal-ansiGreen);
+    font-size: 11px;
+    line-height: 15px;
+}
+
+.unsavedChanges {
+    color: var(--vscode-foreground);
+    font-size: 11px;
+    line-height: 15px;
+}
+
+.title {
+    color: var(--vscode-foreground);
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 16px;
+}
+
+.savedChangeRow {
+    width: 100%;
+}
+
+.bold,
+.propertyName {
+    color: var(--vscode-foreground);
+    font-weight: bold;
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.propertyName {
+    grid-column-start: 1;
+}
+
+.value {
+    color: var(--vscode-foreground);
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.infoIcon {
+    padding: 3px;
+}
+
+.description {
+    color: var(--vscode-foreground);
+    font-size: 11px;
+    line-height: 15px;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 125px 1fr 22px;
+    grid-template-rows: repeat(auto-fill, 22px);
+    min-height: 82px;
+    row-gap: 8px;
+    column-gap: 10px;
+    justify-items: start;
+}
+.grid span {
+    display: inline-flex;
+    align-items: center;
+    overflow: hidden;
+    max-width: 100%;
+}
+
+.propertyWithNoActions {
+    grid-column-start: 2;
+    grid-column-end: span 2;
+}