minor refactor post finos#1240

akphi · Jun 28, 2022 · 9665121 · 9665121
1 parent 3f644e3
commit 9665121
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 45 deletions.
diff --git a/packages/legend-application/src/components/shared/PackageableElementOption.tsx b/packages/legend-application/src/components/shared/PackageableElementOption.tsx
diff --git a/packages/legend-application/src/components/shared/PackageableElementOptionRenderer.tsx b/packages/legend-application/src/components/shared/PackageableElementOptionRenderer.tsx
@@ -0,0 +1,40 @@
+/**
+ * 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 type { PackageableElement } from '@finos/legend-graph';
+import type { PackageableElementOption } from '../../index.js';
+
+export const getPackageableElementOptionalFormatter = (props?: {
+  darkMode?: boolean;
+}): ((
+  option: PackageableElementOption<PackageableElement>,
+) => React.ReactNode) =>
+  function PackageableElementOptionLabel(
+    option: PackageableElementOption<PackageableElement>,
+  ): React.ReactNode {
+    const className = props?.darkMode
+      ? 'packageable-element-format-option-label--dark'
+      : 'packageable-element-format-option-label';
+
+    return (
+      <div className={className}>
+        <div className={`${className}__name`}>{option.label}</div>
+        {option.value.package && (
+          <div className={`${className}__tag`}>{option.value.path}</div>
+        )}
+      </div>
+    );
+  };
diff --git a/packages/legend-application/src/index.ts b/packages/legend-application/src/index.ts
@@ -48,7 +48,7 @@ export * from './components/shared/TextInputEditor.js';
 export * from './components/shared/LambdaEditor.js';
 export * from './components/shared/BasicValueSpecificationEditor.js';
 export * from './components/shared/LambdaParameterValuesEditor.js';
-export * from './components/shared/PackageableElementOption.js';
+export * from './components/shared/PackageableElementOptionRenderer.js';
 export * from './components/shared/execution-plan-viewer/ExecutionPlanViewer.js';
 
 export { LambdaEditorState } from './stores/shared/LambdaEditorState.js';

diff --git a/.../legend-studio/src/components/editor/edit-panel/mapping-editor/NewMappingElementModal.tsx b/.../legend-studio/src/components/editor/edit-panel/mapping-editor/NewMappingElementModal.tsx
@@ -45,7 +45,7 @@ import {
   Association,
 } from '@finos/legend-graph';
 import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelUtil.js';
-import { packageableElementFormatOptionLabel } from '@finos/legend-application';
+import { getPackageableElementOptionalFormatter } from '@finos/legend-application';
 
 interface ClassMappingSubTypeOption {
   label: string;
@@ -233,7 +233,7 @@ export const NewMappingElementModal = observer(() => {
               filterOption={filterOption}
               onChange={handleTargetChange}
               value={selectedOption}
-              formatOptionLabel={packageableElementFormatOptionLabel}
+              formatOptionLabel={getPackageableElementOptionalFormatter()}
               placeholder="Choose a target"
               isClearable={true}
             />

diff --git a/packages/legend-studio/src/components/editor/edit-panel/uml-editor/ClassEditor.tsx b/packages/legend-studio/src/components/editor/edit-panel/uml-editor/ClassEditor.tsx
@@ -85,7 +85,7 @@ import {
 import { StudioLambdaEditor } from '../../../shared/StudioLambdaEditor.js';
 import {
   ApplicationNavigationContextData,
-  packageableElementFormatOptionLabel,
+  getPackageableElementOptionalFormatter,
   useApplicationNavigationContext,
   useApplicationStore,
 } from '@finos/legend-application';
@@ -242,7 +242,7 @@ const PropertyBasicEditor = observer(
             value={selectedPropertyType}
             placeholder={'Choose a data type or enumeration'}
             filterOption={filterOption}
-            formatOptionLabel={packageableElementFormatOptionLabel}
+            formatOptionLabel={getPackageableElementOptionalFormatter()}
           />
         )}
         {!isIndirectProperty && !isReadOnly && !isEditingType && (
@@ -519,7 +519,7 @@ const DerivedPropertyBasicEditor = observer(
               value={selectedPropertyType}
               placeholder="Choose a data type or enumeration"
               filterOption={filterOption}
-              formatOptionLabel={packageableElementFormatOptionLabel}
+              formatOptionLabel={getPackageableElementOptionalFormatter()}
             />
           )}
           {!isInheritedProperty && !isReadOnly && !isEditingType && (
@@ -809,7 +809,7 @@ const SuperTypeEditor = observer(
           value={selectedType}
           placeholder={'Choose a class'}
           filterOption={filterOption}
-          formatOptionLabel={packageableElementFormatOptionLabel}
+          formatOptionLabel={getPackageableElementOptionalFormatter()}
         />
         <button
           className="uml-element-editor__basic__detail-btn"

diff --git a/packages/legend-studio/src/components/editor/side-bar/CreateNewElementModal.tsx b/packages/legend-studio/src/components/editor/side-bar/CreateNewElementModal.tsx
@@ -42,7 +42,7 @@ import {
 import type { FileGenerationTypeOption } from '../../../stores/editor-state/GraphGenerationState.js';
 import { flowResult } from 'mobx';
 import {
-  packageableElementFormatOptionLabel,
+  getPackageableElementOptionalFormatter,
   useApplicationStore,
 } from '@finos/legend-application';
 import type { EmbeddedDataTypeOption } from '../../../stores/editor-state/element-editor-state/data/DataEditorState.js';
@@ -251,7 +251,9 @@ const NewPureModelConnectionDriverEditor = observer(
             onChange={onClassSelectionChange}
             value={selectedClassOption}
             darkMode={true}
-            formatOptionLabel={packageableElementFormatOptionLabel}
+            formatOptionLabel={getPackageableElementOptionalFormatter({
+              darkMode: true,
+            })}
           />
         </div>
       </div>