@sap-ux/control-property-editor 0.2.0

package/src/panels/properties/DropdownEditor.tsx

@@ -0,0 +1,80 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import type { UIComboBoxOption, UIComboBoxRef } from '@sap-ux/ui-components';
+import { UIComboBox } from '@sap-ux/ui-components';
+
+import type { PropertyChange, StringControlPropertyWithOptions } from '@sap-ux-private/control-property-editor-common';
+import { changeProperty } from '../../slice';
+
+import { setCachedValue } from './propertyValuesCache';
+import type { PropertyInputProps } from './types';
+import { InputType } from './types';
+
+import './Properties.scss';
+import { debounce, reportTelemetry } from '@sap-ux-private/control-property-editor-common';
+
+// exported to make it testable without events
+export const valueChanged = (
+    controlId: string,
+    name: string,
+    newValue: string | number,
+    controlName: string
+): { payload: PropertyChange<string | number | boolean>; type: string } => {
+    setCachedValue(controlId, name, InputType.enumMember, newValue);
+    return changeProperty({ controlId, propertyName: name, value: newValue, controlName });
+};
+
+/**
+ * React element for dropdown editor.
+ *
+ * @param propertyInputProps PropertyInputProps<StringControlPropertyWithOptions>
+ * @returns ReactElement
+ */
+export function DropdownEditor(propertyInputProps: PropertyInputProps<StringControlPropertyWithOptions>): ReactElement {
+    const {
+        property: { name, value, options, isEnabled, errorMessage },
+        controlId,
+        controlName
+    } = propertyInputProps;
+    const dispatch = useDispatch();
+    const selectedOption = options.find((enumValue) => enumValue.key === value);
+    const text = !selectedOption && value ? value : undefined;
+
+    return (
+        <UIComboBox
+            className="dropdownEditor"
+            key={name}
+            data-testid={`${name}--DropdownEditor`}
+            selectedKey={value}
+            disabled={!isEnabled}
+            autoComplete="on"
+            allowFreeform={true}
+            text={text}
+            errorMessage={errorMessage}
+            options={options}
+            useComboBoxAsMenuWidth={true}
+            onChange={(
+                event: React.FormEvent<UIComboBoxRef>,
+                option?: UIComboBoxOption,
+                index?: number,
+                value?: string
+            ): void => {
+                const newValue = option?.key ?? value ?? '';
+                reportTelemetry({ category: 'Property Change', propertyName: name }).catch((error) => {
+                    console.error(`Error in reporting telemetry`, error);
+                });
+                dispatch(valueChanged(controlId, name, newValue, controlName));
+            }}
+            onPendingValueChanged={debounce((option?: UIComboBoxOption, index?: number, value?: string): void => {
+                if (value) {
+                    reportTelemetry({ category: 'Property Change', propertyName: name }).catch((error) => {
+                        console.error(`Error in reporting telemetry`, error);
+                    });
+                    dispatch(valueChanged(controlId, name, value, controlName));
+                }
+            }, 500)}
+        />
+    );
+}

package/src/panels/properties/Funnel.tsx

@@ -0,0 +1,64 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UICheckbox, UIIconButton, UICallout, UICalloutContentPadding } from '@sap-ux/ui-components';
+import { useDispatch, useSelector } from 'react-redux';
+import { IconName } from '../../icons';
+import type { FilterOptions } from '../../slice';
+import { FilterName, filterNodes } from '../../slice';
+import type { RootState } from '../../store';
+import './Properties.scss';
+
+const TARGET = 'control-property-editor-property-search-funnel-callout-target-id';
+
+const Funnel = (): ReactElement => {
+    const { t } = useTranslation();
+    const filterQuery = useSelector<RootState, FilterOptions[]>((state) => state.filterQuery);
+    const dispatch = useDispatch();
+    const [isVisible, setIsVisible] = useState(false);
+    const showCallout = () => {
+        setIsVisible(true);
+    };
+    const onChange = (name: FilterName, isChecked = false) => {
+        const action = filterNodes([{ name, value: isChecked }]);
+        dispatch(action);
+    };
+    const showEditablePropertiesChecked = filterQuery.filter(
+        (item) => item.name === FilterName.showEditableProperties
+    )[0].value as boolean;
+    const checked = showEditablePropertiesChecked;
+    return (
+        <>
+            <UIIconButton
+                id={TARGET}
+                className={`funnel-properties-icon`}
+                iconProps={{ iconName: IconName.funnel }}
+                checked={checked}
+                onClick={showCallout}></UIIconButton>
+            {isVisible && (
+                <UICallout
+                    styles={{ calloutMain: { minWidth: 196, minHeight: 35 } }}
+                    target={`#${TARGET}`}
+                    isBeakVisible={true}
+                    gapSpace={5}
+                    beakWidth={5}
+                    directionalHint={4}
+                    onDismiss={() => setIsVisible(false)}
+                    contentPadding={UICalloutContentPadding.Standard}>
+                    <UICheckbox
+                        id={'editable-properties-checkbox'}
+                        styles={{
+                            checkbox: { width: 20, height: 20 }
+                        }}
+                        label={t('SHOW_EDITABLE_PROPERTIES')}
+                        checked={showEditablePropertiesChecked}
+                        onChange={(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
+                            onChange(FilterName.showEditableProperties, isChecked);
+                        }}></UICheckbox>
+                </UICallout>
+            )}
+        </>
+    );
+};
+
+export { Funnel };

package/src/panels/properties/HeaderField.tsx

@@ -0,0 +1,150 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useState } from 'react';
+
+import { TextField, Label, Stack } from '@fluentui/react';
+import { UIIconButton, UiIcons, UITooltip, UITooltipUtils, UIDirectionalHint } from '@sap-ux/ui-components';
+
+import './Properties.scss';
+import { defaultFontSize, sectionHeaderFontSize } from './constants';
+import { PropertyDocumentation } from './PropertyDocumentation';
+import type { PropertiesInfo } from '@sap-ux-private/control-property-editor-common';
+import { Clipboard } from './Clipboard';
+
+export interface HeaderFieldProps {
+    label: string;
+    /**
+     * There will be an icon on the screen that allows to copy this value to clipboard
+     */
+    value: string;
+
+    documentation?: PropertiesInfo;
+
+    hidden?: boolean;
+}
+
+/**
+ * React element for HeaderField.
+ *
+ * @param headerFieldProps HeaderFieldProps
+ * @returns ReactElement
+ */
+export function HeaderField(headerFieldProps: HeaderFieldProps): ReactElement {
+    const { label, value, documentation, hidden = true } = headerFieldProps;
+    const [isCopyMessageBoxVisible, setMessageBoxVisibility] = useState(false);
+    const documentationContent = documentation && (
+        <PropertyDocumentation
+            defaultValue={documentation.defaultValue}
+            description={documentation.description}
+            propertyName={documentation.propertyName}
+            propertyType={documentation.propertyType}
+        />
+    );
+    const onCopy = useCallback(
+        () => (
+            <CopyButton
+                label={label}
+                onClick={(): void => {
+                    copyToClipboard(value).catch((reason) => console.error(reason));
+                    setMessageBoxVisibility(!isCopyMessageBoxVisible);
+                    setTimeout(() => setMessageBoxVisibility(false), 3000);
+                }}
+            />
+        ),
+        []
+    );
+    return (
+        <>
+            <Stack horizontal={false} verticalAlign={'space-between'} style={{ marginBottom: 4 }}>
+                <UITooltip
+                    hidden={hidden}
+                    calloutProps={{ gapSpace: 5 }}
+                    delay={2}
+                    directionalHint={UIDirectionalHint.leftCenter}
+                    tooltipProps={UITooltipUtils.renderContent(documentationContent ?? '')}>
+                    <Label
+                        htmlFor={label}
+                        data-aria-label={label}
+                        data-testid={`${label}--Label`}
+                        style={{
+                            color: 'var(--vscode-foreground)',
+                            fontSize: sectionHeaderFontSize,
+                            fontWeight: 'bold',
+                            padding: 0,
+                            width: '190px',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            overflowX: 'hidden',
+                            marginTop: 2,
+                            marginBottom: 4
+                        }}>
+                        {label}
+                    </Label>
+                </UITooltip>
+                <TextField
+                    id={label}
+                    value={value}
+                    readOnly={true}
+                    borderless
+                    styles={{
+                        field: {
+                            color: 'var(--vscode-input-foreground)',
+                            fontSize: defaultFontSize,
+                            backgroundColor: 'var(--vscode-sideBar-background)'
+                        },
+                        fieldGroup: {
+                            color: 'var(--vscode-input-foreground)',
+                            backgroundColor: 'var(--vscode-sideBar-background)',
+                            alignItems: 'center'
+                        },
+                        suffix: {
+                            color: 'var(--vscode-input-foreground)',
+                            backgroundColor: 'var(--vscode-sideBar-background)'
+                        },
+                        subComponentStyles: {
+                            label: {
+                                root: {
+                                    fontSize: sectionHeaderFontSize,
+                                    fontWeight: 'bold !important',
+                                    color: 'var(--vscode-foreground)'
+                                }
+                            }
+                        }
+                    }}
+                    onRenderSuffix={onCopy}
+                />
+                {isCopyMessageBoxVisible && <Clipboard label={label} />}
+            </Stack>
+        </>
+    );
+}
+
+/**
+ * Copy given string to clipboard, show toast success message.
+ *
+ * @param text {string to copy to clipboard}
+ */
+async function copyToClipboard(text: string): Promise<void> {
+    await navigator.clipboard.writeText(text);
+}
+interface CopyButtonProps {
+    label: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | HTMLSpanElement>;
+}
+
+/**
+ * Copy button component.
+ *
+ * @param props {CopyButtonProps}
+ * @returns ReactElement
+ */
+function CopyButton(props: CopyButtonProps): ReactElement {
+    const { label, onClick } = props;
+
+    return (
+        <UIIconButton
+            id={`${label.replace(/\s/g, '')}--copy`}
+            iconProps={{ iconName: UiIcons.Copy }}
+            onClick={onClick}
+        />
+    );
+}

package/src/panels/properties/IconValueHelp.tsx

@@ -0,0 +1,203 @@
+import type { UIColumn } from '@sap-ux/ui-components';
+import { UIDialog, UIIconButton, UiIcons, UISearchBox, UITable, SelectionMode } from '@sap-ux/ui-components';
+import type { CSSProperties, ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import './SapUiIcon.scss';
+import { changeProperty } from '../../slice';
+import { setCachedValue } from './propertyValuesCache';
+import { InputType } from './types';
+import { useDispatch } from 'react-redux';
+
+export interface IconValueHelpProps {
+    isIcon: boolean | undefined;
+    icons:
+        | {
+              name: string;
+              content: string;
+              fontFamily: string;
+          }[]
+        | [];
+    value: string;
+    controlId: string;
+    propertyName: string;
+    disabled: boolean;
+}
+
+/**
+ * React element for showing ui5 icon values.
+ *
+ * @param iconValueHelpProps IconValueHelpProps
+ * @returns ReactElement
+ */
+export function IconValueHelp(iconValueHelpProps: IconValueHelpProps): ReactElement {
+    const { icons, value, propertyName, controlId, disabled } = iconValueHelpProps;
+    const dispatch = useDispatch();
+    const [newValue, setNewValue] = useState(value || '');
+    const { t } = useTranslation();
+    const [items, setItems] = useState(icons);
+    const [isDialogVisible, setDialogVisibility] = useState(false);
+
+    const onValueHelpButtonClick = (): void => {
+        setDialogVisibility(true);
+    };
+
+    const onSelectionChange = (rows: number[]): void => {
+        if (items && rows.length > 0) {
+            setNewValue('sap-icon://' + items[rows[0]].name);
+        }
+    };
+
+    const onFilterChange = (
+        event?: React.ChangeEvent<HTMLInputElement> | undefined,
+        filterValue?: string | undefined
+    ): void => {
+        if (filterValue && icons) {
+            setItems(
+                icons.filter((icon) => {
+                    return icon.name.toLowerCase().includes(filterValue.toLowerCase());
+                })
+            );
+        } else {
+            setItems(icons);
+        }
+    };
+    const onIconColumnRender = (item: IconColumnProps) => (
+        <IconColumn content={item.content} fontFamily={item.fontFamily} />
+    );
+    const onLabelColumnRender = (item: LabelColumnProps) => (
+        <LabelColumn fontFamily={item.fontFamily} name={item.name} />
+    );
+
+    const col1: UIColumn = {
+        key: t('ICON'),
+        name: t('ICON'),
+        fieldName: t('ICON'),
+        minWidth: 68,
+        flexGrow: 1,
+        isResizable: true,
+        onRender: onIconColumnRender
+    };
+    const col2: UIColumn = {
+        key: t('ICON_NAME'),
+        name: t('ICON_NAME'),
+        fieldName: t('ICON_NAME'),
+        minWidth: 238,
+        flexGrow: 4,
+        isResizable: true,
+        onRender: onLabelColumnRender
+    };
+    const columns: UIColumn[] = [col1, col2];
+    const propertyNamePascalCase = propertyName[0].toUpperCase() + propertyName.substring(1);
+    return (
+        <>
+            <UIIconButton
+                id={`SelectIconFor${propertyNamePascalCase}`}
+                className="valueHelp-button"
+                title={t('SELECT_ICON')}
+                iconProps={{ iconName: UiIcons.ValueHelp }}
+                onClick={onValueHelpButtonClick}
+                disabled={disabled}
+            />
+            <UIDialog
+                hidden={!isDialogVisible}
+                modalProps={{
+                    className: 'icon-dialog'
+                }}
+                dialogContentProps={{
+                    title: t('SELECT_ICON')
+                }}
+                closeButtonAriaLabel={t('CLOSE')}
+                acceptButtonText={t('OK')}
+                cancelButtonText={t('CANCEL')}
+                onAccept={() => {
+                    setDialogVisibility(false);
+                    setItems(icons);
+                    setCachedValue(controlId, propertyName, InputType.string, newValue);
+                    const action = changeProperty({
+                        controlId,
+                        propertyName,
+                        value: newValue
+                    });
+                    dispatch(action);
+                }}
+                onCancel={() => {
+                    setDialogVisibility(false);
+                    setItems(icons);
+                }}>
+                <div className="filter-icon-div" style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+                    <UISearchBox
+                        className="filter-icons"
+                        autoFocus={false}
+                        disableAnimation={false}
+                        placeholder="Filter Icons"
+                        onChange={onFilterChange}
+                    />
+                </div>
+                <div className="icon-table-div" style={{ height: '100%', position: 'relative', marginTop: '10px' }}>
+                    <UITable
+                        className="icon-table space"
+                        scrollablePaneProps={{
+                            className: 'icon-table'
+                        }}
+                        selectionMode={SelectionMode.single}
+                        dataSetKey={'datasetkey'}
+                        items={items}
+                        columns={columns}
+                        onSelectionChange={onSelectionChange}
+                        ariaLabelForSelectionColumn="Toggle selection"
+                        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
+                        checkButtonAriaLabel="select row"
+                        layoutMode={1}
+                        isHeaderVisible={true}
+                    />
+                </div>
+            </UIDialog>
+        </>
+    );
+}
+interface IconColumnProps {
+    fontFamily: string;
+    content: string;
+}
+
+/**
+ * React element for showing ui5 icon column.
+ *
+ * @param props IconColumnProps
+ * @returns ReactElement
+ */
+function IconColumn(props: IconColumnProps): React.JSX.Element {
+    const { content, fontFamily } = props;
+    const style: CSSProperties = {
+        fontFamily: fontFamily,
+        fontSize: '1rem',
+        fontStyle: 'normal',
+        display: 'inline-block',
+        lineHeight: 0,
+        verticalAlign: 'baseLine',
+        textAlign: 'center',
+        marginTop: 8
+    };
+    return <span className="sapUiIcon icon-span" data-sap-ui-icon-content={content} style={style}></span>;
+}
+interface LabelColumnProps {
+    name: string;
+    fontFamily: string;
+}
+/**
+ * React element for showing ui5 label column.
+ *
+ * @param props { name: string; fontFamily: string }
+ * @returns ReactElement
+ */
+function LabelColumn(props: LabelColumnProps): React.JSX.Element {
+    const { name, fontFamily } = props;
+    const style: CSSProperties = {
+        fontFamily: fontFamily,
+        fontSize: '13px',
+        fontStyle: 'normal'
+    };
+    return <span style={style}>{name}</span>;
+}

package/src/panels/properties/InputTypeSelector.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { InputTypeToggle } from './InputTypeToggle';
+import type { InputTypeWrapperProps } from './types';
+
+/**
+ * Input type selector.
+ *
+ * @param props InputTypeWrapperProps
+ * @returns ReactElement
+ */
+export function InputTypeSelector(props: InputTypeWrapperProps): ReactElement {
+    return (
+        <>
+            {props.toggleOptions.map((optionProps) => (
+                <InputTypeToggle key={optionProps.inputType} inputTypeProps={optionProps} {...props} />
+            ))}
+        </>
+    );
+}

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

@@ -0,0 +1,4 @@
+.selectedTypeButton {
+    background-color: var(--vscode-terminal-ansiBlue) !important;
+    outline: none !important;
+}

package/src/panels/properties/InputTypeToggle.tsx

@@ -0,0 +1,79 @@
+import { UIIconButton } from '@sap-ux/ui-components';
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import type { ControlProperty, StringControlPropertyWithOptions } from '@sap-ux-private/control-property-editor-common';
+import { changeProperty } from '../../slice';
+import type { CacheValue } from './propertyValuesCache';
+import { getCachedValue } from './propertyValuesCache';
+import styles from './InputTypeToggle.module.scss';
+import type { InputTypeToggleProps } from './types';
+import { InputType } from './types';
+import { reportTelemetry, STRING_VALUE_TYPE } from '@sap-ux-private/control-property-editor-common';
+
+/**
+ * Get value for input type.
+ *
+ * @param controlId string
+ * @param property ControlProperty
+ * @param inputType InputType
+ * @returns CacheValue
+ */
+export function getValueForInputType(controlId: string, property: ControlProperty, inputType: InputType): CacheValue {
+    if (inputType === InputType.booleanTrue) {
+        return true;
+    } else if (inputType === InputType.booleanFalse) {
+        return false;
+    } else {
+        const cachedValue = getCachedValue(controlId, property.name, inputType);
+        if (cachedValue) {
+            return cachedValue;
+        } else if (inputType === InputType.expression) {
+            return '{expression}';
+        } else if (inputType === InputType.enumMember) {
+            return (property as StringControlPropertyWithOptions).options[0]?.key ?? '';
+        } else {
+            return property.type === STRING_VALUE_TYPE ? '' : 0;
+        }
+    }
+}
+
+/**
+ * React element for input type toggle.
+ *
+ * @param inputTypeToggleProps InputTypeToggleProps
+ * @returns ReactElement
+ */
+export function InputTypeToggle(inputTypeToggleProps: InputTypeToggleProps): ReactElement {
+    const { inputTypeProps, controlId, property, controlName } = inputTypeToggleProps;
+    const { tooltip, iconName, selected } = inputTypeProps;
+    const dispatch = useDispatch();
+    return (
+        <UIIconButton
+            className={selected ? styles.selectedTypeButton : ''}
+            data-testid={`${property.name}--InputTypeToggle--${inputTypeProps.inputType}`}
+            iconProps={{ iconName: iconName }}
+            title={tooltip}
+            disabled={!property.isEnabled}
+            toggle={true}
+            checked={selected}
+            style={{ margin: 1, padding: 1 }}
+            onClick={(): void => {
+                if (inputTypeProps.selected) {
+                    return;
+                } // click on already selected button should have no effect
+                const newValue = getValueForInputType(controlId, property, inputTypeProps.inputType);
+                reportTelemetry({ category: 'Property Change', propertyName: property.name }).catch((error) => {
+                    console.error(`Error in reporting telemetry`, error);
+                });
+                const action = changeProperty({
+                    controlId,
+                    propertyName: property.name,
+                    value: newValue,
+                    controlName
+                });
+                dispatch(action);
+            }}
+        />
+    );
+}