refactor: 💡 move worker filter generator outside of rose::form (#2574)

* refactor: 💡 move worker filter generator outside of rose::form
hashicorp · Dec 5, 2024 · 3a361e8 · 3a361e8
1 parent b5d0c65
commit 3a361e8
Show file tree

Hide file tree

Showing 9 changed files with 333 additions and 347 deletions.
diff --git a/addons/core/translations/en-us.yaml b/addons/core/translations/en-us.yaml
@@ -156,5 +156,5 @@ worker-filter-generator:
       helper: Format a worker name
     operator:
       matches: matches
-      includes: includes
+      contains: contains
       default: --Select an option--
diff --git a/ui/admin/app/components/form/worker-filter/index.hbs b/ui/admin/app/components/form/worker-filter/index.hbs
@@ -0,0 +1,19 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<Rose::Form
+  class='full-width'
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  as |form|
+>
+  <WorkerFilterGenerator @model={{@model}} @name={{@name}} />
+
+  <form.actions
+    @submitText={{t 'actions.save'}}
+    @cancelText={{t 'actions.cancel'}}
+  />
+</Rose::Form>
diff --git a/ui/admin/app/components/worker-filter-generator/index.hbs b/ui/admin/app/components/worker-filter-generator/index.hbs
@@ -0,0 +1,174 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+}}
+
+<Hds::Form::Field as |F|>
+  <F.Control>
+    <Rose::CodeEditor as |c|>
+      <c.toolbar @copyText={{get @model @name}} />
+      <c.fieldEditor
+        @onInput={{fn this.setWorkerFilter @model @name}}
+        @value={{or (get @model @name) ''}}
+        @options={{hash
+          mode='text/x-sh'
+          gutters=(array 'CodeMirror-lint-markers')
+          lint='true'
+        }}
+      />
+    </Rose::CodeEditor>
+  </F.Control>
+  {{#if (get @model.errors @name)}}
+    <F.Error as |E|>
+      {{#each (get @model.errors @name) as |error|}}
+        <E.Message>{{error.message}}</E.Message>
+      {{/each}}
+    </F.Error>
+  {{/if}}
+</Hds::Form::Field>
+
+<Hds::Separator />
+
+<Hds::Form::Toggle::Field
+  name='show_filter_generator'
+  {{on 'change' this.toggleFilterGenerator}}
+  as |F|
+>
+  <F.Label>{{t 'worker-filter-generator.toggle.title'}}</F.Label>
+  <F.HelperText>{{t
+      'worker-filter-generator.toggle.description'
+    }}</F.HelperText>
+</Hds::Form::Toggle::Field>
+
+<Hds::Separator />
+
+{{#if this.showFilterGenerator}}
+  <Hds::Form::Radio::Group
+    class='filter-generator-selection'
+    @name='filter_generator'
+    {{on 'change' this.setGeneratorType}}
+    as |G|
+  >
+    <G.Legend>{{t 'worker-filter-generator.filter-generator.title'}}</G.Legend>
+    <G.HelperText>
+      {{t 'worker-filter-generator.filter-generator.description'}}
+      <br />
+      <Hds::Link::Inline
+        @href={{doc-url 'worker-filters-format'}}
+        @color='secondary'
+      >
+        {{t 'worker-filter-generator.filter-generator.link'}}
+      </Hds::Link::Inline>
+    </G.HelperText>
+    <G.RadioField
+      @value={{this.generatorTagType}}
+      checked={{eq this.selectedGeneratorType this.generatorTagType}}
+      as |F|
+    >
+      <F.Label>{{t
+          'worker-filter-generator.filter-generator.tag.label'
+        }}</F.Label>
+      <F.HelperText>{{t
+          'worker-filter-generator.filter-generator.tag.helper'
+        }}</F.HelperText>
+    </G.RadioField>
+    <G.RadioField
+      @value={{this.generatorNameType}}
+      checked={{eq this.selectedGeneratorType this.generatorNameType}}
+      as |F|
+    >
+      <F.Label>{{t
+          'worker-filter-generator.filter-generator.name.label'
+        }}</F.Label>
+      <F.HelperText>{{t
+          'worker-filter-generator.filter-generator.name.helper'
+        }}</F.HelperText>
+    </G.RadioField>
+  </Hds::Form::Radio::Group>
+
+  <Hds::Form::Fieldset class='input-values' as |F|>
+    <F.Legend>{{t
+        'worker-filter-generator.filter-generator.input-values.title'
+      }}</F.Legend>
+    <F.HelperText>{{t
+        'worker-filter-generator.filter-generator.input-values.description'
+      }}</F.HelperText>
+    <F.Control>
+      {{#if (eq this.selectedGeneratorType this.generatorTagType)}}
+        <Hds::Form::TextInput::Field
+          @value={{this.key}}
+          name='tag_key'
+          @width='320px'
+          {{on 'input' (set-from-event this 'key')}}
+          as |F|
+        >
+          <F.Label>{{t 'form.key.label'}}</F.Label>
+        </Hds::Form::TextInput::Field>
+      {{else}}
+        <Hds::Form::Select::Field
+          name='name_operator'
+          @value={{this.operator}}
+          @width='320px'
+          {{on 'change' (set-from-event this 'operator')}}
+          as |F|
+        >
+          <F.Label>{{t 'form.operator.label'}}</F.Label>
+          <F.Options>
+            <option value=''>
+              {{t 'worker-filter-generator.filter-generator.operator.default'}}
+            </option>
+            {{#each this.operatorOptions as |operator|}}
+              <option value={{operator}} selected={{eq operator this.operator}}>
+                {{#if (eq operator '==')}}
+                  {{operator}}
+                {{else}}
+                  {{t
+                    (concat
+                      'worker-filter-generator.filter-generator.operator.'
+                      operator
+                    )
+                  }}
+                {{/if}}
+              </option>
+            {{/each}}
+          </F.Options>
+        </Hds::Form::Select::Field>
+      {{/if}}
+    </F.Control>
+    <F.Control>
+      <Hds::Form::TextInput::Field
+        @value={{this.value}}
+        name='tag_value'
+        @width='320px'
+        {{on 'input' (set-from-event this 'value')}}
+        as |F|
+      >
+        <F.Label>{{t 'form.value.label'}}</F.Label>
+      </Hds::Form::TextInput::Field>
+    </F.Control>
+  </Hds::Form::Fieldset>
+
+  <Hds::Form::Fieldset class='formatted-results' @layout='vertical' as |F|>
+    <F.Legend>{{t
+        'worker-filter-generator.filter-generator.formatted-result.title'
+      }}</F.Legend>
+    <F.HelperText>{{t
+        'worker-filter-generator.filter-generator.formatted-result.description'
+      }}</F.HelperText>
+    <F.Control>
+      <Hds::Text::Body @tag='p' @weight='semibold'>{{t
+          'worker-filter-generator.filter-generator.formatted-result.label'
+        }}</Hds::Text::Body>
+      <div class='generated-results-container'>
+        <Hds::Form::TextInput::Base
+          readonly
+          id='generated-value'
+          name='generated_value'
+          @value={{this.generatedResult}}
+          @width='320px'
+        />
+        <Hds::Copy::Button @text='Copy' @targetToCopy='#generated-value' />
+      </div>
+    </F.Control>
+  </Hds::Form::Fieldset>
+{{/if}}
diff --git a/...min/app/components/worker-filter/index.js → ...mponents/worker-filter-generator/index.js b/...min/app/components/worker-filter/index.js → ...mponents/worker-filter-generator/index.js
@@ -7,12 +7,12 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
-export default class WorkerFilterComponent extends Component {
+export default class WorkerFilterGeneratorIndexComponent extends Component {
   // =attributes
 
   generatorTagType = 'tag';
   generatorNameType = 'name';
-  operatorOptions = ['==', 'matches', 'includes'];
+  operatorOptions = ['==', 'matches', 'contains'];
   @tracked showFilterGenerator;
   @tracked selectedGeneratorType = this.generatorTagType;
   @tracked key = '';