Add tooltip for Publish button (#30)

Author: vegito22

apps/serializers.py

@@ -114,6 +114,7 @@ class Meta:
     last_modified_by_email = serializers.SerializerMethodField()
     template = serializers.SerializerMethodField()
     visibility = serializers.SerializerMethodField()
+    has_live_version = serializers.SerializerMethodField()
 
     def get_logo(self, obj):
         profile = Profile.objects.get(user=obj.owner)
@@ -142,6 +143,12 @@ def get_data(self, obj):
         if app_data:
             return app_data.data
         return None
+    
+    def get_has_live_version(self, obj):
+        app_datas = AppData.objects.filter(
+            app_uuid=obj.uuid, is_draft=False).first()
+        return app_datas is not None
+        
 
     def get_app_type_name(self, obj):
         return obj.type.name
@@ -237,7 +244,7 @@ class Meta:
             'logo', 'is_shareable', 'has_footer', 'domain', 'visibility', 'accessible_by',
             'access_permission', 'last_modified_by_email', 'owner_email', 'web_config',
             'slack_config', 'discord_config', 'app_type_name', 'processors', 'template',
-            'read_accessible_by', 'write_accessible_by'
+            'read_accessible_by', 'write_accessible_by', 'has_live_version'
         ]
 
 

client/src/pages/AppEdit.jsx

@@ -21,6 +21,7 @@ import {
   Paper,
   Stack,
   SvgIcon,
+  Tooltip,
 } from "@mui/material";
 import ChangeHistoryIcon from "@mui/icons-material/ChangeHistory";
 import EditIcon from "@mui/icons-material/Edit";
@@ -401,27 +402,44 @@ export default function AppEditPage(props) {
                   app={app}
                   setIsPublished={setIsPublished}
                 />
+
                 {appId && app && (
-                  <Button
-                    variant="contained"
-                    color="success"
-                    style={{ textTransform: "none" }}
-                    disabled={app.owner_email !== profile.user_email}
-                    startIcon={
-                      isPublished ? (
-                        <UnpublishedIcon />
-                      ) : (
-                        <PublishedWithChangesIcon />
-                      )
-                    }
-                    onClick={() =>
-                      isPublished
-                        ? setShowUnpublishModal(true)
-                        : setShowPublishModal(true)
+                  <Tooltip
+                    arrow={true}
+                    title={
+                      app?.has_live_version
+                        ? isPublished
+                          ? "Unpublish App"
+                          : "Publish App"
+                        : "Please save App before publishing"
                     }
                   >
-                    {isPublished ? "Unpublish" : "Publish"}
-                  </Button>
+                    <span>
+                      <Button
+                        variant="contained"
+                        color="success"
+                        style={{ textTransform: "none" }}
+                        disabled={
+                          app.owner_email !== profile.user_email ||
+                          !app?.has_live_version
+                        }
+                        startIcon={
+                          isPublished ? (
+                            <UnpublishedIcon />
+                          ) : (
+                            <PublishedWithChangesIcon />
+                          )
+                        }
+                        onClick={() =>
+                          isPublished
+                            ? setShowUnpublishModal(true)
+                            : setShowPublishModal(true)
+                        }
+                      >
+                        {isPublished ? "Unpublish" : "Publish"}
+                      </Button>
+                    </span>
+                  </Tooltip>
                 )}
               </Stack>
             </Stack>