refactor: show alert if there is no meta change

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/projectMetadata/sync/disableOrEnableTables.vue

@@ -200,8 +200,8 @@
           <div class="d-flex">
             <v-spacer />
 
-            <v-tooltip bottom>
+            <!--            <v-tooltip bottom>-->
-              <!-- template #activator="{on}">
+            <!-- template #activator="{on}">
                 <v-alert
                   v-if="isNewOrDeletedModelFound"
                   dense
@@ -232,7 +232,7 @@
                 Metadata for API creation & management isn't sync with
                 '{{ dbAliasList[dbsTab].connection.database }}' Database.
               </template-->
-            </v-tooltip>
+            <!--            </v-tooltip>-->
             <v-spacer />
           </div>
           <!--          <div-->
@@ -249,19 +249,41 @@
               </v-icon>
               Sync Now
             </x-btn>-->
+            <v-tooltip bottom>
+              <template #activator="{on}">
+                <x-btn
+                  v-if="isChanged"
+                  x-large
+                  btn.class="mx-auto primary nc-btn-metasync-sync-now"
+                  @click="syncMetaDiff"
+                  v-on="on"
+                >
+                  <v-icon color="white" class="mr-2 mt-n1">
+                    mdi-database-sync
+                  </v-icon>
+                  Sync Now
+                </x-btn>
 
-            <x-btn
+                <v-alert
-              v-if="isChanged"
+                  v-else
-              x-large
+                  dense
-              btn.class="mx-auto primary nc-btn-metasync-sync-now"
+                  outlined
-              tooltip="Sync metadata"
+                  type="success"
-              @click="syncMetaDiff"
+                  v-on="on"
-            >
+                >
-              <v-icon color="white" class="mr-2 mt-n1">
+                  Tables metadata is in sync
-                mdi-database-sync
+                </v-alert>
-              </v-icon>
+              </template>
-              Sync Now
+
-            </x-btn>
+              <template v-if="!isChanged">
+                Metadata for API creation & management is in sync with
+                '{{ dbAliasList[dbsTab].connection.database }}' Database.
+              </template>
+              <template-- v-else>
+                Metadata for API creation & management isn't sync with
+                '{{ dbAliasList[dbsTab].connection.database }}' Database.
+              </template-->
+            </v-tooltip>
           </div>
         </v-col>
       </v-row>