Merge pull request #3 from fleetbase/dev-add-config-tests

Dev add config tests

.gitignore

@@ -21,6 +21,7 @@
 /testem.log
 /yarn-error.log
 /.npmrc
+/pnpm-lock.yaml
 
 # ember-try
 /.node_modules.ember-try/

.template-lintrc.js

@@ -3,6 +3,7 @@
 module.exports = {
     extends: 'recommended',
     rules: {
+        'no-bare-strings': 'off',
         'no-invalid-interactive': 'off',
         'no-yield-only': 'off',
         'no-down-event-binding': 'off',

app/components/configure/filesystem.hbs

@@ -7,6 +7,13 @@
         <InputGroup @name="S3 URL" @value={{this.s3Url}} disabled={{this.isLoading}} />
         <InputGroup @name="S3 Endpoint" @value={{this.s3Endpoint}} disabled={{this.isLoading}} />
     {{/if}}
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
 </ContentPanel>
 
 <div class="mt-3 flex items-center justify-end">

app/components/configure/filesystem.js

@@ -7,6 +7,7 @@ export default class ConfigureFilesystemComponent extends Component {
     @service fetch;
     @service notifications;
     @tracked isLoading = false;
+    @tracked testResponse;
     @tracked disks = [];
     @tracked driver = 'local';
     @tracked s3Bucket = null;
@@ -66,4 +67,19 @@ export default class ConfigureFilesystemComponent extends Component {
                 this.isLoading = false;
             });
     }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-filesystem-config', {
+                disk: this.driver,
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
 }

app/components/configure/queue.hbs

@@ -11,6 +11,13 @@
         <InputGroup @name="SQS Queue" @value={{this.sqsQueue}} disabled={{this.isLoading}} />
         <InputGroup @name="SQS Suffix" @value={{this.sqsSuffix}} disabled={{this.isLoading}} />
     {{/if}}
+    {{#if this.testResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.testResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.testResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.testResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.testResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Config" @onClick={{this.test}} @isLoading={{this.isLoading}} />
 </ContentPanel>
 
 <div class="mt-3 flex items-center justify-end">

app/components/configure/queue.js

@@ -73,4 +73,19 @@ export default class ConfigureQueueComponent extends Component {
                 this.isLoading = false;
             });
     }
+
+    @action test() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-queue-config', {
+                queue: this.driver,
+            })
+            .then((response) => {
+                this.testResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
 }

app/components/configure/services.hbs

@@ -13,6 +13,27 @@
     <InputGroup @name="Twilio SID" @value={{this.twilioSid}} disabled={{this.isLoading}} />
     <InputGroup @name="Twilio Token" @value={{this.twilioToken}} disabled={{this.isLoading}} />
     <InputGroup @name="Twilio From" @value={{this.twilioFrom}} disabled={{this.isLoading}} />
+    {{#if this.twilioTestResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.twilioTestResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.twilioTestResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.twilioTestResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.twilioTestResponse.message}}</span>
+        </div>
+    {{/if}}
+    <div class="flex flex-row items-center mt-3">
+        <Input @value={{this.twilioTestPhone}} @type="tel" placeholder="Send Test SMS Here" class="form-input form-input-sm" />
+        <Button @wrapperClass="ml-2" @icon="plug" @text="Test Twilio Config" @onClick={{this.testTwilio}} @isLoading={{this.isLoading}} @disabled={{not this.twilioTestPhone}} />
+    </div>
+</ContentPanel>
+
+<ContentPanel @title="Sentry" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <InputGroup @name="Sentry DSN" @value={{this.sentryDsn}} disabled={{this.isLoading}} />
+    {{#if this.sentryTestResponse}}
+        <div class="animate-pulse flex flex-row items-center rounded-lg border {{if (eq this.sentryTestResponse.status 'error') 'border-red-900 bg-red-800 text-red-100' 'border-green-900 bg-green-800 text-green-100'}} shadow-sm my-2 px-4 py-2">
+            <FaIcon @icon={{if (eq this.sentryTestResponse.status 'error') 'triangle-exclamation' 'circle-check'}} class="mr-1.5 {{if (eq this.sentryTestResponse.status 'error') 'text-red-200' 'text-green-200'}}" />
+            <span class="text-xs">{{this.this.sentryTestResponse.message}}</span>
+        </div>
+    {{/if}}
+    <Button @wrapperClass="mt-3" @icon="plug" @text="Test Sentry Config" @onClick={{this.testSentry}} @isLoading={{this.isLoading}} />
 </ContentPanel>
 
 <ContentPanel @title="IP Info" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">

app/components/configure/services.js

@@ -24,6 +24,12 @@ export default class ConfigureServicesComponent extends Component {
     @tracked twilioSid = null;
     @tracked twilioToken = null;
     @tracked twilioFrom = null;
+    @tracked twilioTestPhone = null;
+    @tracked twilioTestResponse;
+
+    /** sentry service */
+    @tracked sentryDsn = null;
+    @tracked sentryTestResponse;
 
     /**
      * Creates an instance of ConfigureServicesComponent.
@@ -77,6 +83,9 @@ export default class ConfigureServicesComponent extends Component {
                     token: this.twilioToken,
                     from: this.twilioFrom,
                 },
+                sentry: {
+                    dsn: this.sentryDsn,
+                },
             })
             .then(() => {
                 this.notifications.success('Services configuration saved.');
@@ -85,4 +94,37 @@ export default class ConfigureServicesComponent extends Component {
                 this.isLoading = false;
             });
     }
+
+    @action testTwilio() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-twilio-config', {
+                sid: this.twilioSid,
+                token: this.twilioToken,
+                from: this.twilioFrom,
+                phone: this.twilioTestPhone,
+            })
+            .then((response) => {
+                this.twilioTestResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action testSentry() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('settings/test-sentry-config', {
+                dsn: this.sentryDsn,
+            })
+            .then((response) => {
+                this.sentryTestResponse = response;
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
 }

app/components/dashboard/count.hbs

@@ -1,4 +1,4 @@
-<div class="dashboard-component-count col-span-2">
+<div class="dashboard-component-count lg:col-span-2">
     <h3 class="text-sm dark:text-gray-100 text-black mb-4">{{@options.title}}</h3>
     <h1 class="text-3xl font-bold dark:text-gray-100 text-black mb-4">
         {{this.displayValue}}

app/components/dashboard/create.hbs

@@ -1,6 +1,6 @@
 <div class="col-span-{{or @dashboard.size 12}}">
-    <div class="dashboard-title flex flex-row items-center">
-        <div class="flex flex-row items-center">
+    <div class="dashboard-title flex flex-col lg:flex-row lg:items-center">
+        <div class="flex flex-row items-center mb-2 lg:mb-0">
             {{#if this.isLoading}}
                 <Spinner class="mr-2i" />
             {{/if}}
@@ -10,7 +10,7 @@
             <Dashboard::QueryParams @params={{@dashboard.queryParams}} @onChange={{this.onQueryParamsChanged}} />
         </div>
     </div>
-    <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
+    <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
         {{#each this.dashboard.widgets as |widget|}}
             {{component (concat "dashboard/" widget.component) options=widget.options}}
         {{/each}}

app/components/dashboard/query-params.hbs

@@ -1,7 +1,7 @@
 <div class="flex flex-row items-center space-x-3" ...attributes>
     {{#each-in @params as |param options|}}
-        <div class="flex flex-row items-center">
-            <label class="mr-2">{{humanize param}}:</label>
+        <div class="flex flex-col lg:flex-row lg:items-center">
+            <label class="hidden lg:flex mr-2 text-sm">{{humanize param}}:</label>
             {{component options.component onChange=(fn this.onChange param) placeholder=(humanize param) class="form-input-sm"}}
         </div>
     {{/each-in}}

app/components/fleetbase-blog.hbs

@@ -13,7 +13,7 @@
             {{else}}
                 <ul class="space-y-2">
                     {{#each this.posts as |post|}}
-                        <li class="text-sm flex">
+                        <li class="text-sm flex flex-col lg:flex-row">
                             <a href={{post.link}} target="_blog" class="text-black truncate max-w-lg dark:text-gray-200">
                                 <span class="truncate">{{post.title}}</span>
                             </a>

app/components/github-card.hbs

@@ -1,18 +1,18 @@
-<div class="fleetbase-github-card relative" ...attributes>
+<div class="fleetbase-github-card relative flex-1 w-full" ...attributes>
     <div class="border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm flex flex-col">
         {{#if this.isLoading}}
             <div class="p-4">
                 <Spinner />
             </div>
         {{else}}
             <div class="flex flex-row p-4 border-b dark:border-gray-700 border-gray-200">
-                <div class="w-12"><img src={{this.data.owner.avatar_url}} alt="fleetbase/fleetbase" class="rounded-full w-8 h-8" width="32" height="32" /></div>
+                <div class="w-12 flex-shrink-0"><img src={{this.data.owner.avatar_url}} alt="fleetbase/fleetbase" class="rounded-full w-8 h-8" width="32" height="32" /></div>
                 <div class="flex-1 -mt-2">
                     <div class="flex flex-1 flex-row items-center justify-between mb-2">
                         <a href={{this.data.html_url}} target="_github" class="dark:text-gray-100 text-black text-lg font-semibold">{{this.data.full_name}}</a>
                         <a href={{this.data.html_url}} target="_github" class="btn btn-xs btn-default">
-                            <FaIcon @icon="star" class="text-yellow-400 mr-2.5" />
-                            <span>Star on Github</span>
+                            <FaIcon @icon="star" class="text-yellow-400" />
+                            <span class="hidden lg:flex ml-2.5">Star on Github</span>
                         </a>
                     </div>
                     <p class="dark:text-gray-100 text-black text-sm">{{this.data.description}}</p>
@@ -40,7 +40,7 @@
                     </div>
                     <div class="col-span-3 dark:text-gray-100 text-black text-xs flex flex-row">
                         <span class="font-bold mr-1">{{this.data.open_issues_count}}</span>
-                        <span>Open Issues</span>
+                        <span><span class="hidden lg:inline-flex">Open</span> Issues</span>
                     </div>
                 </div>
             </div>

app/controllers/console/admin/branding.js

@@ -18,13 +18,38 @@ export default class ConsoleAdminBrandingController extends Controller {
      */
     @service notifications;
 
+    /**
+     * Inject the `theme` service.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @service theme;
+
     /**
      * Status of loading process.
      *
      * @memberof ConsoleAdminBrandingController
      */
     @tracked isLoading = false;
 
+    /**
+     * Theme options.
+     *
+     * @memberof ConsoleAdminBrandingController
+     */
+    @tracked themeOptions = ['light', 'dark'];
+
+    /**
+     * Set the default theme
+     *
+     * @param {String} theme
+     * @memberof ConsoleAdminBrandingController
+     */
+    @action setTheme(theme) {
+        this.model.default_theme = theme;
+        this.theme.setTheme(theme);
+    }
+
     /**
      * Unset a branding settings
      *

app/controllers/onboard/index.js

@@ -121,6 +121,12 @@ export default class OnboardIndexController extends Controller {
                 if (response.status === 'success') {
                     this.session.isOnboarding().manuallyAuthenticate(response.token);
 
+                    if (response.skipVerification === true) {
+                        return this.transitionToRoute('console').then(() => {
+                            this.notifications.success('Welcome to Fleetbase!');
+                        });
+                    }
+
                     return this.transitionToRoute('onboard.verify-email', { queryParams: { hello: response.session } });
                 }
             })

app/formats.js

@@ -0,0 +1,27 @@
+export default {
+    time: {
+        hhmmss: {
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+        },
+    },
+    date: {
+        hhmmss: {
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+        },
+    },
+    number: {
+        compact: { notation: 'compact' },
+        EUR: {
+            style: 'currency',
+            currency: 'EUR',
+        },
+        USD: {
+            style: 'currency',
+            currency: 'USD',
+        },
+    },
+};

app/models/brand.js

@@ -4,4 +4,5 @@ export default class BrandModel extends Model {
     @attr('string') uuid;
     @attr('string') icon_url;
     @attr('string') logo_url;
+    @attr('string') default_theme;
 }

app/routes/application.js

@@ -1,4 +1,5 @@
 import Route from '@ember/routing/route';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import isElectron from '@fleetbase/ember-core/utils/is-electron';
 import pathToRoute from '@fleetbase/ember-core/utils/path-to-route';
@@ -9,7 +10,8 @@ export default class ApplicationRoute extends Route {
     @service fetch;
     @service urlSearchParams;
     @service modalsManager;
-    // @service intl;
+    @service intl;
+    @tracked defaultTheme;
 
     /**
      * Check the installation status of Fleetbase and transition user accordingly.
@@ -20,7 +22,9 @@ export default class ApplicationRoute extends Route {
     // eslint-disable-next-line ember/classic-decorator-hooks
     async init() {
         super.init(...arguments);
-        const { shouldInstall, shouldOnboard } = await this.checkInstallationStatus();
+        const { shouldInstall, shouldOnboard, defaultTheme } = await this.checkInstallationStatus();
+
+        this.defaultTheme = defaultTheme;
 
         if (shouldInstall) {
             return this.transitionTo('install');
@@ -62,8 +66,8 @@ export default class ApplicationRoute extends Route {
             bodyClassNames.pushObject(['is-electron']);
         }
 
-        this.theme.initialize({ bodyClassNames });
-        // this.intl.setLocale(['en-us']);
+        this.theme.initialize({ bodyClassNames, theme: this.defaultTheme });
+        this.intl.setLocale(['en-us']);
     }
 
     /**

app/styles/app.css

@@ -1,5 +1,4 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
-@import 'inter-ui/inter.css';
-@import '@fleetbase/ember-ui/app/styles/addon.css';
+@import 'inter-ui/inter.css';

app/templates/application.hbs

@@ -1,4 +1,4 @@
-{{page-title "Fleetbase"}}
+{{page-title (t "app.name")}}
 <ModalsContainer />
 <NotificationContainer @position="top" @zindex="99999" />
 {{outlet}}