From 2b4a3c1d6a3c7764e2933c3e0b4aecdcd7f42360 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:58:07 +0530
Subject: [PATCH] fix(nc-gui): integration pr merge conflicts (#9170)

---
 .../workspace/integrations/List.vue           | 842 ------------------
 .../integrations/newAvailableList.vue         | 237 -----
 2 files changed, 1079 deletions(-)
 delete mode 100644 packages/nc-gui/components/workspace/integrations/List.vue
 delete mode 100644 packages/nc-gui/components/workspace/integrations/newAvailableList.vue

diff --git a/packages/nc-gui/components/workspace/integrations/List.vue b/packages/nc-gui/components/workspace/integrations/List.vue
deleted file mode 100644
index 02c096a730..0000000000
--- a/packages/nc-gui/components/workspace/integrations/List.vue
+++ /dev/null
@@ -1,842 +0,0 @@
-<script lang="ts" setup>
-import type { IntegrationType, UserType, WorkspaceUserType } from 'nocodb-sdk'
-import dayjs from 'dayjs'
-
-type SortFields = 'title' | 'sub_type' | 'created_at' | 'created_by' | 'source_count'
-
-const {
-  integrations,
-  isLoadingIntegrations,
-  deleteConfirmText,
-  integrationPaginationData,
-  successConfirmModal,
-  searchQuery,
-  loadIntegrations,
-  deleteIntegration,
-  editIntegration,
-  duplicateIntegration,
-  getIntegration,
-} = useIntegrationStore()
-
-const { $api, $e } = useNuxtApp()
-
-const { allCollaborators } = storeToRefs(useWorkspace())
-
-const isDeleteIntegrationModalOpen = ref(false)
-const toBeDeletedIntegration = ref<
-  | (IntegrationType & {
-      sources?: {
-        id: string
-        alias: string
-        project_title: string
-        base_id: string
-      }[]
-    })
-  | null
->(null)
-
-const isLoadingGetLinkedSources = ref(false)
-
-const tableWrapper = ref<HTMLDivElement>()
-
-const titleHeaderCellRef = ref<HTMLDivElement>()
-
-const orderBy = ref<Partial<Record<SortFields, 'asc' | 'desc' | undefined>>>({})
-
-const localCollaborators = ref<User[] | UserType[]>([])
-
-const { width } = useElementBounding(titleHeaderCellRef)
-
-const collaboratorsMap = computed<Map<string, (WorkspaceUserType & { id: string }) | User | UserType>>(() => {
-  const map = new Map()
-
-  ;(isEeUI ? allCollaborators.value : localCollaborators.value)?.forEach((coll) => {
-    if (coll?.id) {
-      map.set(coll.id, coll)
-    }
-  })
-  return map
-})
-
-const filteredIntegrations = computed(() =>
-  (integrations.value || []).sort((a, b) => {
-    if (orderBy.value.title) {
-      if (a.title && b.title) {
-        return orderBy.value.title === 'asc' ? (a.title < b.title ? -1 : 1) : a.title > b.title ? -1 : 1
-      }
-    } else if (orderBy.value.sub_type) {
-      if (a.sub_type && b.sub_type) {
-        return orderBy.value.sub_type === 'asc' ? (a.sub_type < b.sub_type ? -1 : 1) : a.sub_type > b.sub_type ? -1 : 1
-      }
-    } else if (orderBy.value.created_at) {
-      if (a?.created_at && b?.created_at) {
-        return orderBy.value.created_at === 'asc'
-          ? dayjs(a.created_at).local().isBefore(dayjs(b.created_at).local())
-            ? -1
-            : 1
-          : dayjs(a.created_at).local().isAfter(dayjs(b.created_at).local())
-          ? -1
-          : 1
-      }
-    } else if (orderBy.value.created_by) {
-      if (a.created_by && b.created_by && collaboratorsMap.value.get(a.created_by) && collaboratorsMap.value.get(b.created_by)) {
-        return orderBy.value.created_by === 'asc'
-          ? collaboratorsMap.value.get(a.created_by)?.email < collaboratorsMap.value.get(b.created_by)?.email
-            ? -1
-            : 1
-          : collaboratorsMap.value.get(a.created_by)?.email > collaboratorsMap.value.get(b.created_by)?.email
-          ? -1
-          : 1
-      }
-    } else if (orderBy.value.source_count) {
-      if (a.source_count !== undefined && b.source_count !== undefined) {
-        return orderBy.value.source_count === 'asc' ? a.source_count - b.source_count : b.source_count - a.source_count
-      }
-    }
-    return 0
-  }),
-)
-
-async function loadConnections(
-  page = integrationPaginationData.value.page,
-  limit = integrationPaginationData.value.pageSize,
-  updateCurrentPage = true,
-) {
-  try {
-    if (updateCurrentPage) {
-      integrationPaginationData.value.page = 1
-    }
-
-    await loadIntegrations(undefined, undefined, updateCurrentPage ? 1 : page, limit)
-  } catch {}
-}
-
-const handleChangePage = async (page: number) => {
-  integrationPaginationData.value.page = page
-  await loadConnections(undefined, undefined, false)
-}
-
-const { onLeft, onRight, onUp, onDown } = usePaginationShortcuts({
-  paginationDataRef: integrationPaginationData,
-  changePage: handleChangePage,
-  isViewDataLoading: isLoadingIntegrations,
-})
-
-const openDeleteIntegration = async (source: IntegrationType) => {
-  isLoadingGetLinkedSources.value = true
-
-  $e('c:integration:delete')
-  deleteConfirmText.value = null
-  isDeleteIntegrationModalOpen.value = true
-  toBeDeletedIntegration.value = source
-
-  const connectionDetails = await getIntegration(source, {
-    includeSources: true,
-  })
-  toBeDeletedIntegration.value.sources = connectionDetails?.sources || []
-
-  isLoadingGetLinkedSources.value = false
-}
-
-const onDeleteConfirm = async () => {
-  await deleteIntegration(toBeDeletedIntegration.value, true)
-}
-
-const loadOrgUsers = async () => {
-  try {
-    const response: any = await $api.orgUsers.list()
-
-    if (!response?.list) return
-
-    localCollaborators.value = response.list as UserType[]
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const updateOrderBy = (field: SortFields) => {
-  if (!integrations.value?.length) return
-
-  // Only single field sort supported, other old field sort config will reset
-  if (orderBy.value?.[field] === 'asc') {
-    orderBy.value = {
-      [field]: 'desc',
-    }
-  } else if (orderBy.value?.[field] === 'desc') {
-    orderBy.value = {
-      [field]: undefined,
-    }
-  } else {
-    orderBy.value = {
-      [field]: 'asc',
-    }
-  }
-}
-
-const handleSearchConnection = useDebounceFn(() => {
-  loadConnections()
-}, 250)
-
-const renderAltOrOptlKey = () => {
-  return isMac() ? '⌥' : 'ALT'
-}
-
-const isUserDeleted = (userId?: string) => {
-  if (!userId) return false
-
-  if (isEeUI) {
-    return !!collaboratorsMap.value.get(userId)?.deleted
-  } else {
-    return !collaboratorsMap.value.get(userId)?.email
-  }
-}
-
-useEventListener(tableWrapper, 'scroll', () => {
-  const stickyHeaderCell = tableWrapper.value?.querySelector('th.cell-title')
-  const nonStickyHeaderFirstCell = tableWrapper.value?.querySelector('th.cell-type')
-
-  if (!stickyHeaderCell?.getBoundingClientRect().right || !nonStickyHeaderFirstCell?.getBoundingClientRect().left) {
-    return
-  }
-
-  if (nonStickyHeaderFirstCell?.getBoundingClientRect().left < stickyHeaderCell?.getBoundingClientRect().right) {
-    tableWrapper.value?.classList.add('sticky-shadow')
-  } else {
-    tableWrapper.value?.classList.remove('sticky-shadow')
-  }
-})
-
-onMounted(async () => {
-  if (!isEeUI) {
-    await Promise.allSettled([!integrations.value.length && loadIntegrations(), loadOrgUsers()])
-  } else if (!integrations.value.length) {
-    await loadIntegrations()
-  }
-})
-// Keyboard shortcuts for pagination
-onKeyStroke('ArrowLeft', onLeft)
-onKeyStroke('ArrowRight', onRight)
-onKeyStroke('ArrowUp', onUp)
-onKeyStroke('ArrowDown', onDown)
-</script>
-
-<template>
-  <div class="h-full flex flex-col gap-6 nc-workspace-connections">
-    <div class="flex justify-between gap-12">
-      <div class="text-sm font-normal text-gray-600">
-        <div>
-          Manage connections for your integrations.
-          <a target="_blank" rel="noopener noreferrer"> Learn more </a>
-        </div>
-      </div>
-      <div class="flex items-center justify-end gap-3 mx-1">
-        <a-input
-          v-model:value="searchQuery"
-          type="text"
-          class="nc-search-integration-input !min-w-[300px] nc-input-sm flex-none"
-          :placeholder="`${$t('general.search')} ${$t('general.connections').toLowerCase()}`"
-          allow-clear
-          @input="handleSearchConnection"
-        >
-          <template #prefix>
-            <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500" />
-          </template>
-        </a-input>
-      </div>
-    </div>
-    <div class="table-container relative flex-1">
-      <div
-        ref="tableWrapper"
-        class="nc-workspace-integration-table relative nc-scrollbar-thin !overflow-auto max-h-[calc(100%_-_40px)]"
-        :class="{
-          'h-full': filteredIntegrations?.length,
-        }"
-      >
-        <table class="!sticky top-0 z-5 w-full">
-          <thead>
-            <tr>
-              <th
-                class="cell-title !hover:bg-gray-100 select-none cursor-pointer"
-                :class="{
-                  'cursor-not-allowed': !filteredIntegrations?.length,
-                  '!text-gray-700': orderBy.title,
-                }"
-                @click="updateOrderBy('title')"
-              >
-                <div ref="titleHeaderCellRef" class="flex items-center gap-3">
-                  <div>Name</div>
-                  <GeneralIcon
-                    v-if="orderBy.title"
-                    icon="chevronDown"
-                    class="flex-none"
-                    :class="{
-                      'transform rotate-180': orderBy?.title === 'asc',
-                    }"
-                  />
-                  <GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
-                </div>
-              </th>
-              <th
-                class="cell-type !hover:bg-gray-100 select-none cursor-pointer"
-                :class="{
-                  'cursor-not-allowed': !filteredIntegrations?.length,
-                  '!text-gray-700': orderBy.sub_type,
-                }"
-                @click="updateOrderBy('sub_type')"
-              >
-                <div class="flex items-center gap-3">
-                  <div>Type</div>
-                  <GeneralIcon
-                    v-if="orderBy.sub_type"
-                    icon="chevronDown"
-                    class="flex-none"
-                    :class="{
-                      'transform rotate-180': orderBy.sub_type === 'asc',
-                    }"
-                  />
-                  <GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
-                </div>
-              </th>
-
-              <th
-                class="cell-created-date !hover:bg-gray-100 select-none cursor-pointer"
-                :class="{
-                  'cursor-not-allowed': !filteredIntegrations?.length,
-                  '!text-gray-700': orderBy.created_at,
-                }"
-                @click="updateOrderBy('created_at')"
-              >
-                <div class="flex items-center gap-3">
-                  <div>Date added</div>
-                  <GeneralIcon
-                    v-if="orderBy.created_at"
-                    icon="chevronDown"
-                    class="flex-none"
-                    :class="{
-                      'transform rotate-180': orderBy.created_at === 'asc',
-                    }"
-                  />
-                  <GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
-                </div>
-              </th>
-              <th
-                class="cell-added-by !hover:bg-gray-100 select-none cursor-pointer"
-                :class="{
-                  'cursor-not-allowed': !filteredIntegrations?.length,
-                  '!text-gray-700': orderBy.created_by,
-                }"
-                @click="updateOrderBy('created_by')"
-              >
-                <div class="flex items-center gap-3">
-                  <div>Added by</div>
-                  <GeneralIcon
-                    v-if="orderBy.created_by"
-                    icon="chevronDown"
-                    class="flex-none"
-                    :class="{
-                      'transform rotate-180': orderBy.created_by === 'asc',
-                    }"
-                  />
-                  <GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
-                </div>
-              </th>
-              <th
-                class="cell-usage !hover:bg-gray-100 select-none cursor-pointer"
-                :class="{
-                  'cursor-not-allowed': !filteredIntegrations?.length,
-                }"
-                @click="updateOrderBy('source_count')"
-              >
-                <div class="flex items-center gap-3">
-                  <div>Usage</div>
-                  <GeneralIcon
-                    v-if="orderBy?.source_count"
-                    icon="chevronDown"
-                    class="flex-none"
-                    :class="{
-                      'transform rotate-180': orderBy?.source_count === 'asc',
-                    }"
-                  />
-                  <GeneralIcon v-else icon="chevronUpDown" class="flex-none" />
-                </div>
-              </th>
-              <th class="cell-actions">
-                <div>Actions</div>
-              </th>
-            </tr>
-          </thead>
-        </table>
-        <template v-if="filteredIntegrations?.length">
-          <table class="h-full max-h-[calc(100%_-_55px)] w-full">
-            <tbody>
-              <tr v-for="integration of filteredIntegrations" :key="integration.id" @click="editIntegration(integration)">
-                <td class="cell-title">
-                  <div
-                    class="gap-3"
-                    :style="{
-                      maxWidth: `${width}px`,
-                    }"
-                  >
-                    <NcTooltip placement="bottom" class="truncate" show-on-truncate-only>
-                      <template #title> {{ integration.title }}</template>
-                      {{ integration.title }}
-                    </NcTooltip>
-                    <span v-if="integration.is_private">
-                      <NcBadge :border="false" class="text-primary !h-4.5 bg-brand-50 text-xs">{{
-                        $t('general.private')
-                      }}</NcBadge>
-                    </span>
-                  </div>
-                </td>
-                <td class="cell-type">
-                  <div>
-                    <NcBadge rounded="lg" class="flex items-center gap-2 px-2 py-1 !h-7 truncate">
-                      <WorkspaceIntegrationsIcon
-                        v-if="integration.sub_type"
-                        :integration-type="integration.sub_type"
-                        size="xs"
-                        class="!p-0 !bg-transparent"
-                      />
-                      <NcTooltip placement="bottom" show-on-truncate-only class="text-sm truncate">
-                        <template #title> {{ clientTypesMap[integration?.sub_type]?.text || integration?.sub_type }}</template>
-
-                        {{
-                          integration.sub_type && clientTypesMap[integration.sub_type]
-                            ? clientTypesMap[integration.sub_type]?.text
-                            : integration.sub_type
-                        }}
-                      </NcTooltip>
-                    </NcBadge>
-                  </div>
-                </td>
-                <td class="cell-created-date">
-                  <div>
-                    <NcTooltip placement="bottom" show-on-truncate-only>
-                      <template #title> {{ dayjs(integration.created_at).local().format('DD MMM YYYY') }}</template>
-
-                      {{ dayjs(integration.created_at).local().format('DD MMM YYYY') }}
-                    </NcTooltip>
-                  </div>
-                </td>
-                <td class="cell-added-by">
-                  <div>
-                    <NcTooltip :disabled="!isUserDeleted(integration.created_by)" class="w-full">
-                      <template #title>
-                        {{ `User not part of this ${isEeUI ? 'workspace' : 'organisation'} anymore` }}
-                      </template>
-                      <div
-                        v-if="integration.created_by && collaboratorsMap.get(integration.created_by)?.email"
-                        class="w-full flex gap-3 items-center"
-                      >
-                        <GeneralUserIcon
-                          :email="collaboratorsMap.get(integration.created_by)?.email"
-                          size="base"
-                          class="flex-none"
-                          :class="{
-                            '!grayscale': isUserDeleted(integration.created_by),
-                          }"
-                          :style="
-                            isUserDeleted(integration.created_by)
-                              ? {
-                                  filter: 'grayscale(100%) brightness(115%)',
-                                }
-                              : {}
-                          "
-                        />
-                        <div class="flex-1 flex flex-col max-w-[calc(100%_-_44px)]">
-                          <div class="w-full flex gap-3">
-                            <NcTooltip
-                              class="text-sm !leading-5 capitalize font-semibold truncate"
-                              :class="{
-                                'text-gray-800': !isUserDeleted(integration.created_by),
-                                'text-gray-500': isUserDeleted(integration.created_by),
-                              }"
-                              :disabled="isUserDeleted(integration.created_by)"
-                              show-on-truncate-only
-                              placement="bottom"
-                            >
-                              <template #title>
-                                {{
-                                  collaboratorsMap.get(integration.created_by)?.display_name ||
-                                  collaboratorsMap
-                                    .get(integration.created_by)
-                                    ?.email?.slice(0, collaboratorsMap.get(integration.created_by)?.email.indexOf('@'))
-                                }}
-                              </template>
-                              {{
-                                collaboratorsMap.get(integration.created_by)?.display_name ||
-                                collaboratorsMap
-                                  .get(integration.created_by)
-                                  ?.email?.slice(0, collaboratorsMap.get(integration.created_by)?.email.indexOf('@'))
-                              }}
-                            </NcTooltip>
-                          </div>
-                          <NcTooltip
-                            class="text-xs !leading-4 truncate"
-                            :class="{
-                              'text-gray-600': !isUserDeleted(integration.created_by),
-                              'text-gray-500': isUserDeleted(integration.created_by),
-                            }"
-                            :disabled="isUserDeleted(integration.created_by)"
-                            show-on-truncate-only
-                            placement="bottom"
-                          >
-                            <template #title>
-                              {{ collaboratorsMap.get(integration.created_by)?.email }}
-                            </template>
-                            {{ collaboratorsMap.get(integration.created_by)?.email }}
-                          </NcTooltip>
-                        </div>
-                      </div>
-                      <div v-else class="w-full truncate text-gray-500">{{ integration.created_by }} </div>
-                    </NcTooltip>
-                  </div>
-                </td>
-                <td class="cell-usage">
-                  <div>{{ integration?.source_count ?? 0 }}</div>
-                </td>
-                <td class="cell-actions" @click.stop>
-                  <div class="justify-end">
-                    <NcDropdown placement="bottomRight">
-                      <NcButton size="small" type="secondary">
-                        <GeneralIcon icon="threeDotVertical" />
-                      </NcButton>
-                      <template #overlay>
-                        <NcMenu>
-                          <NcMenuItem @click="editIntegration(integration)">
-                            <GeneralIcon class="text-gray-800" icon="edit" />
-                            <span>{{ $t('general.edit') }}</span>
-                          </NcMenuItem>
-                          <NcMenuItem @click="duplicateIntegration(integration)">
-                            <GeneralIcon class="text-gray-800" icon="duplicate" />
-                            <span>{{ $t('general.duplicate') }}</span>
-                          </NcMenuItem>
-                          <NcDivider />
-                          <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="openDeleteIntegration(integration)">
-                            <GeneralIcon icon="delete" />
-                            {{ $t('general.delete') }}
-                          </NcMenuItem>
-                        </NcMenu>
-                      </template>
-                    </NcDropdown>
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </template>
-      </div>
-
-      <div
-        v-show="isLoadingIntegrations"
-        class="flex items-center justify-center absolute left-0 top-0 w-full h-full z-10 pb-10 pointer-events-none"
-      >
-        <div class="flex flex-col justify-center items-center gap-2">
-          <GeneralLoader size="xlarge" />
-          <span class="text-center">{{ $t('general.loading') }}</span>
-        </div>
-      </div>
-
-      <div
-        v-if="!isLoadingIntegrations && (!integrations?.length || !filteredIntegrations.length)"
-        class="flex-none integration-table-empty flex items-center justify-center py-8 px-6 h-full max-h-[calc(100%_-_94px)]"
-      >
-        <div
-          v-if="integrations?.length && !filteredIntegrations.length"
-          class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6 text-center"
-        >
-          <img
-            src="~assets/img/placeholder/no-search-result-found.png"
-            class="!w-[164px] flex-none"
-            alt="No search results found"
-          />
-
-          {{ $t('title.noResultsMatchedYourSearch') }}
-        </div>
-
-        <div v-else class="flex-none text-center flex flex-col items-center gap-3">
-          <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" class="!my-0" />
-        </div>
-      </div>
-      <div
-        v-if="integrationPaginationData.totalRows"
-        class="flex flex-row justify-center items-center bg-gray-50 min-h-10"
-        :class="{
-          'pointer-events-none': isLoadingIntegrations,
-        }"
-      >
-        <div class="flex justify-between items-center w-full px-6">
-          <div>&nbsp;</div>
-          <NcPagination
-            v-model:current="integrationPaginationData.page"
-            v-model:page-size="integrationPaginationData.pageSize"
-            :total="+integrationPaginationData.totalRows"
-            show-size-changer
-            :use-stored-page-size="false"
-            :prev-page-tooltip="`${renderAltOrOptlKey()}+←`"
-            :next-page-tooltip="`${renderAltOrOptlKey()}+→`"
-            :first-page-tooltip="`${renderAltOrOptlKey()}+↓`"
-            :last-page-tooltip="`${renderAltOrOptlKey()}+↑`"
-            @update:current="loadConnections(undefined, undefined, false)"
-            @update:page-size="loadConnections(integrationPaginationData.page, $event, false)"
-          />
-          <div class="text-gray-500 text-xs">
-            {{ integrationPaginationData.totalRows }} {{ integrationPaginationData.totalRows === 1 ? 'record' : 'records' }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <GeneralDeleteModal
-      v-model:visible="isDeleteIntegrationModalOpen"
-      :entity-name="$t('general.connection')"
-      :on-delete="onDeleteConfirm"
-      :delete-label="$t('general.delete')"
-      :show-default-delete-msg="!isLoadingGetLinkedSources && !toBeDeletedIntegration?.sources?.length"
-    >
-      <template #entity-preview>
-        <template v-if="isLoadingGetLinkedSources">
-          <div class="rounded-lg overflow-hidden">
-            <a-skeleton-input active class="h-9 !rounded-md !w-full"></a-skeleton-input>
-          </div>
-          <div class="rounded-lg overflow-hidden mt-2">
-            <a-skeleton-input active class="h-9 !rounded-md !w-full"></a-skeleton-input>
-          </div>
-        </template>
-        <div v-else-if="toBeDeletedIntegration" class="w-full flex flex-col text-gray-800">
-          <div class="flex flex-row items-center py-2 px-3.25 bg-gray-50 rounded-lg text-gray-700 mb-4">
-            <WorkspaceIntegrationsIcon
-              :integration-type="toBeDeletedIntegration.sub_type"
-              size="xs"
-              class="!p-0 !bg-transparent"
-            />
-            <div
-              class="text-ellipsis overflow-hidden select-none w-full pl-3"
-              :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-            >
-              {{ toBeDeletedIntegration.title }}
-            </div>
-          </div>
-          <div v-if="toBeDeletedIntegration?.sources?.length" class="flex flex-col pb-2 text-small leading-[18px] text-gray-500">
-            <div class="mb-1">Following external data sources using this connection will also be removed</div>
-            <ul class="!list-disc ml-6 mb-0">
-              <li
-                v-for="(source, idx) of toBeDeletedIntegration.sources"
-                :key="idx"
-                class="marker:text-gray-500 !marker:(flex items-center !-mt-1)"
-              >
-                <div class="flex items-center gap-1">
-                  <div class="flex items-center">
-                    &nbsp;
-                    <GeneralProjectIcon
-                      type="database"
-                      class="!grayscale min-w-4 flex-none -ml-1"
-                      :style="{
-                        filter: 'grayscale(100%) brightness(115%)',
-                      }"
-                    />
-                  </div>
-
-                  <NcTooltip class="!truncate !max-w-[45%] flex-none" show-on-truncate-only>
-                    <template #title>
-                      {{ source.project_title }}
-                    </template>
-
-                    {{ source.project_title }}
-                  </NcTooltip>
-                  >
-                  <GeneralBaseLogo
-                    class="!grayscale min-w-4 flex-none"
-                    :style="{
-                      filter: 'grayscale(100%) brightness(115%)',
-                    }"
-                  />
-
-                  <NcTooltip class="truncate !max-w-[45%] capitalize" show-on-truncate-only>
-                    <template #title>
-                      {{ source.alias }}
-                    </template>
-
-                    {{ source.alias }}
-                  </NcTooltip>
-                </div>
-              </li>
-            </ul>
-            <div class="mt-2">Do you want to proceed anyway?</div>
-          </div>
-        </div>
-      </template>
-    </GeneralDeleteModal>
-
-    <NcModal v-model:visible="successConfirmModal.isOpen" centered size="small" @keydown.esc="successConfirmModal.isOpen = false">
-      <div class="flex gap-4">
-        <div>
-          <GeneralIcon icon="circleCheckSolid" class="flex-none !text-green-700 mt-0.5 !h-6 !w-6" />
-        </div>
-
-        <div class="flex flex-col gap-3">
-          <div class="flex">
-            <h3 class="!m-0 text-base font-weight-700 flex-1">
-              {{ successConfirmModal.title }}
-            </h3>
-            <NcButton size="xsmall" type="text" @click="successConfirmModal.isOpen = false">
-              <GeneralIcon icon="close" class="text-gray-600" />
-            </NcButton>
-          </div>
-          <div class="text-sm text-gray-700">
-            {{ successConfirmModal.description }}
-          </div>
-
-          <!-- Todo: add link  -->
-          <a target="_blank" rel="noopener noreferrer"> Learn more </a>
-        </div>
-      </div>
-    </NcModal>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.source-card-link {
-  @apply !text-black !no-underline;
-
-  .nc-new-integration-type-title {
-    @apply text-sm font-weight-600 text-gray-600;
-  }
-}
-
-.source-card {
-  @apply flex items-center border-1 rounded-lg p-3 cursor-pointer hover:bg-gray-50;
-  width: 288px;
-
-  .name {
-    @apply ml-4 text-md font-semibold;
-  }
-}
-
-:deep(.ant-input-affix-wrapper.nc-search-integration-input) {
-  &:not(:has(.ant-input-clear-icon-hidden)):has(.ant-input-clear-icon) {
-    @apply border-[var(--ant-primary-5)];
-  }
-}
-
-.nc-new-integration-type-wrapper {
-  @apply flex flex-col gap-3;
-}
-
-.table-container {
-  @apply border-1 border-gray-200 rounded-lg overflow-hidden w-full;
-
-  .nc-workspace-integration-table {
-    &.sticky-shadow {
-      th,
-      td {
-        &.cell-title {
-          @apply border-r-1 border-gray-200;
-        }
-      }
-    }
-
-    &:not(.sticky-shadow) {
-      th,
-      td {
-        &.cell-title {
-          @apply border-r-1 border-transparent;
-        }
-      }
-    }
-
-    thead {
-      @apply w-full;
-      th {
-        @apply bg-gray-50 text-sm text-gray-500 font-weight-500;
-
-        &.cell-title {
-          @apply sticky left-0 z-4 bg-gray-50;
-        }
-      }
-    }
-
-    tbody {
-      @apply w-full;
-      tr {
-        @apply cursor-pointer;
-
-        td {
-          @apply text-sm text-gray-600;
-
-          &.cell-title {
-            @apply sticky left-0 z-4 bg-white !text-gray-800 font-semibold;
-          }
-        }
-      }
-    }
-
-    tr {
-      @apply h-[54px] flex border-b-1 border-gray-200 w-full;
-
-      &:hover td {
-        @apply !bg-gray-50;
-      }
-
-      &.selected td {
-        @apply !bg-gray-50;
-      }
-
-      th,
-      td {
-        @apply h-full;
-
-        & > div {
-          @apply px-6 h-full flex-1 flex items-center;
-        }
-
-        &.cell-title {
-          @apply flex-1 sticky left-0 z-5;
-          & > div {
-            @apply min-w-[250px];
-          }
-        }
-
-        &.cell-added-by {
-          @apply basis-[20%];
-          & > div {
-            @apply min-w-[250px];
-          }
-        }
-
-        &.cell-type {
-          @apply basis-[20%];
-          & > div {
-            @apply min-w-[178px];
-          }
-        }
-
-        &.cell-created-date {
-          @apply basis-[20%];
-          & > div {
-            @apply min-w-[158px];
-          }
-        }
-
-        &.cell-usage {
-          @apply w-[120px];
-          & > div {
-            @apply min-w-[118px];
-          }
-        }
-
-        &.cell-actions {
-          @apply w-[100px];
-          & > div {
-            @apply min-w-[98px];
-          }
-        }
-      }
-    }
-  }
-}
-
-.cell-header {
-  @apply text-xs font-semibold text-gray-500;
-}
-</style>
diff --git a/packages/nc-gui/components/workspace/integrations/newAvailableList.vue b/packages/nc-gui/components/workspace/integrations/newAvailableList.vue
deleted file mode 100644
index 811d47e7e3..0000000000
--- a/packages/nc-gui/components/workspace/integrations/newAvailableList.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<script lang="ts" setup>
-import NcModal from '~/components/nc/Modal.vue'
-
-const props = withDefaults(
-  defineProps<{
-    isModal?: boolean
-  }>(),
-  {
-    isModal: false,
-  },
-)
-
-const { isModal } = props
-
-const { pageMode, IntegrationsPageMode, integrationType, requestIntegration, addIntegration, saveIntegraitonRequest } =
-  useIntegrationStore()
-
-const isAddNewIntegrationModalOpen = computed({
-  get: () => {
-    return pageMode.value === IntegrationsPageMode.LIST
-  },
-  set: (value: boolean) => {
-    if (value) {
-      pageMode.value = IntegrationsPageMode.LIST
-    } else {
-      pageMode.value = null
-    }
-  },
-})
-
-const handleAddIntegration = (type: typeof integrationType) => {
-  if (requestIntegration.value.isOpen) {
-    requestIntegration.value.isOpen = false
-  }
-
-  addIntegration(type)
-}
-</script>
-
-<template>
-  <component
-    :is="isModal ? NcModal : 'div'"
-    v-model:visible="isAddNewIntegrationModalOpen"
-    centered
-    size="large"
-    :class="{
-      'h-full': !isModal,
-    }"
-    wrap-class-name="nc-modal-available-integrations-list"
-    @keydown.esc="isAddNewIntegrationModalOpen = false"
-  >
-    <div class="h-full flex flex-col">
-      <div v-if="isModal" class="p-4 w-full flex items-center justify-between gap-3 border-b-1 border-gray-200">
-        <NcButton type="text" size="small" @click="isAddNewIntegrationModalOpen = false">
-          <GeneralIcon icon="arrowLeft" />
-        </NcButton>
-        <GeneralIcon icon="gitCommit" class="flex-none h-5 w-5" />
-        <div class="flex-1 text-base font-weight-700">New Connection</div>
-        <div class="flex items-center gap-3">
-          <NcButton size="small" type="text" @click="isAddNewIntegrationModalOpen = false">
-            <GeneralIcon icon="close" class="text-gray-600" />
-          </NcButton>
-        </div>
-      </div>
-
-      <div
-        class="flex flex-col nc-workspace-settings-integrations-new-available-list"
-        :class="{
-          'h-[calc(80vh_-_66px)] p-6': isModal,
-          'h-full': !isModal,
-        }"
-      >
-        <div class="w-full flex justify-center">
-          <div
-            class="flex flex-col gap-6 w-full"
-            :class="{
-              'max-w-[1088px]': isModal,
-            }"
-          >
-            <div
-              class="text-sm font-normal text-gray-600"
-              :class="{
-                'max-w-[740px]': !isModal,
-              }"
-            >
-              <div>Connect integrations with NocoDB. <a target="_blank" rel="noopener noreferrer"> Learn more </a></div>
-            </div>
-
-            <div class="integration-type-wrapper">
-              <div class="integration-type-title">Databases</div>
-              <div class="integration-type-list">
-                <div class="source-card" @click="handleAddIntegration(integrationType.MySQL)">
-                  <WorkspaceIntegrationsIcon :integration-type="integrationType.MySQL" size="md" />
-                  <div class="name flex-1">MySQL</div>
-                  <div class="action-btn">+</div>
-                </div>
-                <div class="source-card" @click="handleAddIntegration(integrationType.PostgreSQL)">
-                  <WorkspaceIntegrationsIcon :integration-type="integrationType.PostgreSQL" size="md" />
-                  <div class="name flex-1">PostgreSQL</div>
-                  <div class="action-btn">+</div>
-                </div>
-              </div>
-            </div>
-            <!-- Todo:APIs  -->
-            <!-- <div>
-          <div>APIs</div>
-          <div></div>
-        </div> -->
-            <div class="integration-type-wrapper">
-              <div>
-                <div class="integration-type-title">Others</div>
-                <div class="integration-type-subtitle"></div>
-              </div>
-              <div>
-                <div
-                  class="source-card-request-integration"
-                  :class="{
-                    active: requestIntegration.isOpen,
-                  }"
-                >
-                  <div
-                    v-if="!requestIntegration.isOpen"
-                    class="source-card-item border-none"
-                    @click="requestIntegration.isOpen = true"
-                  >
-                    <WorkspaceIntegrationsIcon integration-type="request" size="md" />
-                    <div class="name">Request New Integration</div>
-                  </div>
-                  <div v-show="requestIntegration.isOpen" class="flex flex-col gap-4">
-                    <div class="flex items-center justify-between gap-4">
-                      <div class="text-base font-bold text-gray-800">Request Integration</div>
-                      <NcButton size="xsmall" type="text" @click="requestIntegration.isOpen = false">
-                        <GeneralIcon icon="close" class="text-gray-600" />
-                      </NcButton>
-                    </div>
-                    <div class="flex flex-col gap-2">
-                      <a-textarea
-                        v-model:value="requestIntegration.msg"
-                        class="!rounded-md !text-sm !min-h-[120px] max-h-[500px] nc-scrollbar-thin"
-                        size="large"
-                        hide-details
-                        placeholder="Provide integration name and your use-case."
-                      />
-                    </div>
-                    <div class="flex items-center justify-end gap-3">
-                      <NcButton size="small" type="secondary" @click="requestIntegration.isOpen = false">
-                        {{ $t('general.cancel') }}
-                      </NcButton>
-                      <NcButton
-                        :disabled="!requestIntegration.msg?.trim()"
-                        :loading="requestIntegration.isLoading"
-                        size="small"
-                        @click="saveIntegraitonRequest(requestIntegration.msg)"
-                      >
-                        {{ $t('general.submit') }}
-                      </NcButton>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </component>
-</template>
-
-<style lang="scss" scoped>
-.source-card-request-integration {
-  @apply flex flex-col gap-4 border-1 rounded-xl p-3 w-[352px] overflow-hidden transition-all duration-300 max-w-[720px];
-
-  &.active {
-    @apply w-full;
-  }
-  &:not(.active) {
-    @apply cursor-pointer hover:bg-gray-50;
-  }
-
-  .source-card-item {
-    @apply flex items-center;
-
-    .name {
-      @apply ml-4 text-md font-semibold;
-    }
-  }
-}
-.source-card-link {
-  @apply !text-black !no-underline;
-  .nc-new-integration-type-title {
-    @apply text-sm font-weight-600 text-gray-600;
-  }
-}
-
-.source-card {
-  @apply flex items-center border-1 rounded-xl p-3 cursor-pointer hover:bg-gray-50;
-  width: 352px;
-  .name {
-    @apply ml-4 text-md font-semibold;
-  }
-}
-
-.nc-workspace-settings-integrations-new-available-list {
-  .integration-type-wrapper {
-    @apply flex flex-col gap-3;
-
-    .source-card:hover {
-      .action-btn {
-        @apply block;
-      }
-    }
-
-    .integration-type-title {
-      @apply text-sm text-gray-500 font-weight-700;
-    }
-    .integration-type-subtitle {
-      @apply text-sm text-gray-500 font-weight-700;
-    }
-    .integration-type-list {
-      @apply flex gap-4 flex-wrap;
-    }
-    .action-btn {
-      @apply hidden text-2xl text-gray-500;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.nc-modal-available-integrations-list {
-  .nc-modal {
-    @apply !p-0;
-    height: min(calc(100vh - 100px), 1024px);
-    max-height: min(calc(100vh - 100px), 1024px) !important;
-  }
-}
-</style>