@finos/legend-application-studio 13.0.0

package/src/components/LegendStudioAppInfo.tsx

@@ -0,0 +1,312 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState } from 'react';
+import {
+  BlankPanelContent,
+  BundleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CopyIcon,
+  Dialog,
+  InfoCircleIcon,
+  PluginIcon,
+  TimesIcon,
+  TreeView,
+  type TreeData,
+  type TreeNodeContainerProps,
+  type TreeNodeData,
+} from '@finos/legend-art';
+import {
+  addUniqueEntry,
+  isNonNullable,
+  type PluginInfo,
+  PresetInfo,
+  type PluginManagerInfo,
+} from '@finos/legend-shared';
+import { useLegendStudioApplicationStore } from './LegendStudioBaseStoreProvider.js';
+
+class AppExtensionInfoTreeNodeData implements TreeNodeData {
+  id: string;
+  label: string;
+  isSelected?: boolean;
+  isOpen?: boolean;
+  childrenIds?: string[];
+  info: PresetInfo | PluginInfo;
+
+  constructor(id: string, label: string, info: PresetInfo | PluginInfo) {
+    this.id = id;
+    this.label = label;
+    this.info = info;
+  }
+}
+
+const buildAppExtensionInfoTreeData = (
+  pluginManagerInfo: PluginManagerInfo,
+): TreeData<AppExtensionInfoTreeNodeData> => {
+  const rootIds: string[] = [];
+  const nodes = new Map<string, AppExtensionInfoTreeNodeData>();
+  // NOTE: the returned plugin manager extension info is already sorted
+  // so we don't need to do that anymore
+  pluginManagerInfo.presets.forEach((preset) => {
+    const node = new AppExtensionInfoTreeNodeData(
+      preset.signature,
+      preset.name,
+      preset,
+    );
+    addUniqueEntry(rootIds, node.id);
+    nodes.set(node.id, node);
+    if (preset.plugins.length) {
+      node.childrenIds = [];
+      preset.plugins.forEach((plugin) => {
+        const childNode = new AppExtensionInfoTreeNodeData(
+          plugin.signature,
+          plugin.name,
+          plugin,
+        );
+        addUniqueEntry(node.childrenIds as string[], childNode.id);
+        nodes.set(childNode.id, childNode);
+      });
+    }
+  });
+  pluginManagerInfo.plugins.forEach((plugin) => {
+    const node = new AppExtensionInfoTreeNodeData(
+      plugin.signature,
+      plugin.name,
+      plugin,
+    );
+    addUniqueEntry(rootIds, node.id);
+    nodes.set(node.id, node);
+  });
+  return { rootIds, nodes };
+};
+
+const AppExtensionInfoTreeNodeContainer: React.FC<
+  TreeNodeContainerProps<
+    AppExtensionInfoTreeNodeData,
+    {
+      // empty
+    }
+  >
+> = (props) => {
+  const { node, level, stepPaddingInRem, onNodeSelect } = props;
+  const isExpandable = Boolean(node.childrenIds?.length);
+  const nodeTypeIcon =
+    node.info instanceof PresetInfo ? <BundleIcon /> : <PluginIcon />;
+  const selectNode = (): void => onNodeSelect?.(node);
+  const nodeExpandIcon = isExpandable ? (
+    node.isOpen ? (
+      <ChevronDownIcon />
+    ) : (
+      <ChevronRightIcon />
+    )
+  ) : (
+    <div />
+  );
+
+  return (
+    <div
+      className="tree-view__node__container"
+      onClick={selectNode}
+      style={{
+        paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 2)}rem`,
+        display: 'flex',
+      }}
+    >
+      <div className="app__info__extensions__tree__node__icon">
+        <div className="app__info__extensions__tree__node__icon__expand">
+          {nodeExpandIcon}
+        </div>
+        <div className="app__info__extensions__tree__node__icon__type">
+          {nodeTypeIcon}
+        </div>
+      </div>
+      <div className="tree-view__node__label app__info__extensions__tree__node__label">
+        <div className="app__info__extensions__tree__node__label__title">
+          {node.label}
+        </div>
+        <div className="app__info__extensions__tree__node__label__version">
+          <div className="app__info__extensions__tree__node__label__version__label">
+            {node.info.version}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const LegendStudioAppInfo: React.FC<{
+  open: boolean;
+  closeModal: () => void;
+}> = (props) => {
+  const { open, closeModal } = props;
+  const applicationStore = useLegendStudioApplicationStore();
+  const config = applicationStore.config;
+  const copyInfo = (): void => {
+    applicationStore
+      .copyTextToClipboard(
+        [
+          `Environment: ${config.env}`,
+          `Version: ${config.appVersion}`,
+          `Revision: ${config.appVersionCommitId}`,
+          `Build Time: ${config.appVersionBuildTime}`,
+          `SDLC Server: ${config.sdlcServerUrl}`,
+          `Engine Server: ${config.engineServerUrl}`,
+          `Depot Server: ${config.depotServerUrl}`,
+          `User Agent: ${window.navigator.userAgent}`,
+        ]
+          .filter(isNonNullable)
+          .join('\n'),
+      )
+      .then(() =>
+        applicationStore.notifySuccess('Copied application info to clipboard'),
+      )
+      .catch(applicationStore.alertUnhandledError);
+  };
+  const [appExtensionInfoTreeData, setAppExtensionInfoTreeData] = useState(
+    buildAppExtensionInfoTreeData(applicationStore.pluginManager.getInfo()),
+  );
+  const onAppExtensionInfoTreeNodeSelect = (
+    node: AppExtensionInfoTreeNodeData,
+  ): void => {
+    if (node.childrenIds?.length) {
+      node.isOpen = !node.isOpen;
+    }
+    setAppExtensionInfoTreeData({ ...appExtensionInfoTreeData });
+  };
+  const getAppExtensionInfoTreeChildNodes = (
+    node: AppExtensionInfoTreeNodeData,
+  ): AppExtensionInfoTreeNodeData[] =>
+    node.childrenIds
+      ?.map((id) => appExtensionInfoTreeData.nodes.get(id))
+      .filter(isNonNullable) ?? [];
+  const isAppExtensionInfoEmpty = !appExtensionInfoTreeData.nodes.size;
+
+  return (
+    <Dialog onClose={closeModal} open={open}>
+      <div className="modal modal--scrollable modal--dark app__info">
+        <div className="modal__header">
+          <div className="modal__title">
+            <div className="modal__title__icon">
+              <InfoCircleIcon />
+            </div>
+            <div className="modal__title__label">About</div>
+          </div>
+          <div className="modal__header__actions">
+            <button
+              className="modal__header__action"
+              tabIndex={-1}
+              onClick={copyInfo}
+              title="Copy application info"
+            >
+              <CopyIcon />
+            </button>
+            <button
+              className="modal__header__action"
+              tabIndex={-1}
+              onClick={closeModal}
+            >
+              <TimesIcon />
+            </button>
+          </div>
+        </div>
+        <div className="modal__body">
+          <div className="app__info__entry">
+            <div className="app__info__entry__title">Environment:</div>
+            <div className="app__info__entry__value">{config.env}</div>
+          </div>
+          <div className="app__info__entry">
+            <div className="app__info__entry__title">Version:</div>
+            <div className="app__info__entry__value">{config.appVersion}</div>
+          </div>
+          <div className="app__info__entry">
+            <div className="app__info__entry__title">Revision:</div>
+            <div className="app__info__entry__value">
+              {config.appVersionCommitId}
+            </div>
+          </div>
+          <div className="app__info__entry">
+            <div className="app__info__entry__title">Build Time:</div>
+            <div className="app__info__entry__value">
+              {config.appVersionBuildTime}
+            </div>
+          </div>
+          <div className="app__info__group">
+            <div className="app__info__entry">
+              <div className="app__info__entry__title">SDLC Server:</div>
+              <div className="app__info__entry__value">
+                <a
+                  href={config.sdlcServerUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {config.sdlcServerUrl}
+                </a>
+              </div>
+            </div>
+            <div className="app__info__entry">
+              <div className="app__info__entry__title">Engine Server:</div>
+              <div className="app__info__entry__value">
+                <a
+                  href={config.engineServerUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {config.engineServerUrl}
+                </a>
+              </div>
+            </div>
+            <div className="app__info__entry">
+              <div className="app__info__entry__title">Depot Server:</div>
+              <div className="app__info__entry__value">
+                <a
+                  href={config.depotServerUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {config.depotServerUrl}
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="app__info__extensions">
+            <div className="app__info__extensions__header">
+              <div className="app__info__extensions__header__title">
+                EXTENSIONS
+              </div>
+            </div>
+            <div className="app__info__extensions__content">
+              {isAppExtensionInfoEmpty && (
+                <BlankPanelContent>no extensions available</BlankPanelContent>
+              )}
+              {!isAppExtensionInfoEmpty && (
+                <TreeView
+                  components={{
+                    TreeNodeContainer: AppExtensionInfoTreeNodeContainer,
+                  }}
+                  treeData={appExtensionInfoTreeData}
+                  getChildNodes={getAppExtensionInfoTreeChildNodes}
+                  onNodeSelect={onAppExtensionInfoTreeNodeSelect}
+                  innerProps={{}}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+};

package/src/components/LegendStudioApplication.tsx

@@ -0,0 +1,223 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect } from 'react';
+import { Switch, Route } from 'react-router';
+import { WorkspaceSetup } from './workspace-setup/WorkspaceSetup.js';
+import { Editor } from './editor/Editor.js';
+import { WorkspaceReview } from './workspace-review/WorkspaceReview.js';
+import { ProjectViewer } from './project-viewer/ProjectViewer.js';
+import { observer } from 'mobx-react-lite';
+import {
+  clsx,
+  GhostIcon,
+  MarkdownTextViewer,
+  PanelLoadingIndicator,
+} from '@finos/legend-art';
+import { LEGEND_STUDIO_ROUTE_PATTERN } from '../stores/LegendStudioRouter.js';
+import type { LegendStudioPluginManager } from '../application/LegendStudioPluginManager.js';
+import { flowResult } from 'mobx';
+import { SDLCServerClientProvider } from '@finos/legend-server-sdlc';
+import { DepotServerClientProvider } from '@finos/legend-server-depot';
+import {
+  LegendStudioBaseStoreProvider,
+  useLegendStudioApplicationStore,
+  useLegendStudioBaseStore,
+} from './LegendStudioBaseStoreProvider.js';
+import { GraphManagerStateProvider } from '@finos/legend-graph';
+import {
+  generateExtensionUrlPattern,
+  LegendApplicationComponentFrameworkProvider,
+  useApplicationStore,
+  VirtualAssistant,
+} from '@finos/legend-application';
+import type { LegendStudioApplicationConfig } from '../application/LegendStudioApplicationConfig.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../stores/LegendStudioDocumentation.js';
+
+const LegendStudioNotFoundRouteScreen = observer(() => {
+  const applicationStore = useApplicationStore();
+
+  const currentPath = applicationStore.navigator.getCurrentLocationPath();
+
+  const documentation = applicationStore.documentationService.getDocEntry(
+    LEGEND_STUDIO_DOCUMENTATION_KEY.NOT_FOUND_HELP,
+  );
+
+  return (
+    <div className="app__page">
+      <div
+        className={clsx('not-found-screen', {
+          'not-found-screen--no-documentation': !documentation?.markdownText,
+        })}
+      >
+        <div className="not-found-screen__icon">
+          <div className="not-found-screen__icon__ghost">
+            <GhostIcon />
+          </div>
+          <div className="not-found-screen__icon__shadow">
+            <svg viewBox="0 0 600 400">
+              <g transform="translate(300 200)">
+                <ellipse
+                  className="not-found-screen__icon__shadow__inner"
+                  rx="320"
+                  ry="80"
+                ></ellipse>
+              </g>
+            </svg>
+          </div>
+        </div>
+        <div className="not-found-screen__text-content">
+          <div className="not-found-screen__text-content__title">
+            404. Not Found
+          </div>
+          <div className="not-found-screen__text-content__detail">
+            The requested URL
+            <span className="not-found-screen__text-content__detail__url">
+              {applicationStore.navigator.generateLocation(currentPath)}
+            </span>
+            was not found in the application
+          </div>
+        </div>
+        {documentation?.markdownText && (
+          <div className="not-found-screen__documentation">
+            <MarkdownTextViewer
+              value={documentation.markdownText}
+              className="markdown-content--page"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+export const LegendStudioApplicationRoot = observer(() => {
+  const baseStore = useLegendStudioBaseStore();
+  const applicationStore = useLegendStudioApplicationStore();
+  const extraApplicationPageEntries = applicationStore.pluginManager
+    .getApplicationPlugins()
+    .flatMap((plugin) => plugin.getExtraApplicationPageEntries?.() ?? []);
+
+  useEffect(() => {
+    flowResult(baseStore.initialize()).catch(
+      applicationStore.alertUnhandledError,
+    );
+  }, [applicationStore, baseStore]);
+
+  return (
+    <div className="app">
+      {!baseStore.isSDLCAuthorized && (
+        <div className="app__page">
+          <PanelLoadingIndicator isLoading={true} />
+        </div>
+      )}
+      {baseStore.isSDLCAuthorized && (
+        <>
+          {/* TODO: consider moving this to `LegendApplicationComponentFrameworkProvider` */}
+          <VirtualAssistant />
+          <Switch>
+            <Route
+              exact={true}
+              path={[
+                LEGEND_STUDIO_ROUTE_PATTERN.VIEW,
+                LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_GAV,
+                LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_GAV_ENTITY,
+                LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_ENTITY,
+                LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_REVISION,
+                LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_VERSION,
+                LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_REVISION_ENTITY,
+                LEGEND_STUDIO_ROUTE_PATTERN.VIEW_BY_VERSION_ENTITY,
+              ]}
+              component={ProjectViewer}
+            />
+            <Route
+              exact={true}
+              path={LEGEND_STUDIO_ROUTE_PATTERN.REVIEW}
+              component={WorkspaceReview}
+            />
+            <Route
+              exact={true}
+              strict={true}
+              path={[
+                LEGEND_STUDIO_ROUTE_PATTERN.EDIT_GROUP,
+                LEGEND_STUDIO_ROUTE_PATTERN.EDIT,
+              ]}
+              component={Editor}
+            />
+            <Route
+              exact={true}
+              path={[
+                // root path will lead to setup page (home page)
+                '/',
+                LEGEND_STUDIO_ROUTE_PATTERN.SETUP,
+                LEGEND_STUDIO_ROUTE_PATTERN.SETUP_GROUP,
+              ]}
+              component={WorkspaceSetup}
+            />
+            {extraApplicationPageEntries.map((entry) => (
+              <Route
+                key={entry.key}
+                exact={true}
+                path={entry.urlPatterns.map(generateExtensionUrlPattern)}
+                component={entry.renderer as React.ComponentType<unknown>}
+              />
+            ))}
+            <Route>
+              <LegendStudioNotFoundRouteScreen />
+            </Route>
+          </Switch>
+        </>
+      )}
+    </div>
+  );
+});
+
+export const LegendStudioApplication = observer(
+  (props: {
+    config: LegendStudioApplicationConfig;
+    pluginManager: LegendStudioPluginManager;
+  }) => {
+    const { config, pluginManager } = props;
+    const applicationStore = useApplicationStore();
+
+    return (
+      <SDLCServerClientProvider
+        config={{
+          env: config.env,
+          serverUrl: config.sdlcServerUrl,
+          baseHeaders: config.SDLCServerBaseHeaders,
+        }}
+      >
+        <DepotServerClientProvider
+          config={{
+            serverUrl: config.depotServerUrl,
+          }}
+        >
+          <GraphManagerStateProvider
+            pluginManager={pluginManager}
+            log={applicationStore.log}
+          >
+            <LegendStudioBaseStoreProvider pluginManager={pluginManager}>
+              <LegendApplicationComponentFrameworkProvider>
+                <LegendStudioApplicationRoot />
+              </LegendApplicationComponentFrameworkProvider>
+            </LegendStudioBaseStoreProvider>
+          </GraphManagerStateProvider>
+        </DepotServerClientProvider>
+      </SDLCServerClientProvider>
+    );
+  },
+);

package/src/components/LegendStudioBaseStoreProvider.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createContext, useContext } from 'react';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { useSDLCServerClient } from '@finos/legend-server-sdlc';
+import { useDepotServerClient } from '@finos/legend-server-depot';
+import {
+  type LegendStudioApplicationStore,
+  LegendStudioBaseStore,
+} from '../stores/LegendStudioBaseStore.js';
+import type { LegendStudioPluginManager } from '../application/LegendStudioPluginManager.js';
+import { useLocalObservable } from 'mobx-react-lite';
+import { useApplicationStore } from '@finos/legend-application';
+import type { LegendStudioApplicationConfig } from '../application/LegendStudioApplicationConfig.js';
+import type { LegendStudioApplicationPlugin } from '../stores/LegendStudioApplicationPlugin.js';
+
+export const useLegendStudioApplicationStore =
+  (): LegendStudioApplicationStore =>
+    useApplicationStore<
+      LegendStudioApplicationConfig,
+      LegendStudioApplicationPlugin
+    >();
+
+const LegendStudioBaseStoreContext = createContext<
+  LegendStudioBaseStore | undefined
+>(undefined);
+
+export const LegendStudioBaseStoreProvider: React.FC<{
+  pluginManager: LegendStudioPluginManager;
+  children: React.ReactNode;
+}> = ({ pluginManager, children }) => {
+  const applicationStore = useLegendStudioApplicationStore();
+  const sdlcServerClient = useSDLCServerClient();
+  const depotServerClient = useDepotServerClient();
+  const baseStore = useLocalObservable(
+    () =>
+      new LegendStudioBaseStore(
+        applicationStore,
+        sdlcServerClient,
+        depotServerClient,
+        pluginManager,
+      ),
+  );
+  return (
+    <LegendStudioBaseStoreContext.Provider value={baseStore}>
+      {children}
+    </LegendStudioBaseStoreContext.Provider>
+  );
+};
+
+export const useLegendStudioBaseStore = (): LegendStudioBaseStore =>
+  guaranteeNonNullable(
+    useContext(LegendStudioBaseStoreContext),
+    `Can't find Legend Studio base store in context`,
+  );

package/src/components/LegendStudioTestID.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// We should keep this as small as possible, minimize the number of times we need to get by the `testId`
+// Because according to our testing philosophy, fixing the DOM structure makes us testing more implementation details
+// than actual app behavior, user won't care about the id of an element or such!
+// See https://testing-library.com/docs/dom-testing-library/api-queries#bytestid
+export enum LEGEND_STUDIO_TEST_ID {
+  PANEL = 'panel', // TODO: revise
+  PANEL_CONTENT_LIST = 'panel__content__list', // TODO: revise
+  PANEL_CONTENT_FORM_SECTION_LIST_ITEMS = 'panel__content__form__section__list__items', // TODO: revise
+
+  MAIN_EDITOR = 'main-editor',
+
+  ACTIVITY_BAR_ITEM_ICON_INDICATOR = 'activity-bar__item__icon__indicator', // TODO: revise
+
+  SIDEBAR_PANEL_HEADER__CHANGES_COUNT = 'side-bar__panel__header__changes-count',
+  ELEMENT_EXPLORER = 'element-explorer',
+  EXPLORER_TREES = 'explorer-trees',
+  EXPLORER_CONTEXT_MENU = 'explorer__context-menu',
+
+  GLOBAL_TEST_RUNNER = 'global-test-runner',
+
+  STATUS_BAR = 'status-bar',
+  EDITOR__STATUS_BAR__RIGHT = 'editor__status-bar__right',
+
+  EDIT_PANEL = 'edit-panel',
+  EDIT_PANEL_CONTENT = 'edit-panel__content',
+  EDIT_PANEL__HEADER_TABS = 'edit-panel__header-tabs',
+  EDIT_PANEL__ELEMENT_VIEW__OPTIONS = 'edit-panel__view-mode__options',
+  EDITOR__TABS__HEADER = 'editor__tabs__header',
+
+  CLASS_FORM_EDITOR = 'class-form-editor',
+  ENUMERATION_EDITOR = 'enumeration-editor',
+  ASSOCIATION_EDITOR = 'association-editor',
+  UML_ELEMENT_EDITOR__TABS_HEADER = 'uml-element-editor__tabs__header',
+  PROPERTY_BASIC_EDITOR__TYPE__LABEL_HOVER = 'property-basic-editor__type__label--hover',
+
+  NEW_ELEMENT_MODAL = 'new-element-modal', // TODO: revise
+
+  SERVICE_REGISTRATION_EDITOR = 'service_registration_editor', // TODO: revise
+
+  MAPPING_EXPLORER = 'mapping-explorer', // TODO: revise
+  SOURCE_PANEL = 'source-panel', // TODO: revise
+  TYPE_VISIT = 'type-visit', // TODO: revise
+
+  PROJECT_OVERVIEW__ACTIVITY_BAR = 'project-overview__activity-bar', // TODO: revise
+
+  SETUP__CONTENT = 'setup__content',
+}