Show message when project does not contain cloud variables

src/locales/en.json

@@ -268,6 +268,10 @@
       "string": "Cloud Variables",
       "context": "Cloud variables section header"
     },
+    "noCloudVariables": {
+      "string": "This project does not contain cloud variables.",
+      "context": "Message that appears when the project contain no cloud variables."
+    },
     "mode": {
       "string": "Mode",
       "context": "Label to choose how to handle cloud variables"

src/p4/PackagerOptions.svelte

@@ -455,17 +455,18 @@
   </div>
 </Section>
 
-{#if cloudVariables.length > 0}
-  <Section
-    accent="#FF8C1A"
-    reset={() => {
-      resetOptions([
-        'cloudVariables'
-      ]);
-    }}
-  >
-    <div>
-      <h2>{$_('options.cloudVariables')}</h2>
+<Section
+  accent="#FF8C1A"
+  reset={() => {
+    resetOptions([
+      'cloudVariables'
+    ]);
+  }}
+>
+  <div>
+    <h2>{$_('options.cloudVariables')}</h2>
+
+    {#if cloudVariables.length > 0}
       <label class="option">
         {$_('options.mode')}
         <select bind:value={$options.cloudVariables.mode}>
@@ -510,9 +511,11 @@
         </label>
         <LearnMore slug="packager/special-cloud-behaviors" />
       </div>
-    </div>
-  </Section>
-{/if}
+    {:else}
+      <p>{$_('options.noCloudVariables')}</p>
+    {/if}
+  </div>
+</Section>
 
 <Section
   accent="#FF6680"