From 7f9aa530a21f37b378c75e4ea82a1399341b4453 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Sat, 17 Feb 2024 06:09:49 +0000
Subject: [PATCH] feat(nc-gui): link records placeholder

---
 .../components/ListChildItems.vue             | 21 ++++++++++++-------
 packages/nc-gui/lang/en.json                  |  5 ++++-
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index f4351b3df6..65b1771ab4 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -14,7 +14,6 @@ import {
   useSmartsheetRowStoreOrThrow,
   useVModel,
 } from '#imports'
-import InboxIcon from '~icons/nc-icons/inbox'
 
 interface Prop {
   modelValue?: boolean
@@ -300,19 +299,25 @@ onUnmounted(() => {
           </template>
         </div>
       </div>
-      <div v-else class="pt-1 flex flex-col gap-3 my-auto items-center justify-center text-gray-500">
-        <InboxIcon class="w-16 h-16 mx-auto" />
-        <p>
-          {{ $t('msg.noRecordsAreLinkedFromTable') }}
-          {{ relatedTableMeta?.title }}
-        </p>
+      <div v-else class="pt-1 flex flex-col gap-4 my-auto items-center justify-center text-gray-500">
+        <img src="~assets/img/placeholder/link-records.png" class="!w-[18.5rem] flex-none" />
+        <div class="text-2xl text-gray-700 font-bold text-center">{{ $t('msg.noLinkedRecords') }}</div>
+        <div class="text-center text-gray-700">
+          <div>
+            {{ $t('msg.noRecordsHaveBeenLinkedYetFromTable', { tableName: relatedTableMeta?.title }) }}
+          </div>
+          <div>
+            {{ $t('msg.clickLinkRecordsToAddLink') }}
+          </div>
+        </div>
+
         <NcButton
           v-if="!readOnly && childrenListCount < 1"
           v-e="['c:links:link']"
           data-testid="nc-child-list-button-link-to"
           @click="emit('attachRecord')"
         >
-          <div class="flex items-center gap-1"><MdiPlus /> {{ $t('title.linkMoreRecords') }}</div>
+          <div class="flex items-center gap-1"><MdiPlus /> {{ $t('title.linkRecords') }}</div>
         </NcButton>
       </div>
     </div>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index c75722146d..19171d4043 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -332,6 +332,7 @@
     "virtualRelation": "Virtual Relation",
     "linkMore": "Link More",
     "linkMoreRecords": "Link more records",
+    "linkRecords": "Link Records",
     "downloadFile": "Download File",
     "renameTable": "Rename Table",
     "renamingTable": "Renaming Table",
@@ -1049,8 +1050,10 @@
       "tooltip_desc": "A single record from table ",
       "tooltip_desc2": " can be linked with a single record from table "
     },
-    "noRecordsAreLinkedFromTable": "No records are linked from table",
+    "noRecordsHaveBeenLinkedYetFromTable": "Looks like no records have been linked yet from table {tableName}.",
+    "clickLinkRecordsToAddLink": "Click on Link records to do so.",
     "noRecordsLinked": "No records linked",
+    "noLinkedRecords": "No linked records",
     "recordsLinked": "records linked",
     "acceptOnlyValid": "Accepts only",
     "apiTokenCreate": "Create personal API tokens to use in automation or external apps.",