Table, KeyValueInputs: adjust types so yielded data is typed (#3150)

Co-authored-by: shleewhite <[email protected]>

Author: aklkv

.changeset/loud-readers-sneeze.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START components/table/table -->
+`Table` - Update the model and returned `B.data` to use generic types, so the type of the data is retained.
+<!-- END -->
+
+<!-- START components/form/key-value-inputs -->
+`KeyValueInputs` - Update the data and returned `R.rowData` to use generic types, so the type of the data is retained.
+<!-- END -->

packages/components/src/components/hds/form/key-value-inputs/index.ts

@@ -37,9 +37,9 @@ const KEY_VALUE_INPUTS_FIRST_ROW_SELECTOR =
 const KEY_VALUE_INPUTS_DELETE_ROW_CONTAINER_SELECTOR =
   '.hds-form-key-value-inputs__delete-row-button-container';
 
-export interface HdsFormKeyValueInputsSignature {
+export interface HdsFormKeyValueInputsSignature<T = unknown> {
   Args: {
-    data: Array<unknown>;
+    data: Array<T>;
     extraAriaDescribedBy?: string;
     isOptional?: boolean;
     isRequired?: boolean;
@@ -72,7 +72,7 @@ export interface HdsFormKeyValueInputsSignature {
           typeof HdsFormKeyValueInputsDeleteRowButtonComponent,
           'onInsert' | 'onRemove' | 'returnFocusTo' | 'rowData' | 'rowIndex'
         >;
-        rowData?: unknown;
+        rowData?: T;
         rowIndex?: number;
       },
     ];
@@ -92,7 +92,9 @@ export interface HdsFormKeyValueInputsSignature {
 
 // @ts-expect-error: decorator function return type 'ClassOf<AriaDescribedBy>' is not assignable to 'typeof HdsFormField'
 @ariaDescribedBy
-export default class HdsFormKeyValueInputs extends Component<HdsFormKeyValueInputsSignature> {
+export default class HdsFormKeyValueInputs<T = unknown> extends Component<
+  HdsFormKeyValueInputsSignature<T>
+> {
   private _element!: HTMLFieldSetElement;
   @tracked _gridTemplateColumns = '';
 

packages/components/src/components/hds/table/index.ts

@@ -44,7 +44,7 @@ export const VALIGNMENTS: HdsTableVerticalAlignment[] = Object.values(
 );
 export const DEFAULT_VALIGN = HdsTableVerticalAlignmentValues.Top;
 
-export interface HdsTableSignature {
+export interface HdsTableSignature<T = HdsTableModel> {
   Args: {
     align?: HdsTableHorizontalAlignment;
     caption?: string;
@@ -54,7 +54,7 @@ export interface HdsTableSignature {
     isFixedLayout?: boolean;
     isSelectable?: boolean;
     isStriped?: boolean;
-    model?: HdsTableModel;
+    model?: T[];
     onSelectionChange?: (selection: HdsTableOnSelectionChangeSignature) => void;
     onSort?: (sortBy: string, sortOrder: HdsTableThSortOrder) => void;
     selectionAriaLabelSuffix?: string;
@@ -80,7 +80,7 @@ export interface HdsTableSignature {
         Td?: ComponentLike<HdsTableTdSignature>;
         Tr?: ComponentLike<HdsTableTrSignature>;
         Th?: ComponentLike<HdsTableThSignature>;
-        data?: Record<string, unknown>;
+        data?: T;
         rowIndex?: number;
         sortBy?: string;
         sortOrder?: HdsTableThSortOrder;
@@ -90,7 +90,9 @@ export interface HdsTableSignature {
   Element: HTMLTableElement;
 }
 
-export default class HdsTable extends Component<HdsTableSignature> {
+export default class HdsTable<T = HdsTableModel> extends Component<
+  HdsTableSignature<T>
+> {
   @service hdsIntl!: HdsIntlService;
 
   @tracked sortBy;
@@ -101,7 +103,7 @@ export default class HdsTable extends Component<HdsTableSignature> {
   private _selectableRows: HdsTableSelectableRow[] = [];
   @tracked private _isSelectAllCheckboxSelected?: boolean = undefined;
 
-  constructor(owner: Owner, args: HdsTableSignature['Args']) {
+  constructor(owner: Owner, args: HdsTableSignature<T>['Args']) {
     super(owner, args);
     this.sortBy = this.args.sortBy ?? undefined;
     this.sortOrder = this.args.sortOrder ?? HdsTableThSortOrderValues.Asc;

showcase/app/components/mock/app/main/generic-form/partials/add-policy.gts

@@ -243,12 +243,10 @@ export default class MockAppMainGenericFormPartialsAddPolicy extends Component<M
           <R.Field @isRequired={{true}} as |F|>
             <F.Label>Tag name</F.Label>
             <F.HelperText>Lorem ipsum dolor sit amet.</F.HelperText>
-            {{! @glint-expect-error }}
             <F.TextInput name="key" @value={{R.rowData.name}} />
           </R.Field>
           <R.Field @isOptional={{true}} as |F|>
             <F.Label>Tag description</F.Label>
-            {{! @glint-expect-error }}
             <F.TextInput name="value" @value={{R.rowData.description}} />
           </R.Field>
           <R.DeleteRowButton />

showcase/app/components/mock/components/form/key-value-inputs/with-dynamic-inputs.gts

@@ -301,56 +301,47 @@ export default class MockComponentsFormKeyValueInputsWithDynamicInputs extends C
                 >
                   <option
                     value=""
-                    {{! @glint-expect-error }}
                     selected={{if (eq R.rowData.key "") true}}
                   ></option>
                   <option
                     value="textinput"
-                    {{! @glint-expect-error }}
                     selected={{if (eq R.rowData.key "textinput") true}}
                   >Single line</option>
                   <option
                     value="textarea"
-                    {{! @glint-expect-error }}
                     selected={{if (eq R.rowData.key "textarea") true}}
                   >Multiline</option>
                   <option
                     value="maskedinput"
-                    {{! @glint-expect-error }}
                     selected={{if (eq R.rowData.key "maskedinput") true}}
                   >Masked text</option>
                   <option
                     value="select"
-                    {{! @glint-expect-error }}
                     selected={{if (eq R.rowData.key "select") true}}
                   >Select from list</option>
                 </F.Select>
               </R.Field>
 
               <R.Field as |F|>
                 <F.Label>Value</F.Label>
-                {{! @glint-expect-error }}
                 {{#if (eq R.rowData.key "textarea")}}
                   <F.Textarea
                     name="value-{{R.rowIndex}}"
                     {{! @glint-expect-error }}
                     @value={{R.rowData.value}}
                     {{on "input" this.onInputUpdateModel}}
                   />
-                  {{! @glint-expect-error }}
                 {{else if (eq R.rowData.key "maskedinput")}}
                   <F.MaskedInput
                     name="value-{{R.rowIndex}}"
                     {{! @glint-expect-error }}
                     @value={{R.rowData.value}}
                     {{on "input" this.onInputUpdateModel}}
                   />
-                  {{! @glint-expect-error }}
                 {{else if (eq R.rowData.key "select")}}
                   <F.SuperSelectMultiple
                     name="value-{{R.rowIndex}}"
                     @options={{SUPERSELECT_OPTIONS}}
-                    {{! @glint-expect-error }}
                     @selected={{R.rowData.value}}
                     @onChange={{this.onPowerSelectChangeUpdateModel}}
                     @ariaLabel="Label"

showcase/app/components/mock/components/form/key-value-inputs/with-validation-and-limit.gts

@@ -324,28 +324,23 @@ export default class MockComponentsFormKeyValueInputsWithValidationAndLimit exte
             <:row as |R|>
               <R.Field
                 @isRequired={{true}}
-                {{! @glint-expect-error }}
                 @isInvalid={{if R.rowData.validationMessage true}}
                 as |F|
               >
                 <F.Label>Tag name</F.Label>
                 <F.TextInput
                   name="tag-name-{{R.rowIndex}}"
-                  {{! @glint-expect-error }}
                   @value={{R.rowData.tag-name}}
                   {{on "input" this.onInputUpdateModel}}
                 />
-                {{! @glint-expect-error }}
                 {{#if R.rowData.validationMessage}}
-                  {{! @glint-expect-error }}
                   <F.Error>{{R.rowData.validationMessage}}</F.Error>
                 {{/if}}
               </R.Field>
               <R.Field @isOptional={{true}} as |F|>
                 <F.Label>Tag description</F.Label>
                 <F.TextInput
                   name="tag-description-{{R.rowIndex}}"
-                  {{! @glint-expect-error }}
                   @value={{R.rowData.tag-description}}
                   {{on "input" this.onInputUpdateModel}}
                 />

showcase/app/routes/page-components/rich-tooltip.ts

@@ -10,6 +10,8 @@ import {
   PLACEMENTS,
   ENABLE_COLLISION_DETECTION_OPTIONS,
 } from '@hashicorp/design-system-components/modifiers/hds-anchored-position';
+import type { HdsBadgeColors } from '@hashicorp/design-system-components/components/hds/badge/types';
+import type { HdsIconSignature } from '@hashicorp/design-system-components/components/hds/icon/index';
 
 import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
 
@@ -18,12 +20,25 @@ export type PageComponentsRichTooltipModel =
 
 type TextAlignOptions = 'left' | 'center' | 'right';
 
+interface DEMO_TABLE_DATA_ITEM {
+  id: number;
+  'peer-name': string;
+  'cluster-partition': string;
+  'cluster-icon': HdsIconSignature['Args']['name'];
+  status: {
+    text: string;
+    color: HdsBadgeColors;
+    icon: HdsIconSignature['Args']['name'];
+  };
+  tagsCount: number;
+}
+
 export default class PageComponentsRichTooltipRoute extends Route {
   model() {
     // these are used only for presentation purpose in the showcase
     const STATES = ['default', 'hover', 'active', 'focus'];
 
-    const DEMO_TABLE_DATA = [
+    const DEMO_TABLE_DATA: DEMO_TABLE_DATA_ITEM[] = [
       {
         id: 1,
         'peer-name': 'cluster-2-partition-2',

showcase/app/templates/page-components/form/key-value-inputs/frameless/demo-in-form.hbs

@@ -91,11 +91,8 @@
                       <F.Label>OS and architecture</F.Label>
                       <F.Select name="plugin-os">
                         <option></option>
-                        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
                         <option selected={{if (eq "darwin - arm64" R.rowData.os) true}}>darwin - arm64</option>
-                        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
                         <option selected={{if (eq "linux - 386" R.rowData.os) true}}>linux - 386</option>
-                        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
                         <option selected={{if (eq "windows - amd64" R.rowData.os) true}}>windows - amd64</option>
                       </F.Select>
                     </R.Field>

showcase/app/templates/page-components/form/key-value-inputs/frameless/demo-responsiveness-custom-widths.hbs

@@ -19,27 +19,18 @@
     </:header>
 
     <:row as |R|>
-      {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090}}
       <R.Field @isInvalid={{(if R.rowData.error true)}} @width="1fr" as |F|>
         <F.Label>Key (1fr)</F.Label>
         <F.HelperText>The key you enter should be a good key.</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090}}
         <F.TextInput @value={{R.rowData.key}} />
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090}}
         {{#if R.rowData.error}}
-          {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090}}
           <F.Error>{{R.rowData.error}}</F.Error>
         {{/if}}
       </R.Field>
-
-      {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
       <R.Field @isInvalid={{(if R.rowData.error true)}} @width="2fr" as |F|>
         <F.Label>Value (2fr)</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090}}
         <F.Textarea @value={{R.rowData.value}} />
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
         {{#if R.rowData.error}}
-          {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
           <F.Error>{{R.rowData.error}}</F.Error>
         {{/if}}
       </R.Field>

showcase/app/templates/page-components/form/key-value-inputs/frameless/demo-responsiveness.hbs

@@ -19,27 +19,18 @@
     </:header>
 
     <:row as |R|>
-      {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
       <R.Field @isInvalid={{(if R.rowData.error true)}} as |F|>
         <F.Label>Key</F.Label>
         <F.HelperText>The key you enter should be a good key.</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
         <F.TextInput @value={{R.rowData.key}} />
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
         {{#if R.rowData.error}}
-          {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
           <F.Error>{{R.rowData.error}}</F.Error>
         {{/if}}
       </R.Field>
-
-      {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
       <R.Field @isInvalid={{(if R.rowData.error true)}} as |F|>
         <F.Label>Value</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
         <F.Textarea @value={{R.rowData.value}} />
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
         {{#if R.rowData.error}}
-          {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
           <F.Error>{{R.rowData.error}}</F.Error>
         {{/if}}
       </R.Field>