@sap-ux/control-property-editor 0.2.0

package/src/panels/changes/PropertyChange.tsx

@@ -0,0 +1,159 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+
+import { Stack, StackItem, Text } from '@fluentui/react';
+import { UIIcon, UIIconButton, UiIcons, UIDialog } from '@sap-ux/ui-components';
+
+import type { PropertyChangeDeletionDetails } from '@sap-ux-private/control-property-editor-common';
+import { convertCamelCaseToPascalCase, deletePropertyChanges } from '@sap-ux-private/control-property-editor-common';
+import { IconName } from '../../icons';
+
+import styles from './PropertyChange.module.scss';
+import { getFormattedDateAndTime } from './utils';
+
+export interface PropertyChangeProps {
+    controlId: string;
+    controlName: string;
+    changeIndex: number;
+    propertyName: string;
+    value: string | number | boolean;
+    isActive: boolean;
+    timestamp?: number;
+    fileName?: string;
+    /**
+     * Class used for showing and hiding actions
+     */
+    actionClassName: string;
+}
+
+/**
+ * React element for property change.
+ *
+ * @param propertyChangeProps PropertyChangeProps
+ * @returns ReactElement
+ */
+export function PropertyChange(propertyChangeProps: PropertyChangeProps): ReactElement {
+    const { controlId, propertyName, value, isActive, timestamp, fileName, actionClassName } = propertyChangeProps;
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const [dialogState, setDialogState] = useState<PropertyChangeDeletionDetails | undefined>(undefined);
+
+    const valueIcon = getValueIcon(value);
+
+    function onConfirmDelete(): void {
+        if (dialogState) {
+            dispatch(deletePropertyChanges(dialogState));
+            setDialogState(undefined);
+        }
+    }
+
+    function onCancelDelete(): void {
+        setDialogState(undefined);
+    }
+
+    return (
+        <>
+            <Stack
+                tokens={{
+                    childrenGap: 5
+                }}
+                className={styles.container}
+                style={{
+                    opacity: isActive ? 1 : 0.4
+                }}>
+                <Stack.Item className={styles.property}>
+                    <Stack
+                        horizontal
+                        horizontalAlign={'space-between'}
+                        tokens={{
+                            childrenGap: 5
+                        }}>
+                        <Stack.Item>
+                            <Text className={styles.text}>{convertCamelCaseToPascalCase(propertyName)}</Text>
+                            <UIIcon iconName={IconName.arrow} className={styles.text} />
+                            {valueIcon && (
+                                <UIIcon
+                                    className={styles.valueIcon}
+                                    iconName={valueIcon}
+                                    style={{
+                                        marginRight: 5,
+                                        background: 'var(--vscode-terminal-ansiBlue)',
+                                        borderRadius: '50%',
+                                        height: 16,
+                                        width: 16,
+                                        verticalAlign: 'bottom'
+                                    }}
+                                />
+                            )}
+                            <Text className={styles.text}>{value}</Text>
+                        </Stack.Item>
+                        {fileName && (
+                            <Stack.Item className={actionClassName}>
+                                <UIIconButton
+                                    iconProps={{ iconName: UiIcons.TrashCan }}
+                                    onClick={(): void => {
+                                        if (controlId) {
+                                            setDialogState({
+                                                controlId,
+                                                propertyName,
+                                                fileName
+                                            });
+                                        }
+                                    }}
+                                />
+                            </Stack.Item>
+                        )}
+                    </Stack>
+                </Stack.Item>
+
+                {timestamp && (
+                    <StackItem>
+                        <Stack horizontal horizontalAlign="space-between">
+                            <Text className={styles.timestamp}>{getFormattedDateAndTime(timestamp)}</Text>
+                        </Stack>
+                    </StackItem>
+                )}
+            </Stack>
+            {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_CHANGE_SUMMARY_DELETE_SUBTEXT')
+                    }}
+                />
+            )}
+        </>
+    );
+}
+
+/**
+ * Get value icon based on type.
+ *
+ * @param value string | number | boolean
+ * @returns string | undefined
+ */
+function getValueIcon(value: string | number | boolean): string | undefined {
+    if (typeof value === 'string') {
+        if (value.trim().startsWith('{') && value.trim().endsWith('}')) {
+            return IconName.expression;
+        } else {
+            return IconName.string;
+        }
+    } else if (typeof value === 'number') {
+        return IconName.number;
+    } else if (typeof value === 'boolean') {
+        if (value === true) {
+            return IconName.boolTrue;
+        } else {
+            return IconName.boolFalse;
+        }
+    }
+    return undefined;
+}

package/src/panels/changes/UnknownChange.module.scss

@@ -0,0 +1,46 @@
+.item {
+    padding: 5px 15px 5px 15px;
+}
+.text {
+    line-height: 18px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--vscode-editor-foreground);
+    width: 240px;
+}
+.timestamp {
+    color: var(--vscode-editor-foreground);
+    font-size: 11px;
+    line-height: 15px;
+    opacity: 0.5;
+    
+}
+.textHeader {
+    display: inline-block;
+    color: var(--vscode-textLink-foreground);
+    font-size: 13px;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 18px;
+}
+
+.property {
+    overflow-wrap: anywhere;
+}
+
+.item:hover {
+    background-color: var(--vscode-dropdown-background);
+    color: var(--vscode-dropdown-foreground);
+    outline: 1px dashed var(--vscode-contrastActiveBorder);
+    .actions {
+        visibility: visible;
+    }
+}
+
+.actions {
+    visibility: hidden;
+}

package/src/panels/changes/UnknownChange.tsx

@@ -0,0 +1,96 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text, Stack } from '@fluentui/react';
+import { useDispatch } from 'react-redux';
+import styles from './UnknownChange.module.scss';
+import { UIIconButton, UiIcons, UIDialog } from '@sap-ux/ui-components';
+import type { PropertyChangeDeletionDetails } from '@sap-ux-private/control-property-editor-common';
+import { deletePropertyChanges, convertCamelCaseToPascalCase } from '@sap-ux-private/control-property-editor-common';
+import { getFormattedDateAndTime } from './utils';
+
+export interface UnknownChangeProps {
+    fileName: string;
+    timestamp?: number;
+}
+
+/**
+ * React element for unknown change in change stack.
+ *
+ * @param unknownChangeProps UnknownChangeProps
+ * @returns ReactElement
+ */
+export function UnknownChange(unknownChangeProps: UnknownChangeProps): ReactElement {
+    const { fileName, timestamp } = unknownChangeProps;
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const [dialogState, setDialogState] = useState<PropertyChangeDeletionDetails | undefined>(undefined);
+
+    function onConfirmDelete(): void {
+        if (dialogState) {
+            dispatch(deletePropertyChanges(dialogState));
+            setDialogState(undefined);
+        }
+    }
+
+    function onCancelDelete(): void {
+        setDialogState(undefined);
+    }
+
+    const parts = fileName.split('_');
+    const changeName = parts[parts.length - 1];
+    const name = convertCamelCaseToPascalCase(changeName);
+    return (
+        <>
+            <Stack className={styles.item}>
+                <Stack.Item className={styles.property}>
+                    <Stack horizontal>
+                        <Stack.Item>
+                            <Text className={styles.textHeader}>
+                                {name} {t('CHANGE')}
+                            </Text>
+                            <Text className={styles.text} title={fileName}>
+                                {t('FILE')}
+                                {fileName}
+                            </Text>
+                        </Stack.Item>
+                        {fileName && (
+                            <Stack.Item className={styles.actions}>
+                                <UIIconButton
+                                    iconProps={{ iconName: UiIcons.TrashCan }}
+                                    onClick={(): void => {
+                                        setDialogState({
+                                            controlId: '',
+                                            propertyName: '',
+                                            fileName
+                                        });
+                                    }}
+                                />
+                            </Stack.Item>
+                        )}
+                    </Stack>
+                </Stack.Item>
+                {timestamp && (
+                    <Stack.Item>
+                        <Stack horizontal horizontalAlign="space-between">
+                            <Text className={styles.timestamp}>{getFormattedDateAndTime(timestamp)}</Text>
+                        </Stack>
+                    </Stack.Item>
+                )}
+            </Stack>
+            {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_CHANGE_SUMMARY_DELETE_SUBTEXT')
+                    }}
+                />
+            )}
+        </>
+    );
+}

package/src/panels/changes/index.tsx

@@ -0,0 +1,3 @@
+export { isKnownChange } from './ChangeStack';
+export { ChangesPanel } from './ChangesPanel';
+export { ControlGroupProps, ControlPropertyChange } from './ControlGroup';

package/src/panels/changes/utils.ts

@@ -0,0 +1,36 @@
+const localeTimeOptions: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit', hour12: false };
+const localeDateOptions: Intl.DateTimeFormatOptions = { day: '2-digit', month: '2-digit', year: '2-digit' };
+
+/**
+ * Gets locale.
+ *
+ * @returns string
+ */
+function getLocale(): string {
+    if (globalThis?.navigator?.languages) {
+        const supportedLocales = Intl.DateTimeFormat.supportedLocalesOf([...globalThis.navigator.languages], {
+            ...localeDateOptions,
+            ...localeTimeOptions
+        });
+        if (supportedLocales.length) {
+            return supportedLocales[0];
+        }
+    }
+    return 'en-GB';
+}
+
+/**
+ * Gets formatted date time based on locale.
+ *
+ * @param timestamp number
+ * @returns string
+ */
+export function getFormattedDateAndTime(timestamp: number): string {
+    const date = new Date(timestamp);
+    const locale = getLocale();
+
+    return `${date.toLocaleTimeString(locale, localeTimeOptions)} ${date.toLocaleDateString(
+        locale,
+        localeDateOptions
+    )}`;
+}

package/src/panels/index.ts

@@ -0,0 +1,2 @@
+export { PropertiesPanel } from './properties';
+export { LeftPanel } from './LeftPanel';

package/src/panels/outline/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';
+
+const TARGET = 'control-property-editor-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 focusChecked = filterQuery.filter((item) => item.name === FilterName.focusEditable)[0].value as boolean;
+    const focusCommonlyUsedChecked = filterQuery.filter((item) => item.name === FilterName.focusCommonlyUsed)[0]
+        .value as boolean;
+    const checked = focusChecked || focusCommonlyUsedChecked;
+    return (
+        <>
+            <UIIconButton
+                id={TARGET}
+                className={`funnel-icon`}
+                iconProps={{ iconName: IconName.funnel }}
+                checked={checked}
+                onClick={showCallout}></UIIconButton>
+            {isVisible && (
+                <UICallout
+                    target={`#${TARGET}`}
+                    isBeakVisible={true}
+                    beakWidth={5}
+                    directionalHint={4}
+                    onDismiss={() => setIsVisible(false)}
+                    contentPadding={UICalloutContentPadding.Standard}>
+                    <UICheckbox
+                        className={'funnel-call-out-checkbox'}
+                        label={t('FOCUS_EDITABLE')}
+                        checked={focusChecked}
+                        onChange={(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
+                            onChange(FilterName.focusEditable, isChecked);
+                        }}></UICheckbox>
+                    <UICheckbox
+                        label={t('FOCUS_COMMONLY_USED')}
+                        checked={focusCommonlyUsedChecked}
+                        onChange={(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, isChecked?: boolean) => {
+                            onChange(FilterName.focusCommonlyUsed, isChecked);
+                        }}></UICheckbox>
+                </UICallout>
+            )}
+        </>
+    );
+};
+
+export { Funnel };

package/src/panels/outline/NoControlFound.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text } from '@fluentui/react';
+import { useTranslation } from 'react-i18next';
+
+const NoControlFound = () => {
+    const { t } = useTranslation();
+    return (
+        <>
+            <Text className="tree-no-control-found">{t('NO_CONTROL_FOUND')}</Text>
+            <Text className="tree-modify-search-input">{t('MODIFY_SEARCH_INPUT')}</Text>
+            <div className="tree-search-icon">
+                <svg
+                    data-testid="Control-Property-Editor-No-Search-Matched-Icon"
+                    width="49"
+                    height="49"
+                    viewBox="0 0 49 49"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40ZM20 37C29.3888 37 37 29.3888 37 20C37 10.6112 29.3888 3 20 3C10.6112 3 3 10.6112 3 20C3 29.3888 10.6112 37 20 37Z"
+                        fill="var(--vscode-icon-foreground)"
+                    />
+                    <rect
+                        x="33"
+                        y="35.1213"
+                        width="3"
+                        height="19.2712"
+                        transform="rotate(-45 33 35.1213)"
+                        fill="var(--vscode-icon-foreground)"
+                    />
+                    <rect x="15" y="13" width="2" height="7" fill="var(--vscode-focusBorder)" />
+                    <rect x="23" y="13" width="2" height="7" fill="var(--vscode-focusBorder)" />
+                    <path
+                        d="M12.5815 28C13.7683 25.0682 16.6426 23 20 23C23.3574 23 26.2317 25.0682 27.4185 28H25.1973C24.1599 26.2066 22.2208 25 20 25C17.7792 25 15.8401 26.2066 14.8027 28H12.5815Z"
+                        fill="var(--vscode-focusBorder)"
+                    />
+                </svg>
+            </div>
+        </>
+    );
+};
+
+export { NoControlFound };

package/src/panels/outline/OutlinePanel.scss

@@ -0,0 +1,98 @@
+.filter-outline {
+    display: flex;
+    margin: 20px 14px 30px 14px;
+    flex-direction: row;
+    align-items: center;
+    overflow-y: auto;
+}
+
+.funnel-icon {
+    margin-left: 16px;
+    i {
+        line-height: 20px;
+    }
+}
+
+.funnel-call-out-checkbox {
+    padding-bottom: 5px;
+}
+
+.tree-no-control-found {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 29px;
+    text-align: center;
+    color: var(--vscode-foreground);
+}
+.tree-modify-search-input {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 13px;
+    line-height: 18px;
+    text-align: center;
+    padding-top: 20px;
+    color: var(--vscode-foreground);
+}
+.tree-search-icon {
+    text-align: center;
+}
+
+.tree-cell {
+    display: flex;
+    font-size: 13px;
+    font-weight: normal;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 18px;
+    padding: 5px 0;
+    min-width: 0px;
+    align-items: center;
+}
+
+.tree-row {
+    display: flex;
+    justify-content: space-between;
+    &:hover {
+        cursor: pointer;
+        background-color: var(--vscode-dropdown-background);
+        color: var(--vscode-dropdown-foreground);
+        outline: 1px dashed var(--vscode-contrastActiveBorder);
+    }
+    align-items: center;
+}
+
+.app-panel-scroller > div {
+    padding-top: 0px;
+}
+.focusEditable {
+    opacity: 0.55;
+}
+
+.tree-row-icon {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.right-chevron-icon {
+    margin-right: 3px;
+    transform: rotate(0deg);
+    transform-origin: 50% 50%;
+    transition: transform 0.1s linear 0s;
+}
+.down-chevron-icon {
+    margin-right: 3px;
+    transform: rotate(90deg);
+    transform-origin: 50% 50%;
+    transition: transform 0.1s linear 0s;
+}
+
+.app-panel-selected-bg.tree-row {
+    color: var(--vscode-list-activeSelectionForeground);
+    background-color: var(--vscode-list-activeSelectionBackground);
+    outline: 1px solid var(--vscode-contrastActiveBorder);
+}
+
+

package/src/panels/outline/OutlinePanel.tsx

@@ -0,0 +1,38 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { UISearchBox } from '@sap-ux/ui-components';
+import { FilterName, filterNodes } from '../../slice';
+import './OutlinePanel.scss';
+
+import { Tree } from './Tree';
+import { Funnel } from './Funnel';
+
+const OutlinePanel = (): ReactElement => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const onFilterChange = (
+        event?: React.ChangeEvent<HTMLInputElement> | undefined,
+        newValue?: string | undefined
+    ): void => {
+        const action = filterNodes([{ name: FilterName.query, value: newValue ?? '' }]);
+        dispatch(action);
+    };
+    return (
+        <>
+            <div className="filter-outline">
+                <UISearchBox
+                    autoFocus={false}
+                    disableAnimation={false}
+                    placeholder={t('SEARCH_OUTLINE')}
+                    onChange={onFilterChange}
+                />
+                <Funnel />
+            </div>
+            <Tree />
+        </>
+    );
+};
+
+export { OutlinePanel };