fix: QA v14

src/lib/components/empty.svelte

@@ -53,9 +53,9 @@
         class="card u-grid u-cross-center u-width-full-line dashed">
         <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
             <div class="common-section">
-                <Button secondary round>
+                <div class="button is-secondary is-only-icon">
                     <i class="icon-plus" />
-                </Button>
+                </div>
             </div>
             <div class="common-section">
                 <slot />

src/lib/components/feedbackNPS.svelte

@@ -21,7 +21,9 @@
         try {
             await feedback.submitFeedback(undefined, email, message, ['npm'], [{ value, name }]);
             console.log(value, message);
+            feedback.switchType('general');
         } catch (error) {
+            feedback.switchType('general');
             addNotification({
                 type: 'error',
                 message: error.message

src/lib/layout/cover.svelte

@@ -10,7 +10,7 @@
 
 <div class="top-cover" class:is-adjust-content-to-cover={adjustContentToCover}>
     <div class="container" {style}>
-        <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
+        <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20 u-flex-wrap">
             <slot name="header" />
         </div>
         <slot />

src/lib/layout/header.svelte

@@ -70,7 +70,7 @@
                 <span class="text">Feedback</span>
             </button>
             <svelte:fragment slot="other">
-                {#if $feedback.notification}
+                {#if $feedback.type === 'nps'}
                     <FeedbackNPS bind:show={showFeedback} />
                 {:else}
                     <FeedbackGeneral bind:show={showFeedback} />

src/lib/layout/shell.svelte

@@ -44,7 +44,7 @@
     class:grid={!showSideNavigation}
     class:is-open={isOpen}
     class:u-hide={$wizard.show || $log.show}>
-    <header class="main-header">
+    <header class="main-header u-padding-inline-end-0">
         <button
             class:u-hide={!showSideNavigation}
             class="icon-button is-no-desktop"

src/lib/stores/app.ts

@@ -33,9 +33,9 @@ function createFeedbackStore() {
                 feedback.notification = !feedback.notification;
                 return feedback;
             }),
-        switchType: () =>
+        switchType: (feedType: 'nps' | 'general') =>
             update((feedback) => {
-                feedback.type = feedback.type === 'nps' ? 'general' : 'nps';
+                feedback.type = feedType;
                 return feedback;
             }),
         addVisualization: () =>

src/routes/console/+layout.svelte

@@ -28,8 +28,10 @@
         const hours = Math.floor($feedback.elapsed / 60);
         if (hours >= 1 && hours < 10 && $feedback.visualized < 1) {
             feedback.toggleNotification();
+            feedback.switchType('nps');
         } else if (hours >= $feedback.visualized * 10) {
             feedback.toggleNotification();
+            feedback.switchType('nps');
         }
     }
 

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Box, Heading } from '$lib/components';
+    import { CardGrid, Box, Heading, Alert } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -13,10 +13,12 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
+    import { collection } from '../store';
 
     let showDelete = false;
     let permissions = $doc?.$permissions;
     let arePermsDisabled = true;
+    let showPermissionAlert = true;
 
     async function updatePermissions() {
         try {
@@ -73,7 +75,30 @@
         </p>
 
         <svelte:fragment slot="aside">
-            <Permissions bind:permissions />
+            {#if $collection.documentSecurity}
+                {#if showPermissionAlert}
+                    <Alert type="info" dismissible on:dismiss={() => (showPermissionAlert = false)}>
+                        <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
+                        <p class="text">
+                            Users will be able to access this document if they have been granted <b
+                                >either Document or Collection permissions.
+                            </b>
+                        </p>
+                    </Alert>
+                {/if}
+                {#if permissions}
+                    <Permissions bind:permissions />
+                {/if}
+            {:else}
+                <Alert type="info">
+                    <svelte:fragment slot="title">Document security is disabled</svelte:fragment>
+                    <p class="text">
+                        If you want to assign document permissions, navigate to Collection settings
+                        and enable document security. Otherwise, only Collection permissions will be
+                        used.
+                    </p>
+                </Alert>
+            {/if}
         </svelte:fragment>
 
         <svelte:fragment slot="actions">

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Box, Heading, Alert } from '$lib/components';
+    import { CardGrid, Box, Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button, InputText, InputSwitch, Helper } from '$lib/elements/forms';
     import { Permissions } from '$lib/components/permissions';
@@ -197,21 +197,8 @@
                     rel="noopener noreferrer">Permissions Guide</a> in our documentation.
             </p>
             <svelte:fragment slot="aside">
-                {#if $collection.documentSecurity}
-                    {#if collectionPermissions}
-                        <Permissions bind:permissions={collectionPermissions} withCreate />
-                    {/if}
-                {:else}
-                    <Alert type="info">
-                        <svelte:fragment slot="title">
-                            Document security is disabled
-                        </svelte:fragment>
-                        <p class="text">
-                            If you want to assign document permissions, navigate to Collection
-                            settings and enable document security. Otherwise, only Collection
-                            permissions will be used.
-                        </p>
-                    </Alert>
+                {#if collectionPermissions}
+                    <Permissions bind:permissions={collectionPermissions} withCreate />
                 {/if}
             </svelte:fragment>
             <svelte:fragment slot="actions">

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/deleteCollection.svelte

@@ -23,7 +23,7 @@
             });
             trackEvent('submit_collection_delete');
             await goto(
-                `${base}/console/project-${$page.params.project}/databases/database/${$page.params.database}`
+                `${base}/console/project-${$page.params.project}/databases/database-${$page.params.database}`
             );
         } catch (error) {
             addNotification({

src/routes/console/project-[project]/functions/function-[function]/create.svelte

@@ -20,7 +20,7 @@
     }
     let mode: Mode = Mode.CLI;
     let entrypoint: string;
-    let active: boolean;
+    let active = false;
     let files: FileList;
     let lang = 'js';
     let codeSnippets = {};
@@ -174,7 +174,10 @@
                 id="entrypoint"
                 bind:value={entrypoint}
                 required />
-            <InputFile label="Gzipped code (tar.gz)" bind:files />
+            <InputFile
+                label="Gzipped code (tar.gz)"
+                allowedFileExtensions={['tar.gz']}
+                bind:files />
             <InputChoice label="Activate Deployment after build" id="activate" bind:value={active}>
                 This deployment will be activated after the build is completed.</InputChoice>
         </FormList>

src/routes/console/project-[project]/storage/create.svelte

@@ -19,13 +19,13 @@
     const create = async () => {
         try {
             const bucket = await sdkForProject.storage.createBucket(id ? id : 'unique()', name);
-            name = null;
             showCreate = false;
             dispatch('created', bucket);
             addNotification({
                 type: 'success',
                 message: `${name} has been created`
             });
+            name = null;
             trackEvent('submit_bucket_create');
         } catch ({ message }) {
             error = message;