fix: use managed app icon for base if it is managed app

packages/nc-gui/components/dlg/Base/Delete.vue

@@ -52,7 +52,15 @@ const onDelete = async () => {
         v-if="base"
         class="flex flex-row items-center py-2 px-2.25 bg-nc-bg-gray-extralight rounded-lg text-nc-content-gray-subtle"
       >
-        <GeneralProjectIcon :color="parseProp(base.meta).iconColor" :type="base.type" class="nc-view-icon w-6 h-6 mx-1" />
+        <GeneralProjectIcon
+          :color="parseProp(base.meta).iconColor"
+          :type="base.type"
+          :managed-app="{
+            managed_app_master: base.managed_app_master,
+            managed_app_id: base.managed_app_id,
+          }"
+          class="nc-view-icon w-6 h-6 mx-1"
+        />
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.75"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"

packages/nc-gui/components/dlg/Table/Duplicate.vue

@@ -394,7 +394,14 @@ onMounted(() => {
               >
                 <template v-if="!!targetBase">
                   <div class="flex-1 capitalize truncate flex gap-1">
-                    <GeneralProjectIcon :color="parseProp(targetBase?.meta ?? {}).iconColor" size="small" />
+                    <GeneralProjectIcon
+                      :color="parseProp(targetBase?.meta ?? {}).iconColor"
+                      :managed-app="{
+                        managed_app_master: targetBase?.managed_app_master,
+                        managed_app_id: targetBase?.managed_app_id,
+                      }"
+                      size="small"
+                    />
                     {{ targetBase?.title }}
                   </div>
                 </template>
@@ -439,7 +446,14 @@ onMounted(() => {
                     </template>
 
                     <template #listItemExtraLeft="{ option: optionItem }">
-                      <GeneralProjectIcon :color="parseProp(optionItem.meta).iconColor" size="small" />
+                      <GeneralProjectIcon
+                        :color="parseProp(optionItem.meta).iconColor"
+                        :managed-app="{
+                          managed_app_master: optionItem.managed_app_master,
+                          managed_app_id: optionItem.managed_app_id,
+                        }"
+                        size="small"
+                      />
                     </template>
                     <template #listItemExtraRight="{ option: optionItem }">
                       <div v-if="activeBase?.id === optionItem.id" class="text-nc-content-gray-muted leading-4.5 text-xs">

packages/nc-gui/components/dlg/share-and-collaborate/View.vue

@@ -143,7 +143,15 @@ watch(showShareModal, (val) => {
 
       <div class="share-base">
         <div class="flex flex-row items-center gap-x-2 px-4 pt-3 pb-3 select-none">
-          <GeneralProjectIcon :color="parseProp(base.meta).iconColor" :type="base.type" class="nc-view-icon group-hover" />
+          <GeneralProjectIcon
+            :color="parseProp(base.meta).iconColor"
+            :type="base.type"
+            :managed-app="{
+              managed_app_master: base.managed_app_master,
+              managed_app_id: base.managed_app_id,
+            }"
+            class="nc-view-icon group-hover"
+          />
 
           <div>{{ $t('activity.shareBase.label') }}</div>
           <div

packages/nc-gui/components/general/BaseIconColorPicker.vue

@@ -7,6 +7,10 @@ const props = withDefaults(
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
     readonly?: boolean
     iconClass?: string
+    managedApp?: {
+      managed_app_master?: boolean
+      managed_app_id?: string
+    }
   }>(),
   {
     size: 'small',
@@ -75,8 +79,8 @@ watch(
         <NcTooltip placement="topLeft" :disabled="readonly || isOpen">
           <template #title> {{ $t('tooltip.changeIconColour') }} </template>
 
-          <div>
-            <GeneralProjectIcon :color="colorRef" :class="iconClass" />
+          <div class="flex items-center">
+            <GeneralProjectIcon :color="colorRef" :class="iconClass" :managed-app="managedApp" />
           </div>
         </NcTooltip>
       </div>

packages/nc-gui/components/general/ProjectIcon.vue

@@ -5,12 +5,17 @@ const props = withDefaults(
   defineProps<{
     hoverable?: boolean
     color?: string
+    managedApp?: {
+      managed_app_master?: boolean
+      managed_app_id?: string
+    }
   }>(),
   {
     color: baseIconColors[0],
+    managedApp: () => ({}),
   },
 )
-const { color } = toRefs(props)
+const { color, managedApp } = toRefs(props)
 
 const iconColor = computed(() => {
   return color.value && tinycolor(color.value).isValid()
@@ -23,10 +28,18 @@ const iconColor = computed(() => {
         shade: tinycolor(baseIconColors[0]).darken(40).toHexString(),
       }
 })
+
+const managedAppInfo = computed(() => {
+  return {
+    isManagedApp: isEeUI && !!managedApp.value?.managed_app_id,
+    isMaster: !!managedApp.value?.managed_app_master && !!managedApp.value?.managed_app_id,
+  }
+})
 </script>
 
 <template>
   <svg
+    v-if="!managedAppInfo.isManagedApp"
     xmlns="http://www.w3.org/2000/svg"
     width="20"
     height="20"
@@ -46,11 +59,20 @@ const iconColor = computed(() => {
       :fill="iconColor.tint"
     />
   </svg>
+  <GeneralIcon
+    v-else
+    icon="ncBox"
+    class="h-4.5 w-4.5 nc-base-icon text-nc-content-gray-subtle2"
+    :class="{
+      'nc-base-icon-hoverable': hoverable,
+    }"
+    :style="!managedAppInfo.isMaster ? { color: iconColor.tint } : {}"
+  />
 </template>
 
 <style scoped>
 .nc-base-icon {
-  @apply text-xl;
+  @apply flex-none text-xl;
 }
 .nc-base-icon-hoverable {
   @apply cursor-pointer !hover:bg-nc-bg-gray-medium !hover:bg-opacity-50;

packages/nc-gui/components/nc/List/BaseSelector.vue

@@ -141,7 +141,14 @@ defineExpose({
     <NcListDropdown v-model:is-open="isOpenBaseSelectDropdown" :disabled="disabled" :has-error="!!selectedBase?.ncItemDisabled">
       <div class="flex-1 flex items-center gap-2 min-w-0">
         <div v-if="selectedBase" class="min-w-5 flex items-center justify-center">
-          <GeneralProjectIcon :color="parseProp(selectedBase.meta).iconColor" size="small" />
+          <GeneralProjectIcon
+            :color="parseProp(selectedBase.meta).iconColor"
+            :managed-app="{
+              managed_app_master: selectedBase.managed_app_master,
+              managed_app_id: selectedBase.managed_app_id,
+            }"
+            size="small"
+          />
         </div>
         <NcTooltip hide-on-click class="flex-1 truncate" show-on-truncate-only>
           <span
@@ -178,7 +185,14 @@ defineExpose({
         >
           <template #listItemExtraLeft="{ option }">
             <div class="min-w-5 flex items-center justify-center">
-              <GeneralProjectIcon :color="parseProp(option.meta).iconColor" size="small" />
+              <GeneralProjectIcon
+                :color="parseProp(option.meta).iconColor"
+                :managed-app="{
+                  managed_app_master: option.managed_app_master,
+                  managed_app_id: option.managed_app_id,
+                }"
+                size="small"
+              />
             </div>
           </template>
         </NcList>

packages/nc-gui/components/nc/form-builder/input/SelectBase.vue

@@ -24,6 +24,8 @@ const baseOptions = computed(() => {
       label: base.title,
       value: base.id,
       meta: base.meta,
+      managed_app_master: base.managed_app_master,
+      managed_app_id: base.managed_app_id,
     }))
 })
 </script>
@@ -41,7 +43,14 @@ const baseOptions = computed(() => {
     <a-select-option v-for="option of baseOptions" :key="option.value" :value="option.value" :data-label="option.label">
       <div class="w-full flex gap-2 items-center" :data-testid="option.value">
         <div class="min-w-5 flex items-center justify-center">
-          <GeneralProjectIcon :color="parseProp(option.meta).iconColor" size="small" />
+          <GeneralProjectIcon
+            :color="parseProp(option.meta).iconColor"
+            :managed-app="{
+              managed_app_master: option.managed_app_master,
+              managed_app_id: option.managed_app_id,
+            }"
+            size="small"
+          />
         </div>
         <NcTooltip class="flex-1 truncate min-w-0" show-on-truncate-only>
           <template #title>

packages/nc-gui/components/project/AccessSettings.vue

@@ -569,7 +569,13 @@ onBeforeUnmount(() => {
         <NcPageHeader>
           <template #icon>
             <div class="nc-page-header-icon flex justify-center items-center h-5 w-5">
-              <GeneralBaseIconColorPicker readonly />
+              <GeneralBaseIconColorPicker
+                :managed-app="{
+                  managed_app_master: currentBase?.managed_app_master,
+                  managed_app_id: currentBase?.managed_app_id,
+                }"
+                readonly
+              />
             </div>
           </template>
           <template #title>

packages/nc-gui/components/project/View.vue

@@ -208,6 +208,10 @@ onMounted(() => {
           <GeneralProjectIcon
             :color="parseProp(currentBase?.meta).iconColor"
             :type="currentBase?.type"
+            :managed-app="{
+              managed_app_master: currentBase?.managed_app_master,
+              managed_app_id: currentBase?.managed_app_id,
+            }"
             class="h-6 w-6 md:(h-4 w-4) flex-none"
           />
           <NcTooltip

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -549,7 +549,15 @@ const handleScrollIntoView = () => {
                 </template>
                 <div class="flex w-full items-center gap-2">
                   <div class="min-w-5 flex items-center justify-center">
-                    <GeneralProjectIcon :color="parseProp(base.meta).iconColor" :type="base.type" class="nc-project-icon" />
+                    <GeneralProjectIcon
+                      :color="parseProp(base.meta).iconColor"
+                      :type="base.type"
+                      :managed-app="{
+                        managed_app_master: base.managed_app_master,
+                        managed_app_id: base.managed_app_id,
+                      }"
+                      class="nc-project-icon"
+                    />
                   </div>
                   <NcTooltip class="flex-1 truncate" show-on-truncate-only>
                     <template #title>{{ base.title }}</template>

packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue

@@ -83,7 +83,15 @@ const viewModeInfo = computed(() => {
                 </span>
               </template>
 
-              <GeneralProjectIcon :type="base?.type" :color="parseProp(base.meta).iconColor" class="!grayscale min-w-4" />
+              <GeneralProjectIcon
+                :type="base?.type"
+                :color="parseProp(base.meta).iconColor"
+                :managed-app="{
+                  managed_app_master: base?.managed_app_master,
+                  managed_app_id: base?.managed_app_id,
+                }"
+                class="!grayscale min-w-4"
+              />
             </NcTooltip>
             <template v-if="isSharedBase">
               <NcTooltip

packages/nc-gui/components/smartsheet/topbar/ProjectListDropdown.vue

@@ -59,7 +59,16 @@ const handleNavigateToProject = async (base: NcProject) => {
         @change="handleNavigateToProject"
       >
         <template #listItem="{ option }">
-          <GeneralBaseIconColorPicker :type="option?.type" :model-value="parseProp(option.meta).iconColor" size="xsmall" readonly>
+          <GeneralBaseIconColorPicker
+            :type="option?.type"
+            :model-value="parseProp(option.meta).iconColor"
+            :managed-app="{
+              managed_app_master: option?.managed_app_master,
+              managed_app_id: option?.managed_app_id,
+            }"
+            size="xsmall"
+            readonly
+          >
           </GeneralBaseIconColorPicker>
           <NcTooltip class="truncate flex-1" show-on-truncate-only>
             <template #title>

packages/nc-gui/components/workspace/integrations/connect/SchemaInput.vue

@@ -69,6 +69,10 @@ onMounted(() => {
                 <GeneralBaseIconColorPicker
                   :type="option?.type"
                   :model-value="parseProp(option.meta).iconColor"
+                  :managed-app="{
+                    managed_app_master: option?.managed_app_master,
+                    managed_app_id: option?.managed_app_id,
+                  }"
                   size="xsmall"
                   readonly
                 >