vault/ui/app/components/clients/date-range.hbs
Chelsea Shaw 050a90b2ab
UI: Update date-picker UX in Client Counts (#27796)
* Create date-range component with tests

* update selectors and callback behavior

* update cc tests & selectors

* cleanup

* RIP calendar-widget and date-dropdown -- you were good components

* reset on close

* Add changelog

* use parseApiTimestamp

* fix test

* cleanup

* make date-range typescript, update behavior

* add words

* minor styling

* fix test
2024-07-17 11:48:44 -05:00

102 lines
3.5 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
~}}
<div ...attributes>
<Hds::Text::Display @tag="p" class="has-bottom-margin-xs">
Date range
</Hds::Text::Display>
<div class="is-flex-align-baseline">
{{#if (and @startTime @endTime)}}
<p class="is-size-6" data-test-date-range="start">{{this.formattedDate @startTime}}</p>
<p class="has-left-margin-xs"> — </p>
<p class="is-size-6 has-left-margin-xs" data-test-date-range="end">{{this.formattedDate @endTime}}</p>
<Hds::Button
class="has-left-margin-xs"
@text="Edit"
@color="tertiary"
@icon="edit"
@iconPosition="trailing"
data-test-date-range-edit
{{on "click" (fn (mut this.showEditModal) true)}}
/>
{{else}}
<Hds::Button
@text="Set date range"
@icon="edit"
{{on "click" (fn (mut this.showEditModal) true)}}
data-test-set-date-range
/>
{{/if}}
</div>
{{#if this.showEditModal}}
<Hds::Modal data-test-date-range-edit-modal @onClose={{this.onClose}} as |M|>
<M.Header>
Edit date range
</M.Header>
<M.Body>
<p class="has-bottom-margin-s">
The start date will be used as the client counting start time and all clients in that month will be considered new.
{{#if this.version.isEnterprise}}
We recommend setting this date as your license or billing start date to get the most accurate new and total
client count estimations. These dates are only for querying data in storage. Editing the date range does not
change any license or billing configurations.
{{/if}}
</p>
<div class="clients-date-range-display">
<div>
<Hds::Form::Label for="start-month">Start</Hds::Form::Label>
<input
class="hds-form-text-input"
type="month"
value={{this.startDate}}
max={{this.currentMonth}}
id="start-month"
name="start"
{{on "change" this.updateDate}}
data-test-date-edit="start"
/>
</div>
<div>
<Hds::Form::Label for="end-month">End</Hds::Form::Label>
<input
class="hds-form-text-input"
type="month"
value={{this.endDate}}
max={{this.currentMonth}}
id="end-month"
name="end"
{{on "change" this.updateDate}}
data-test-date-edit="end"
/>
</div>
<Hds::Button
@text="Reset"
@color="tertiary"
@icon="reload"
{{on "click" this.resetDates}}
data-test-date-edit="reset"
/>
</div>
{{#if this.validationError}}
<Hds::Form::Error
class="has-top-margin-xs"
data-test-date-range-validation
>{{this.validationError}}</Hds::Form::Error>
{{/if}}
{{#if this.useDefaultDates}}
<Hds::Alert @type="compact" @color="highlight" class="has-top-margin-xs" data-test-range-default-alert as |A|>
<A.Description>Dashboard will use the default date range from the API.</A.Description>
</Hds::Alert>
{{/if}}
</M.Body>
<M.Footer as |F|>
<Hds::Button data-test-save @text="Save" {{on "click" this.handleSave}} />
<Hds::Button data-test-cancel @text="Cancel" @color="secondary" {{on "click" F.close}} />
</M.Footer>
</Hds::Modal>
{{/if}}
</div>