Add element path to element dropdown

.changeset/chilly-penguins-arrive.md

@@ -0,0 +1,5 @@
+---
+'@finos/legend-application': patch
+---
+
+Add element path to element dropdown.

.changeset/funny-garlics-tan.md

@@ -0,0 +1,3 @@
+---
+'@finos/legend-studio': patch
+---

packages/legend-application/src/application/LegendApplication.tsx

@@ -33,7 +33,10 @@ import {
 } from '@finos/legend-shared';
 import { APPLICATION_EVENT } from '../stores/ApplicationEvent.js';
 import { configureComponents } from '@finos/legend-art';
-import type { GraphPluginManager } from '@finos/legend-graph';
+import type {
+  GraphPluginManager,
+  PackageableElement,
+} from '@finos/legend-graph';
 import type { LegendApplicationPluginManager } from './LegendApplicationPluginManager.js';
 import { setupPureLanguageService } from '../stores/PureLanguageSupport.js';
 
@@ -268,3 +271,21 @@ export abstract class LegendApplication {
     }
   }
 }
+
+export const packageableElementFormatOptionLabel = (option: {
+  label: string;
+  value: PackageableElement;
+  darkMode?: boolean;
+}): React.ReactNode => {
+  const stylePrefix = option.darkMode
+    ? 'packageable-element-format-option-label--dark'
+    : 'packageable-element-format-option-label';
+  return (
+    <div className={stylePrefix}>
+      <div className={`${stylePrefix}__name`}>{option.label}</div>
+      {option.value.package && (
+        <div className={`${stylePrefix}__tag`}>{`${option.value.path}`}</div>
+      )}
+    </div>
+  );
+};

packages/legend-application/style/components/_packageable-element-format-option.scss

@@ -0,0 +1,66 @@
+/**
+ * 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.
+ */
+@use 'mixins' as *;
+
+.packageable-element-format-option-label {
+  @include flexVCenter;
+
+  display: flex;
+
+  &__tag {
+    @include flexVCenter;
+
+    color: var(--color-dark-grey-500);
+    background: var(--color-light-grey-180);
+    margin-left: 1rem;
+    border-radius: 0.2rem;
+    font-size: 1rem;
+    padding: 0 0.5rem;
+    height: 1.6rem;
+    font-weight: 500;
+  }
+
+  &__name {
+    @include flexVCenter;
+
+    height: 1.8rem;
+  }
+}
+
+.packageable-element-format-option-label--dark {
+  @include flexVCenter;
+
+  display: flex;
+
+  &__tag {
+    @include flexVCenter;
+
+    color: var(--color-dark-grey-250);
+    background: var(--color-dark-grey-400);
+    margin-left: 1rem;
+    border-radius: 0.2rem;
+    font-size: 1rem;
+    padding: 0 0.5rem;
+    height: 1.6rem;
+    font-weight: 500;
+  }
+
+  &__name {
+    @include flexVCenter;
+
+    height: 1.8rem;
+  }
+}

packages/legend-application/style/index.scss

@@ -27,3 +27,4 @@
 @forward 'components/text-editor';
 @forward 'components/virtual-assistant';
 @forward 'components/value-spec-editor';
+@forward 'components/packageable-element-format-option';

packages/legend-studio/src/components/editor/edit-panel/mapping-editor/NewMappingElementModal.tsx

@@ -45,6 +45,7 @@ import {
   Association,
 } from '@finos/legend-graph';
 import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelUtil.js';
+import { packageableElementFormatOptionLabel } from '@finos/legend-application';
 
 interface ClassMappingSubTypeOption {
   label: string;
@@ -232,6 +233,7 @@ export const NewMappingElementModal = observer(() => {
               filterOption={filterOption}
               onChange={handleTargetChange}
               value={selectedOption}
+              formatOptionLabel={packageableElementFormatOptionLabel}
               placeholder="Choose a target"
               isClearable={true}
             />

packages/legend-studio/src/components/editor/edit-panel/uml-editor/ClassEditor.tsx

@@ -85,6 +85,7 @@ import {
 import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import {
   ApplicationNavigationContextData,
+  packageableElementFormatOptionLabel,
   useApplicationNavigationContext,
   useApplicationStore,
 } from '@finos/legend-application';
@@ -241,6 +242,7 @@ const PropertyBasicEditor = observer(
             value={selectedPropertyType}
             placeholder={'Choose a data type or enumeration'}
             filterOption={filterOption}
+            formatOptionLabel={packageableElementFormatOptionLabel}
           />
         )}
         {!isIndirectProperty && !isReadOnly && !isEditingType && (
@@ -517,6 +519,7 @@ const DerivedPropertyBasicEditor = observer(
               value={selectedPropertyType}
               placeholder="Choose a data type or enumeration"
               filterOption={filterOption}
+              formatOptionLabel={packageableElementFormatOptionLabel}
             />
           )}
           {!isInheritedProperty && !isReadOnly && !isEditingType && (
@@ -806,6 +809,7 @@ const SuperTypeEditor = observer(
           value={selectedType}
           placeholder={'Choose a class'}
           filterOption={filterOption}
+          formatOptionLabel={packageableElementFormatOptionLabel}
         />
         <button
           className="uml-element-editor__basic__detail-btn"

packages/legend-studio/src/components/editor/side-bar/CreateNewElementModal.tsx

@@ -41,7 +41,10 @@ import {
 } from '@finos/legend-graph';
 import type { FileGenerationTypeOption } from '../../../stores/editor-state/GraphGenerationState.js';
 import { flowResult } from 'mobx';
-import { useApplicationStore } from '@finos/legend-application';
+import {
+  packageableElementFormatOptionLabel,
+  useApplicationStore,
+} from '@finos/legend-application';
 import type { EmbeddedDataTypeOption } from '../../../stores/editor-state/element-editor-state/data/DataEditorState.js';
 import type { DSLData_LegendStudioPlugin_Extension } from '../../../stores/DSLData_LegendStudioPlugin_Extension.js';
 import { PACKAGEABLE_ELEMENT_TYPE } from '../../../stores/shared/ModelUtil.js';
@@ -211,11 +214,15 @@ const NewPureModelConnectionDriverEditor = observer(
     // class
     const _class = newConnectionValueDriver.class;
     const classOptions = editorStore.classOptions.slice().sort(compareLabelFn);
+    const classOptionsWithTheme = classOptions.map((co) => ({
+      ...co,
+      darkMode: true,
+    }));
     const selectedClassOption = _class
-      ? { label: _class.path, value: _class }
+      ? { label: _class.path, value: _class, darkMode: true }
       : null;
     const onClassSelectionChange = (
-      val: { label: string; value: Class } | null,
+      val: { label: string; value: Class; darkMode: true } | null,
     ): void => {
       if (val) {
         newConnectionValueDriver.setClass(val.value);
@@ -240,10 +247,11 @@ const NewPureModelConnectionDriverEditor = observer(
         <div className="">
           <CustomSelectorInput
             className="panel__content__form__section__dropdown"
-            options={classOptions}
+            options={classOptionsWithTheme}
             onChange={onClassSelectionChange}
             value={selectedClassOption}
             darkMode={true}
+            formatOptionLabel={packageableElementFormatOptionLabel}
           />
         </div>
       </div>
@@ -333,6 +341,7 @@ const NewFileGenerationDriverEditor = observer(() => {
           options={options}
           onChange={onTypeSelectionChange}
           value={newConnectionDriver.typeOption}
+          darkMode={true}
         />
       </div>
     </div>