@fleetbase/fleetops-engine 0.6.51 → 0.6.53

package/addon/components/telematic/form.hbs

@@ -1,87 +1,318 @@
-<div class="form-wrapper" ...attributes>
-    <ContentPanel @title="Telematics Provider" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
-            <InputGroup @name="Provider" @wrapperClass="col-span-2">
-                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                    <PowerSelect
-                        @options={{this.providers}}
-                        @selected={{this.selectedProvider}}
-                        @onChange={{this.selectProvider}}
-                        @placeholder="Select Provider"
-                        @triggerClass="form-select form-input"
-                        @disabled={{cannot-write @resource}}
-                        as |provider|
-                    >
-                        <div class="space-x-2 text-sm">
-                            <div class="inline-block align-top">
-                                <div class="hide-from-trigger h-1.5 w-full"></div>
-                                <Image src={{provider.icon}} class="w-5 h-5" />
+<div class="flex min-h-0 flex-1 flex-col" ...attributes>
+    <div class="min-h-0 flex-1 overflow-y-auto px-4 py-4 md:px-6">
+        <div class="mx-auto flex w-full max-w-6xl flex-col gap-4">
+            <section class="rounded-md border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                <div class="grid grid-cols-1 gap-2 md:grid-cols-5">
+                    {{#each this.setupSteps as |step index|}}
+                        <button
+                            type="button"
+                            class="rounded-md border p-2 text-left transition
+                                {{if step.active 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-500/10' 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600'}}"
+                            {{on "click" (fn this.goToStep index)}}
+                        >
+                            <div class="flex items-center gap-2">
+                                <div
+                                    class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md text-xs
+                                        {{if step.active 'bg-blue-600 text-white dark:bg-blue-500' (if step.complete 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300' 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300')}}"
+                                >
+                                    <FaIcon @icon={{if step.complete "check" step.icon}} />
+                                </div>
+                                <div class="min-w-0">
+                                    <div class="text-[10px] font-semibold uppercase text-gray-400 dark:text-gray-500">{{add index 1}}</div>
+                                    <div class="truncate text-xs font-bold text-gray-900 dark:text-gray-100">{{step.label}}</div>
+                                </div>
                             </div>
-                            <div class="inline-block">
-                                <div class="font-semibold normalize-in-trigger">{{provider.label}}</div>
-                                <div class="hide-from-trigger">{{n-a provider.description}}</div>
+                        </button>
+                    {{/each}}
+                </div>
+            </section>
+
+    {{#if (eq this.activeStep 0)}}
+        <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="mb-3">
+                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Choose Provider</h2>
+                <p class="text-xs text-gray-500 dark:text-gray-300">Select the provider that will supply device connectivity and telemetry.</p>
+            </div>
+
+            {{#if this.loadProviders.isRunning}}
+                <div class="flex min-h-[140px] items-center justify-center"><Spinner /></div>
+            {{else}}
+                <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
+                    {{#each this.providerCards as |provider|}}
+                        <button
+                            type="button"
+                            class="flex min-h-[128px] flex-col rounded-md border p-3 text-left transition
+                                {{if provider.selected 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-gray-800' 'border-gray-200 bg-white hover:border-blue-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-blue-400'}}"
+                            disabled={{cannot-write @resource}}
+                            {{on "click" (fn this.selectProvider provider)}}
+                        >
+                            <div class="flex items-start justify-between gap-3">
+                                <div class="flex min-w-0 items-center gap-2">
+                                    <Image src={{provider.icon}} class="h-7 w-7 rounded" />
+                                    <div class="min-w-0">
+                                        <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{provider.label}}</div>
+                                        <div class="truncate text-[11px] uppercase text-gray-400 dark:text-gray-500">{{provider.type}}</div>
+                                    </div>
+                                </div>
+                                {{#if provider.selected}}
+                                    <Badge @status="success" @hideStatusDot={{true}}>Selected</Badge>
+                                {{/if}}
                             </div>
+                            <p class="mt-3 line-clamp-2 flex-1 text-xs leading-5 text-gray-500 dark:text-gray-300">{{provider.description}}</p>
+                        </button>
+                    {{/each}}
+                </div>
+            {{/if}}
+        </section>
+    {{else if (eq this.activeStep 1)}}
+        <section class="grid grid-cols-1 gap-4 lg:grid-cols-3">
+            <div class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:col-span-2">
+                <div class="mb-3">
+                    <div>
+                        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Credentials</h2>
+                        <p class="text-xs text-gray-500 dark:text-gray-300">FleetOps uses these credentials to test the connection and sync devices.</p>
+                    </div>
+                </div>
+
+                {{#if this.selectedProvider}}
+                    <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
+                        {{#each this.credentialFields as |field|}}
+                            <InputGroup
+                                @name={{field.label}}
+                                @value={{get @resource.credentials field.name}}
+                                @required={{field.required}}
+                                @type={{field.type}}
+                                @placeholder={{field.placeholder}}
+                                @helpText={{field.help_text}}
+                                {{on "input" (fn this.setCredential field)}}
+                            />
+                        {{/each}}
+                    </div>
+                    {{#if this.hasAdvancedCredentialFields}}
+                        <details class="mt-4 rounded-md border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/40">
+                            <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-2 text-xs font-semibold text-gray-700 dark:text-gray-200">
+                                <span class="inline-flex items-center gap-2">
+                                    <FaIcon @icon="sliders" />
+                                    Advanced connection settings
+                                </span>
+                                <span class="text-[11px] font-normal text-gray-400 dark:text-gray-500">Endpoint overrides</span>
+                            </summary>
+                            <div class="border-t border-gray-200 p-3 dark:border-gray-700">
+                                <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
+                                    {{#each this.advancedCredentialFields as |field|}}
+                                        <InputGroup
+                                            @name={{field.label}}
+                                            @value={{or (get @resource.credentials field.name) field.default_value}}
+                                            @required={{field.required}}
+                                            @type={{field.type}}
+                                            @placeholder={{field.placeholder}}
+                                            @helpText={{field.help_text}}
+                                            {{on "input" (fn this.setCredential field)}}
+                                        />
+                                    {{/each}}
+                                </div>
+                            </div>
+                        </details>
+                    {{/if}}
+                {{else}}
+                    <div class="rounded-md border border-dashed border-gray-300 p-6 text-center text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300">
+                        Choose a provider before entering credentials.
+                    </div>
+                {{/if}}
+            </div>
+
+            {{#if this.selectedProvider}}
+                <aside class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                    <div class="flex items-start gap-3">
+                        <Image src={{this.selectedProvider.icon}} class="h-9 w-9 rounded" />
+                        <div class="min-w-0">
+                            <div class="truncate text-sm font-bold text-gray-900 dark:text-gray-100">{{this.selectedProvider.label}}</div>
+                            <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">{{this.selectedProvider.description}}</p>
                         </div>
-                    </PowerSelect>
+                    </div>
+                    <div class="mt-3 flex flex-wrap gap-2">
+                        <Badge @status={{if this.selectedProvider.supports_discovery "success" "default"}} @hideStatusDot={{true}}>Discovery</Badge>
+                        <Badge @status={{if this.selectedProvider.supports_webhooks "success" "default"}} @hideStatusDot={{true}}>Webhooks</Badge>
+                    </div>
+                </aside>
+            {{/if}}
+        </section>
+    {{else if (eq this.activeStep 2)}}
+        <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="mb-3">
+                <div>
+                    <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Test Connection</h2>
+                    <p class="text-xs text-gray-500 dark:text-gray-300">Confirm the provider accepts the credentials before saving this connection.</p>
                 </div>
-            </InputGroup>
-        </div>
-    </ContentPanel>
-
-    {{#if this.selectedProvider}}
-        <ContentPanel @title="Credentials" @open={{true}} @actionButtons={{this.credentialsActionButtons}} @wrapperClass="bordered-top">
-            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
-                {{#each this.selectedProvider.required_fields as |field|}}
-                    <InputGroup
-                        @name={{field.label}}
-                        @value={{get @resource.credentials field.name}}
-                        @required={{field.required}}
-                        @type={{if (eq field.type "password") "text" field.type}}
-                        @helpText={{field.help_text}}
-                        {{on "input" (fn this.setCredential field)}}
-                    />
-                {{/each}}
             </div>
-        </ContentPanel>
 
-        <ContentPanel @title="Configure Integration" @open={{true}} @wrapperClass="bordered-top">
-            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <div
+                class="rounded-md border p-4 text-xs transition
+                    {{if (eq this.connectionState 'success') 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-900/10'}}
+                    {{if (eq this.connectionState 'failed') 'border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/10'}}
+                    {{if (eq this.connectionState 'testing') 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/10'}}
+                    {{if (eq this.connectionState 'idle') 'border-dashed border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800'}}"
+            >
+                <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+                    <div class="flex min-w-0 items-start gap-3">
+                        <div
+                            class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md
+                                {{if (eq this.connectionState 'success') 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'}}
+                                {{if (eq this.connectionState 'failed') 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'}}
+                                {{if (eq this.connectionState 'testing') 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 animate-pulse'}}
+                                {{if (eq this.connectionState 'idle') 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300'}}"
+                        >
+                            {{#if (eq this.connectionState "testing")}}
+                                <Spinner />
+                            {{else if (eq this.connectionState "success")}}
+                                <FaIcon @icon="check" />
+                            {{else if (eq this.connectionState "failed")}}
+                                <FaIcon @icon="triangle-exclamation" />
+                            {{else}}
+                                <FaIcon @icon="plug" />
+                            {{/if}}
+                        </div>
+                        <div class="min-w-0">
+                            <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.connectionStateTitle}}</div>
+                            {{#if this.connectionStateMessage}}
+                                <p class="mt-1 max-w-3xl text-xs leading-5 text-gray-600 dark:text-gray-300">{{this.connectionStateMessage}}</p>
+                            {{/if}}
+
+                            {{#if this.hasConnectionMetadata}}
+                                <div class="mt-3 flex flex-wrap gap-2">
+                                    {{#each this.connectionMetadataEntries as |item|}}
+                                        <span class="inline-flex items-center rounded-md border border-gray-200 bg-white px-2 py-1 text-[11px] text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                                            <span class="mr-1 font-semibold text-gray-900 dark:text-gray-100">{{item.label}}</span>
+                                            {{item.value}}
+                                        </span>
+                                    {{/each}}
+                                </div>
+                            {{/if}}
+                        </div>
+                    </div>
+
+                    <div class="flex flex-shrink-0 items-center justify-end">
+                        {{#if (eq this.connectionState "failed")}}
+                            <Button @icon="rotate" @text="Retry Test" @size="xs" @isLoading={{this.testConnection.isRunning}} @disabled={{this.testConnection.isRunning}} @onClick={{perform this.testConnection}} />
+                        {{else if (eq this.connectionState "success")}}
+                            <Button @icon="rotate" @text="Test Again" @size="xs" @isLoading={{this.testConnection.isRunning}} @disabled={{this.testConnection.isRunning}} @onClick={{perform this.testConnection}} />
+                        {{else if (eq this.connectionState "idle")}}
+                            <Button @icon="plug" @text="Test Connection" @size="xs" @isLoading={{this.testConnection.isRunning}} @disabled={{this.testConnection.isRunning}} @onClick={{perform this.testConnection}} />
+                        {{/if}}
+                    </div>
+                </div>
+
+                <div
+                    class="-mx-4 mt-4 border-t px-4
+                        {{if (eq this.connectionState 'success') 'border-green-200 dark:border-green-800'}}
+                        {{if (eq this.connectionState 'failed') 'border-red-200 dark:border-red-800'}}
+                        {{if (eq this.connectionState 'testing') 'border-blue-200 dark:border-blue-800'}}
+                        {{if (eq this.connectionState 'idle') 'border-gray-300 dark:border-gray-700'}}"
+                >
+                    <div class="flex flex-col gap-2 py-2 md:flex-row md:items-center md:justify-between">
+                        <button type="button" class="inline-flex items-center gap-2 text-xs font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-200" {{on "click" this.toggleConnectionDiagnostics}}>
+                            <FaIcon @icon={{if this.showConnectionDiagnostics "chevron-up" "chevron-down"}} class="text-[10px]" />
+                            <span>{{if this.showConnectionDiagnostics "Hide diagnostics" "Show diagnostics"}}</span>
+                        </button>
+
+                        {{#if this.showConnectionDiagnostics}}
+                            <Button @icon="copy" @text="Copy diagnostics" @size="xs" @disabled={{not this.hasConnectionDiagnostics}} @onClick={{this.copyConnectionDiagnostics}} />
+                        {{/if}}
+                    </div>
+
+                    {{#if this.showConnectionDiagnostics}}
+                        <div class="mt-3 max-h-56 overflow-y-auto rounded-md border border-gray-800 bg-gray-900 p-3 font-mono text-[11px] leading-5 shadow-inner dark:border-gray-700 dark:bg-gray-900">
+                            {{#each this.connectionDiagnosticEntries as |entry|}}
+                                <div
+                                    class="flex gap-3
+                                        {{if (eq entry.tone 'success') 'text-green-300'}}
+                                        {{if (eq entry.tone 'danger') 'text-red-300'}}
+                                        {{if (eq entry.tone 'info') 'text-blue-300'}}
+                                        {{if (eq entry.tone 'warning') 'text-yellow-300'}}
+                                        {{if (eq entry.tone 'muted') 'text-gray-300'}}"
+                                >
+                                    <span class="flex-shrink-0 text-gray-500">[{{entry.time}}]</span>
+                                    <span class="min-w-0 break-words">{{entry.text}}</span>
+                                </div>
+                            {{/each}}
+                        </div>
+                    {{/if}}
+                </div>
+            </div>
+
+        </section>
+    {{else if (eq this.activeStep 3)}}
+        <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="mb-3">
+                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Configure Integration</h2>
+                <p class="text-xs text-gray-500 dark:text-gray-300">Name the connection and confirm any provider-facing URLs.</p>
+            </div>
+
+            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
                 <InputGroup @value={{@resource.name}} @name="Integration Name" />
 
                 {{#if this.selectedProvider.supports_webhooks}}
-                    <InputGroup
-                        @name="Webhook URL"
-                        @helpText={{concat "Configure the URL in your " this.selectedProvider.label " dashboard to receive real-time updates."}}
-                        @wrapperClass="col-span-2"
-                    >
-                        <ClickToCopy @value={{this.selectedProvider.webhook_url}} class="w-full">
-                            <Input @value={{this.selectedProvider.webhook_url}} class="form-input w-full" readonly />
-                        </ClickToCopy>
-                        <small class="form-text text-muted mt-1">
-                            Configure this URL in your
-                            {{this.selectedProvider.label}}
-                            dashboard to receive real-time updates.
-                        </small>
+                    <InputGroup @name="Webhook URL" @wrapperClass="lg:col-span-2">
+                        {{#if this.webhookUrl}}
+                            <ClickToCopy @value={{this.webhookUrl}} class="w-full">
+                                <Input @value={{this.webhookUrl}} class="form-input w-full" readonly />
+                            </ClickToCopy>
+                            <small class="form-text text-muted mt-1">Use this public URL in the provider dashboard.</small>
+                        {{else}}
+                            <div class="rounded-md border border-yellow-200 bg-yellow-50 p-3 text-xs text-yellow-800 dark:border-yellow-700 dark:bg-gray-800 dark:text-yellow-300">
+                                The webhook URL will be available after this connection has a public ID.
+                            </div>
+                        {{/if}}
                     </InputGroup>
+                {{else}}
+                    <div class="rounded-md border border-dashed border-gray-300 p-3 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-300 lg:col-span-2">
+                        This provider does not require FleetOps webhook configuration.
+                    </div>
                 {{/if}}
             </div>
-        </ContentPanel>
-    {{/if}}
 
-    <ContentPanel @title="Telematic Blackbox" @open={{true}} @wrapperClass="bordered-top">
-        <div class="grid grid-cols-1 gap-2 lg:grid-cols-3 gap-2 no-input-group-padding text-xs">
-            <InputGroup @value={{@resource.model}} @name="Model" />
-            <InputGroup @value={{@resource.serial_number}} @name="Serial Number" />
-            <InputGroup @value={{@resource.firmware_version}} @name="Firmware Version" />
-            <InputGroup @value={{@resource.imei}} @name="IMEI" />
-            <InputGroup @value={{@resource.imsi}} @name="IMSI" />
-            <InputGroup @value={{@resource.iccid}} @name="ICCID" />
-        </div>
-    </ContentPanel>
+        </section>
+    {{else}}
+        <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+            <div class="mb-3">
+                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Hardware Identity</h2>
+                <p class="text-xs text-gray-500 dark:text-gray-300">Optional blackbox metadata for provider hardware installed in the fleet.</p>
+            </div>
+            <div class="grid grid-cols-1 gap-2 lg:grid-cols-3 no-input-group-padding text-xs">
+                <InputGroup @value={{@resource.model}} @name="Model" />
+                <InputGroup @value={{@resource.serial_number}} @name="Serial Number" />
+                <InputGroup @value={{@resource.firmware_version}} @name="Firmware Version" />
+                <InputGroup @value={{@resource.imei}} @name="IMEI" />
+                <InputGroup @value={{@resource.imsi}} @name="IMSI" />
+                <InputGroup @value={{@resource.iccid}} @name="ICCID" />
+            </div>
+        </section>
 
-    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+        <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
 
-    <RegistryYield @registry="fleet-ops:component:telematic:form" as |RegistryComponent|>
-        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
-    </RegistryYield>
-</div>
+        <RegistryYield @registry="fleet-ops:component:telematic:form" as |RegistryComponent|>
+            <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+        </RegistryYield>
+    {{/if}}
+        </div>
+    </div>
+
+    <footer class="flex-shrink-0 border-t border-gray-200 bg-white px-4 py-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:shadow-sm dark:shadow-black/30 md:px-6">
+        <div class="mx-auto flex w-full max-w-6xl flex-col gap-2 md:flex-row md:items-center md:justify-between">
+            <div class="text-xs text-gray-500 dark:text-gray-300">{{@footerHelp}}</div>
+            <div class="flex items-center justify-end gap-2">
+                <Button @icon="times" @text="Cancel" @size="sm" @onClick={{@onCancel}} />
+                <Button @icon="arrow-left" @text="Back" @size="sm" @disabled={{not this.canGoBack}} @onClick={{this.previousStep}} />
+                <Button
+                    @icon={{this.primaryFooterIcon}}
+                    @text={{this.primaryFooterLabel}}
+                    @type="primary"
+                    @size="sm"
+                    @isLoading={{@isSaving}}
+                    @disabled={{not this.canUsePrimaryAction}}
+                    @onClick={{this.primaryFooterAction}}
+                />
+            </div>
+        </div>
+    </footer>
+</div>