From f42ed738e56f6da0b8650af0c0be4a8d184bd167 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Wed, 20 Apr 2022 14:37:24 +0100
Subject: [PATCH] Added the hover message for the publish menu icon

---
 .../builder/app/[application]/_layout.svelte  | 102 +++++++++++-------
 1 file changed, 62 insertions(+), 40 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 22184d93a..5547b2c6a 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -33,7 +33,7 @@
   let promise = getPackage()
   let unpublishModal
   let publishPopover
-  // let notPublishedPopover
+  let notPublishedPopover
 
   $: enrichedApps = enrichApps($apps, $auth.user)
   const enrichApps = (apps, user) => {
@@ -224,47 +224,69 @@
         <RevertModal />
         <Icon name="Play" hoverable on:click={previewApp} />
 
-        <PopoverMenu
-          bind:this={publishPopover}
-          align="right"
-          disabled={!isPublished}
-        >
-          <div slot="control" class="icon">
-            <Icon
-              size="M"
-              hoverable
-              name={isPublished ? "Globe" : "GlobeStrike"}
-              disabled={!isPublished}
-            />
-          </div>
-          <Layout gap="M">
-            <Heading size="XS">Your app is live!</Heading>
-            <div class="publish-popover-message">
-              {#if isPublished}
-                {processStringSync(
-                  "Last Published: {{ duration time 'millisecond' }} ago",
-                  {
-                    time:
-                      new Date().getTime() -
-                      new Date(latestDeployments[0].updatedAt).getTime(),
-                  }
-                )}
-              {/if}
-            </div>
-            <div class="publish-popover-actions">
-              <Button
-                warning={true}
-                icon="Globe"
+        {#if isPublished}
+          <PopoverMenu
+            bind:this={publishPopover}
+            align="right"
+            disabled={!isPublished}
+          >
+            <div slot="control" class="icon">
+              <Icon
+                size="M"
+                hoverable
+                name={isPublished ? "Globe" : "GlobeStrike"}
                 disabled={!isPublished}
-                on:click={unpublishApp}
-                dataCy="publish-popover-action"
-              >
-                Unpublish
-              </Button>
-              <Button cta on:click={viewApp}>View App</Button>
+              />
+            </div>
+            <Layout gap="M">
+              <Heading size="XS">Your app is live!</Heading>
+              <div class="publish-popover-message">
+                {#if isPublished}
+                  {processStringSync(
+                    "Last Published: {{ duration time 'millisecond' }} ago",
+                    {
+                      time:
+                        new Date().getTime() -
+                        new Date(latestDeployments[0].updatedAt).getTime(),
+                    }
+                  )}
+                {/if}
+              </div>
+              <div class="publish-popover-actions">
+                <Button
+                  warning={true}
+                  icon="GlobeStrike"
+                  disabled={!isPublished}
+                  on:click={unpublishApp}
+                  dataCy="publish-popover-action"
+                >
+                  Unpublish
+                </Button>
+                <Button cta on:click={viewApp}>View App</Button>
+              </div>
+            </Layout>
+          </PopoverMenu>
+        {/if}
+
+        {#if !isPublished}
+          <PopoverMenu bind:this={notPublishedPopover} align="right">
+            <div
+              slot="control"
+              class="icon"
+              on:mouseenter={() => {
+                notPublishedPopover.show()
+              }}
+              on:mouseout={() => {
+                notPublishedPopover.hide()
+              }}
+              on:blur={() => void 0}
+              disabled={true}
+            >
+              <Icon size="M" name={"GlobeStrike"} disabled={true} />
             </div>
-          </Layout>
-        </PopoverMenu>
+            This app has not been published yet
+          </PopoverMenu>
+        {/if}
 
         <DeployModal onOk={completePublish} />
       </div>