@sap-ux/control-property-editor 0.2.0

package/src/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import { initIcons } from '@sap-ux/ui-components';
+import { enableTelemetry } from '@sap-ux-private/control-property-editor-common';
+import { initI18n } from './i18n';
+
+import './index.css';
+import App from './App';
+import { store } from './store';
+import type { ThemeName } from './components';
+import { setThemeOnDocument } from './components';
+import { registerAppIcons } from './icons';
+
+export interface StartOptions {
+    previewUrl: string;
+    rootElementId: string;
+    telemetry?: boolean;
+}
+
+/**
+ *  Start Control Property Editor with options.
+ *
+ * @param options StartOptions
+ */
+export function start(options: StartOptions): void {
+    const { previewUrl, rootElementId, telemetry = false } = options;
+    if (telemetry) {
+        enableTelemetry();
+    }
+    initI18n();
+    registerAppIcons();
+    initIcons();
+
+    const theme = localStorage.getItem('theme') ?? 'dark';
+    setThemeOnDocument(theme as ThemeName);
+
+    ReactDOM.render(
+        <React.StrictMode>
+            <Provider store={store}>
+                <App previewUrl={previewUrl} />
+            </Provider>
+        </React.StrictMode>,
+        document.getElementById(rootElementId)
+    );
+}

package/src/middleware.ts

@@ -0,0 +1,54 @@
+import type { Dispatch } from 'redux';
+import type { Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
+
+import type { ExternalAction } from '@sap-ux-private/control-property-editor-common';
+import {
+    startPostMessageCommunication,
+    changeProperty as externalChangeProperty,
+    selectControl,
+    deletePropertyChanges
+} from '@sap-ux-private/control-property-editor-common';
+
+import type { Action } from './actions';
+import { changeProperty } from './slice';
+
+/**
+ * Communication between preview iframe and main application is realized through the communication middleware.
+ *
+ * @param store - redux store
+ * @returns Function
+ */
+export const communicationMiddleware: Middleware<Dispatch<Action>> = (store: MiddlewareAPI) => {
+    const { sendAction } = startPostMessageCommunication<ExternalAction>(
+        function getTarget(): Window | undefined {
+            let result;
+            const target = (document.getElementById('preview') as HTMLIFrameElement).contentWindow;
+            if (target) {
+                result = target;
+            }
+            return result;
+        },
+        function onAction(action) {
+            store.dispatch(action);
+            return Promise.resolve();
+        }
+    );
+    return (next: Dispatch<Action>) =>
+        (action: Action): Action => {
+            action = next(action);
+
+            switch (action.type) {
+                case changeProperty.type: {
+                    sendAction(externalChangeProperty(action.payload));
+                    break;
+                }
+                case deletePropertyChanges.type:
+                case selectControl.type: {
+                    sendAction(action);
+                    break;
+                }
+                default:
+            }
+            return action;
+        };
+};

package/src/panels/LeftPanel.scss

@@ -0,0 +1,17 @@
+.editor__outline {
+    .section__body {
+        margin-bottom: 0px;
+        margin-top: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+        padding-left: 0px !important;
+        padding-right: 0px;
+    }
+    .tree-no-control-found {
+        display: block;
+    }
+    .tree-modify-search-input {
+        display: block;
+        margin-bottom: 20px;
+    }
+}

package/src/panels/LeftPanel.tsx

@@ -0,0 +1,48 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { UISectionLayout, UISections, UISplitterLayoutType, UISplitterType } from '@sap-ux/ui-components';
+import { AppLogo, Toolbar } from '../components';
+
+import { ChangesPanel } from './changes';
+import { OutlinePanel } from './outline';
+
+import './LeftPanel.scss';
+
+/**
+ * React element for left panel containing outline and change stack.
+ *
+ * @returns ReactElement
+ */
+export function LeftPanel(): ReactElement {
+    return (
+        <>
+            <Toolbar left={<AppLogo />} />
+            <UISections
+                vertical={true}
+                splitter={true}
+                height="100%"
+                splitterType={UISplitterType.Resize}
+                splitterLayoutType={UISplitterLayoutType.Compact}
+                minSectionSize={[300, 190]}
+                sizes={[60, 40]}
+                sizesAsPercents={true}
+                animation={true}>
+                <UISections.Section
+                    scrollable={true}
+                    layout={UISectionLayout.Standard}
+                    className="editor__outline"
+                    height="100%">
+                    <OutlinePanel />
+                </UISections.Section>
+                <UISections.Section
+                    layout={UISectionLayout.Standard}
+                    className="editor__outline"
+                    height="100%"
+                    cleanPadding={true}>
+                    <ChangesPanel />
+                </UISections.Section>
+            </UISections>
+        </>
+    );
+}

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

@@ -0,0 +1,3 @@
+.item {
+    margin: 0px 15px;
+}

package/src/panels/changes/ChangeStack.tsx

@@ -0,0 +1,219 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { Stack } from '@fluentui/react';
+
+import type { Change, ValidChange } from '@sap-ux-private/control-property-editor-common';
+
+import { Separator } from '../../components';
+import type { ControlGroupProps, ControlPropertyChange } from './ControlGroup';
+import { ControlGroup } from './ControlGroup';
+import type { UnknownChangeProps } from './UnknownChange';
+import { UnknownChange } from './UnknownChange';
+
+import styles from './ChangeStack.module.scss';
+import { useSelector } from 'react-redux';
+import type { FilterOptions } from '../../slice';
+import { FilterName } from '../../slice';
+import type { RootState } from '../../store';
+import { convertCamelCaseToPascalCase } from '@sap-ux-private/control-property-editor-common';
+import { getFormattedDateAndTime } from './utils';
+
+export interface ChangeStackProps {
+    changes: Change[];
+}
+
+/**
+ * React element for Change stack.
+ *
+ * @param changeStackProps ChangeStackProps
+ * @returns ReactElement
+ */
+export function ChangeStack(changeStackProps: ChangeStackProps): ReactElement {
+    const { changes } = changeStackProps;
+    let groups = convertChanges(changes);
+    const filterQuery = useSelector<RootState, FilterOptions[]>((state) => state.filterQuery)
+        .filter((item) => item.name === FilterName.changeSummaryFilterQuery)[0]
+        .value.toString()
+        .toLowerCase();
+    groups = filterGroup(groups, filterQuery);
+    const stackName = changes[0].type === 'pending' ? 'unsaved-changes-stack' : 'saved-changes-stack';
+    return (
+        <Stack data-testid={stackName} tokens={{ childrenGap: 5, padding: '5px 0px 5px 0px' }}>
+            {groups.map((item, i) => [
+                isKnownChange(item) ? (
+                    <Stack.Item
+                        data-testid={`${stackName}-${item.controlId}-${item.changeIndex}`}
+                        key={`${item.controlId}-${item.changeIndex}`}>
+                        <ControlGroup {...item} />
+                    </Stack.Item>
+                ) : (
+                    <Stack.Item key={`${item.fileName}`}>
+                        <UnknownChange {...item} />
+                    </Stack.Item>
+                ),
+
+                i + 1 < groups.length ? (
+                    <Stack.Item key={getKey(i)}>
+                        <Separator className={styles.item} />
+                    </Stack.Item>
+                ) : (
+                    <></>
+                )
+            ])}
+        </Stack>
+    );
+}
+
+/**
+ * Generate react attribute key.
+ *
+ * @param i number
+ * @returns string
+ */
+function getKey(i: number): string {
+    return `${i}-separator`;
+}
+
+type Item = ControlGroupProps | UnknownChangeProps;
+
+/**
+ * Method to convert changes to unknown or control group.
+ *
+ * @param changes Change[]
+ * @returns Item[]
+ */
+function convertChanges(changes: Change[]): Item[] {
+    const items: Item[] = [];
+    let i = 0;
+    while (i < changes.length) {
+        const change = changes[i];
+        if (change.type === 'saved' && change.kind === 'unknown') {
+            items.push({
+                fileName: change.fileName,
+                timestamp: change.timestamp
+            });
+            i++;
+        } else {
+            const group: ControlGroupProps = {
+                controlId: change.controlId,
+                text: convertCamelCaseToPascalCase(change.controlName),
+                changeIndex: i,
+                changes: [toPropertyChangeProps(change, i)]
+            };
+            items.push(group);
+            i++;
+            while (i < changes.length) {
+                // We don't need to add header again if the next control is the same
+                const nextChange = changes[i];
+                if (
+                    (nextChange.type === 'saved' && nextChange.kind === 'unknown') ||
+                    change.controlId !== nextChange.controlId
+                ) {
+                    break;
+                }
+                group.changes.push(toPropertyChangeProps(nextChange, i));
+                i++;
+            }
+        }
+    }
+    return items;
+}
+
+/**
+ * Converts a change to ControlPropertyChange.
+ *
+ * @param change ValidChange
+ * @param changeIndex number
+ * @returns ControlPropertyChange
+ */
+function toPropertyChangeProps(change: ValidChange, changeIndex: number): ControlPropertyChange {
+    const { controlId, propertyName, value, controlName } = change;
+    const base = {
+        controlId,
+        controlName,
+        propertyName,
+        value,
+        changeIndex
+    };
+    if (change.type === 'pending') {
+        const { isActive } = change;
+        return {
+            ...base,
+            isActive
+        };
+    } else {
+        const { fileName, timestamp } = change;
+        return {
+            ...base,
+            isActive: true,
+            fileName,
+            timestamp
+        };
+    }
+}
+
+/**
+ * Returns true, if controlId is defined.
+ *
+ * @param change ControlGroupProps | UnknownChangeProps
+ * @returns boolean
+ */
+export function isKnownChange(change: ControlGroupProps | UnknownChangeProps): change is ControlGroupProps {
+    return (change as ControlGroupProps).controlId !== undefined;
+}
+
+const filterPropertyChanges = (changes: ControlPropertyChange[], query: string): ControlPropertyChange[] => {
+    return changes.filter((item) => {
+        return (
+            !query ||
+            item.propertyName.trim().toLowerCase().includes(query) ||
+            convertCamelCaseToPascalCase(item.propertyName.toString()).trim().toLowerCase().includes(query) ||
+            item.value.toString().trim().toLowerCase().includes(query) ||
+            convertCamelCaseToPascalCase(item.value.toString()).trim().toLowerCase().includes(query) ||
+            (item.timestamp && getFormattedDateAndTime(item.timestamp).trim().toLowerCase().includes(query))
+        );
+    });
+};
+
+/**
+ * Filter group in change stack.
+ *
+ * @param model Item[]
+ * @param query string
+ * @returns Item[]
+ */
+function filterGroup(model: Item[], query: string): Item[] {
+    const filteredModel: Item[] = [];
+    if (query.length === 0) {
+        return model;
+    }
+    for (const item of model) {
+        let parentMatch = false;
+        if (!isKnownChange(item)) {
+            continue;
+        }
+        const name = item.text.trim().toLowerCase();
+        if (name.includes(query)) {
+            parentMatch = true;
+            // add node without its children
+            filteredModel.push({ ...item, changes: [] });
+        }
+        const controlPropModel = item;
+        if (controlPropModel.changes.length <= 0) {
+            continue;
+        }
+        const data = filterPropertyChanges(controlPropModel.changes, query);
+
+        if (parentMatch) {
+            // parent matched filter query and pushed already to `filterModel`. only  replace matched children
+            (filteredModel[filteredModel.length - 1] as ControlGroupProps).changes = controlPropModel.changes;
+            // add node and its matched children
+        } else if (data.length > 0) {
+            const newFilterModel = { ...item, changes: data };
+            filteredModel.push(newFilterModel);
+        }
+    }
+
+    return filteredModel;
+}

package/src/panels/changes/ChangeStackHeader.tsx

@@ -0,0 +1,43 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { Text } from '@fluentui/react';
+
+import { sectionHeaderFontSize } from '../properties/constants';
+
+export interface ChangeStackHeaderProps {
+    backgroundColor: string;
+    color: string;
+    text: string;
+}
+
+/**
+ * React element of header of change stack.
+ *
+ * @param changeStackHeaderProps ChangeStackHeaderProps
+ * @returns ReactElement
+ */
+export function ChangeStackHeader(changeStackHeaderProps: ChangeStackHeaderProps): ReactElement {
+    const { backgroundColor, color, text } = changeStackHeaderProps;
+    return (
+        <div
+            style={{
+                backgroundColor: backgroundColor,
+                padding: '6px 15px'
+            }}>
+            <Text
+                style={{
+                    color: color,
+                    fontSize: sectionHeaderFontSize,
+                    fontWeight: 'bold',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    overflowX: 'hidden',
+                    lineHeight: '18px',
+                    display: 'block'
+                }}>
+                {text}
+            </Text>
+        </div>
+    );
+}

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

@@ -0,0 +1,18 @@
+.filter {
+    display: flex;
+    margin: 17px 15px 10px 15px;
+    flex-direction: row;
+    align-items: center;
+    overflow-y: auto;
+}
+
+.noData {
+    font-style: normal;
+    font-weight: bolder;
+    font-size: 15px;
+    line-height: 21px;
+    text-align: center;
+    padding-top: 20px;
+    margin-left: 35px;
+    color: var(--vscode-foreground);
+}

package/src/panels/changes/ChangesPanel.tsx

@@ -0,0 +1,90 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Text } from '@fluentui/react';
+import { UISearchBox } from '@sap-ux/ui-components';
+
+import type { ChangesSlice } from '../../slice';
+import { FilterName, filterNodes } from '../../slice';
+import type { RootState } from '../../store';
+
+import { Separator } from '../../components';
+import { ChangeStack } from './ChangeStack';
+import { ChangeStackHeader } from './ChangeStackHeader';
+
+import styles from './ChangesPanel.module.scss';
+
+/**
+ * React element for ChangePanel.
+ *
+ * @returns ReactElement
+ */
+export function ChangesPanel(): ReactElement {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const { pending, saved } = useSelector<RootState, ChangesSlice>((state) => state.changes);
+    const onFilterChange = (
+        event?: React.ChangeEvent<HTMLInputElement> | undefined,
+        filterValue?: string | undefined
+    ): void => {
+        const action = filterNodes([{ name: FilterName.changeSummaryFilterQuery, value: filterValue ?? '' }]);
+        dispatch(action);
+    };
+
+    /**
+     * Method renders the ReactElement for ChangePanel.
+     *
+     * @returns ReactElement
+     */
+    function renderChanges(): ReactElement {
+        if (pending.length === 0 && saved.length === 0) {
+            return <Text className={styles.noData}>{t('NO_CONTROL_CHANGES_FOUND')}</Text>;
+        }
+        return (
+            <>
+                {pending.length > 0 && (
+                    <>
+                        <Separator />
+                        <ChangeStackHeader
+                            backgroundColor="var(--vscode-sideBar-background);"
+                            color="var(--vscode-editor-foreground)"
+                            text={t('CHANGE_SUMMARY_UNSAVED_CHANGES')}
+                        />
+                        <Separator />
+                        <ChangeStack key="pending-changes" changes={pending} />
+                    </>
+                )}
+                {saved.length > 0 && (
+                    <>
+                        <Separator />
+                        <ChangeStackHeader
+                            backgroundColor="var(--vscode-sideBar-background);"
+                            color="var(--vscode-terminal-ansiGreen)"
+                            text={t('CHANGE_SUMMARY_SAVED_CHANGES')}
+                        />
+                        <Separator />
+                        <ChangeStack key="saved-changes" changes={saved} />
+                    </>
+                )}
+                <Separator />
+            </>
+        );
+    }
+
+    return (
+        <>
+            <div className={styles.filter}>
+                <UISearchBox
+                    autoFocus={false}
+                    disableAnimation={false}
+                    placeholder={t('FILTER')}
+                    onChange={onFilterChange}
+                />
+            </div>
+            {renderChanges()}
+        </>
+    );
+}

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

@@ -0,0 +1,17 @@
+.header,
+.item {
+    padding: 5px 15px 5px 15px;
+}
+
+.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/ControlGroup.tsx

@@ -0,0 +1,61 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Link, Stack } from '@fluentui/react';
+
+import { useAppDispatch } from '../../store';
+import { selectControl } from '@sap-ux-private/control-property-editor-common';
+
+import type { PropertyChangeProps } from './PropertyChange';
+import { PropertyChange } from './PropertyChange';
+
+import styles from './ControlGroup.module.scss';
+
+export interface ControlGroupProps {
+    text: string;
+    controlId: string;
+    changeIndex: number;
+    changes: ControlPropertyChange[];
+}
+export type ControlPropertyChange = Omit<PropertyChangeProps, 'actionClassName'>;
+
+/**
+ * React Element for control groups.
+ *
+ * @param controlGroupProps ControlGroupProps
+ * @returns ReactElement
+ */
+export function ControlGroup(controlGroupProps: ControlGroupProps): ReactElement {
+    const { text, controlId, changes } = controlGroupProps;
+    const dispatch = useAppDispatch();
+    const stackName = changes[0].timestamp ? `saved-changes-stack` : `unsaved-changes-stack`;
+    return (
+        <Stack>
+            <Stack.Item className={styles.header}>
+                <Link
+                    onClick={(): void => {
+                        const action = selectControl(controlId);
+                        dispatch(action);
+                    }}
+                    style={{
+                        color: 'var(--vscode-textLink-foreground)',
+                        fontSize: '13px',
+                        fontWeight: 'bold',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflowX: 'hidden',
+                        lineHeight: '18px'
+                    }}>
+                    {text}
+                </Link>
+            </Stack.Item>
+            {changes.map((change) => (
+                <Stack.Item
+                    data-testid={`${stackName}-${controlId}-${change.propertyName}-${change.changeIndex}`}
+                    key={`${change.changeIndex}`}
+                    className={styles.item}>
+                    <PropertyChange {...change} actionClassName={styles.actions} />
+                </Stack.Item>
+            ))}
+        </Stack>
+    );
+}

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

@@ -0,0 +1,24 @@
+.text,
+.timestamp {
+    color: var(--vscode-editor-foreground);
+}
+
+.text {
+    margin-right: 5px;
+    line-height: 18px;
+    display: inline-block;
+}
+
+.timestamp {
+    font-size: 11px;
+    line-height: 15px;
+    opacity: 0.5;
+}
+
+.valueIcon svg path {
+    fill: #ffffff !important;
+}
+
+.property {
+    overflow-wrap: anywhere;
+}