add queryEditorId to element ids

bitmovin · Jul 23, 2024 · a5b04b5 · a5b04b5
1 parent db42354
commit a5b04b5
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 101 deletions.
diff --git a/e2e/queryEditor.spec.ts b/e2e/queryEditor.spec.ts
diff --git a/src/components/FilterRow.tsx b/src/components/FilterRow.tsx
@@ -13,6 +13,7 @@ type Props = {
   readonly isAdAnalytics: boolean;
   readonly onQueryFilterChange: (newFilters: QueryFilter[]) => void;
   readonly filters: QueryFilter[];
+  readonly queryEditorId: string;
 };
 
 export function FilterRow(props: Props) {
@@ -61,6 +62,7 @@ export function FilterRow(props: Props) {
           onDelete={() => handleQueryFilterDelete(queryFilterIdx)}
           selectedQueryFilters={props.filters}
           key={queryFilterIdx}
+          queryEditorId={props.queryEditorId}
         />
       ))}
 
@@ -72,10 +74,11 @@ export function FilterRow(props: Props) {
             onChange={handleNewQueryFilterChange}
             onDelete={() => setHasNewQueryFilter(false)}
             selectedQueryFilters={props.filters}
+            queryEditorId={props.queryEditorId}
           />
         ) : (
           <IconButton
-            id="query-editor_add-new-filter-button"
+            id={`query-editor-${props.queryEditorId}_add-new-filter-button`}
             name="plus-square"
             tooltip="Add Filter"
             onClick={() => setHasNewQueryFilter(true)}

diff --git a/src/components/GroupByInput.tsx b/src/components/GroupByInput.tsx
@@ -19,20 +19,21 @@ type Props = {
   readonly isFirst: boolean;
   readonly isLast: boolean;
   readonly onReorderGroupBy: (direction: REORDER_DIRECTION) => void;
+  readonly queryEditorId: string;
 };
 
 export function GroupByInput(props: Props) {
   return (
     <HorizontalGroup>
       <Select
-        id="query-editor_group-by-select"
+        id={`query-editor-${props.queryEditorId}_group-by-select`}
         value={isEmpty(props.groupBy) ? undefined : props.groupBy}
         onChange={(selectableValue) => props.onChange(selectableValue.value!)}
         options={props.selectableGroupBys}
         width={30}
       />
       <IconButton
-        id="query-editor_group-by-move-down-button"
+        id={`query-editor-${props.queryEditorId}_group-by-move-down-button`}
         tooltip="Move down"
         onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.DOWN)}
         name="arrow-down"
@@ -45,7 +46,7 @@ export function GroupByInput(props: Props) {
         disabled={props.isFirst}
       />
       <IconButton
-        id="query-editor_delete-group-by-button"
+        id={`query-editor-${props.queryEditorId}_delete-group-by-button`}
         tooltip="Delete Group By"
         name="trash-alt"
         onClick={props.onDelete}

diff --git a/src/components/GroupByRow.tsx b/src/components/GroupByRow.tsx
@@ -41,6 +41,7 @@ type Props = {
   readonly isAdAnalytics: boolean;
   readonly onChange: (newGroupBys: Array<QueryAttribute | QueryAdAttribute>) => void;
   readonly groupBys: Array<QueryAttribute | QueryAdAttribute>;
+  readonly queryEditorId: string;
 };
 
 export function GroupByRow(props: Props) {
@@ -87,11 +88,12 @@ export function GroupByRow(props: Props) {
           isFirst={index === 0}
           isLast={index === selectedGroupBysArray.length - 1}
           onReorderGroupBy={(direction: REORDER_DIRECTION) => reorderGroupBy(direction, index)}
+          queryEditorId={props.queryEditorId}
         />
       ))}
       <div style={{ paddingTop }}>
         <IconButton
-          id="query-editor_add-group-by-button"
+          id={`query-editor-${props.queryEditorId}_add-group-by-button`}
           name="plus-square"
           tooltip="Add Group By"
           onClick={() => addGroupByInput()}

diff --git a/src/components/OrderByInput.tsx b/src/components/OrderByInput.tsx
@@ -19,6 +19,7 @@ type Props = {
   readonly isFirst: boolean;
   readonly isLast: boolean;
   readonly onReorderOrderBy: (direction: REORDER_DIRECTION) => void;
+  readonly queryEditorId: string;
 };
 
 const sortOrderOption: Array<SelectableValue<QuerySortOrder>> = [
@@ -30,20 +31,20 @@ export function OrderByInput(props: Props) {
   return (
     <HorizontalGroup spacing="xs">
       <Select
-        id="query-editor_order-by-select"
+        id={`query-editor-${props.queryEditorId}_order-by-select`}
         value={isEmpty(props.attribute) ? undefined : props.attribute}
         onChange={(selectableValue) => props.onAttributeChange(selectableValue)}
         options={props.selectableOrderByAttributes}
         width={30}
       />
       <RadioButtonGroup
-        id="query-editor_order-by-button-group"
+        id={`query-editor-${props.queryEditorId}_order-by-button-group`}
         options={sortOrderOption}
         value={props.sortOrder}
         onChange={(value) => props.onSortOrderChange(value)}
       />
       <IconButton
-        id="query-editor_order-by-move-down-button"
+        id={`query-editor-${props.queryEditorId}_order-by-move-down-button`}
         tooltip="Move down"
         onClick={() => props.onReorderOrderBy(REORDER_DIRECTION.DOWN)}
         name="arrow-down"
@@ -56,7 +57,7 @@ export function OrderByInput(props: Props) {
         disabled={props.isFirst}
       />
       <IconButton
-        id="query-editor_order-by-delete-button"
+        id={`query-editor-${props.queryEditorId}_order-by-delete-button`}
         tooltip="Delete Order By"
         name="trash-alt"
         onClick={props.onDelete}

diff --git a/src/components/OrderByRow.tsx b/src/components/OrderByRow.tsx
@@ -43,6 +43,7 @@ type Props = {
   readonly isAdAnalytics: boolean;
   readonly onChange: (newOrderBy: QueryOrderBy[]) => void;
   readonly orderBys: QueryOrderBy[];
+  readonly queryEditorId: string;
 };
 
 export function OrderByRow(props: Props) {
@@ -104,12 +105,13 @@ export function OrderByRow(props: Props) {
           isFirst={index === 0}
           isLast={index === selectedOrderBys.length - 1}
           onReorderOrderBy={(direction: REORDER_DIRECTION) => reorderOrderBy(direction, index)}
+          queryEditorId={props.queryEditorId}
         />
       ))}
 
       <div style={{ paddingTop }}>
         <IconButton
-          id="query-editor_add-order-by-button"
+          id={`query-editor-${props.queryEditorId}_add-order-by-button`}
           name="plus-square"
           tooltip="Add Order By"
           onClick={() => addOrderByInput()}

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
@@ -139,7 +139,7 @@ export function QueryEditor(props: Props) {
       <>
         <InlineField label="Interval" labelWidth={20}>
           <Select
-            id="query-editor_interval-select"
+            id={`query-editor-${props.query.refId}_interval-select`}
             defaultValue={DEFAULT_SELECTABLE_QUERY_INTERVAL}
             value={query.interval}
             onChange={(item) => handleIntervalChange(item)}
@@ -163,7 +163,7 @@ export function QueryEditor(props: Props) {
           required
         >
           <Select
-            id="query-editor_license-select"
+            id={`query-editor-${props.query.refId}_license-select`}
             value={query.license}
             onChange={handleLicenseChange}
             width={30}
@@ -181,13 +181,13 @@ export function QueryEditor(props: Props) {
                 onChange={(item) => handleAggregationChange(item)}
                 width={30}
                 options={SELECTABLE_AGGREGATION_METHODS}
-                id="query-editor_aggregation-method-select"
+                id={`query-editor-${props.query.refId}_aggregation-method-select`}
               />
             </InlineField>
           )}
           {isPercentileSelected && (
             <Input
-              id="query-editor_percentile-value-input"
+              id={`query-editor-${props.query.refId}_percentile-value-input`}
               value={percentileValue}
               onChange={handlePercentileValueChange}
               onBlur={handlePercentileBlur}
@@ -207,33 +207,36 @@ export function QueryEditor(props: Props) {
                 ? SELECTABLE_QUERY_AD_ATTRIBUTES
                 : SELECTABLE_QUERY_ATTRIBUTES.concat(SELECTABLE_METRICS)
             }
-            id="query-editor_dimension-select"
+            id={`query-editor-${props.query.refId}_dimension-select`}
           />
         </InlineField>
         <InlineField label="Filter" labelWidth={20}>
           <FilterRow
             isAdAnalytics={props.datasource.isAdAnalytics ? true : false}
             onQueryFilterChange={handleQueryFilterChange}
             filters={query.filter}
+            queryEditorId={props.query.refId}
           />
         </InlineField>
         <InlineField label="Group By" labelWidth={20}>
           <GroupByRow
             isAdAnalytics={props.datasource.isAdAnalytics ? true : false}
             onChange={handleGroupByChange}
             groupBys={query.groupBy}
+            queryEditorId={props.query.refId}
           />
         </InlineField>
         <InlineField label="Order By" labelWidth={20}>
           <OrderByRow
             isAdAnalytics={props.datasource.isAdAnalytics ? true : false}
             onChange={handleOrderByChange}
             orderBys={query.orderBy}
+            queryEditorId={props.query.refId}
           />
         </InlineField>
         <InlineField label="Limit" labelWidth={20}>
           <Input
-            id="query-editor_limit-input"
+            id={`query-editor-${props.query.refId}_limit-input`}
             defaultValue={query.limit}
             type="number"
             onBlur={handleLimitBlur}
@@ -243,15 +246,15 @@ export function QueryEditor(props: Props) {
         </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
           <InlineSwitch
-            id="query-editor_format-as-time-series-switch"
+            id={`query-editor-${props.query.refId}_format-as-time-series-switch`}
             value={isTimeSeries}
             onChange={handleFormatAsTimeSeriesChange}
           ></InlineSwitch>
         </InlineField>
         {isTimeSeries && renderTimeSeriesOption()}
         <InlineField label="Alias By" labelWidth={20}>
           <Input
-            id="query-editor_alias-by-input"
+            id={`query-editor-${props.query.refId}_alias-by-input`}
             defaultValue={query.alias}
             placeholder="Naming pattern"
             onBlur={handleAliasByBlur}

diff --git a/src/components/QueryFilterInput.tsx b/src/components/QueryFilterInput.tsx
@@ -18,6 +18,7 @@ interface QueryFilterInputProps {
   isAdAnalytics: boolean;
   /** Selected query filters are used to filter out used values from attribute select options */
   selectedQueryFilters: QueryFilter[];
+  queryEditorId: string;
 }
 
 export function QueryFilterInput(props: Readonly<QueryFilterInputProps>) {
@@ -120,7 +121,7 @@ export function QueryFilterInput(props: Readonly<QueryFilterInputProps>) {
         {/* this div wrapper is needed to expose `ref` for Tooltip above */}
         <div>
           <Select
-            id="query-editor_filter-attribute-select"
+            id={`query-editor-${props.queryEditorId}_filter-attribute-select`}
             value={attributeSelectValue}
             onChange={handleAttributeChange}
             options={props.isAdAnalytics ? SELECTABLE_QUERY_AD_ATTRIBUTES : SELECTABLE_QUERY_ATTRIBUTES}
@@ -137,7 +138,7 @@ export function QueryFilterInput(props: Readonly<QueryFilterInputProps>) {
         {/* this div wrapper is needed to expose `ref` for Tooltip above */}
         <div>
           <Select
-            id="query-editor_filter-operator-select"
+            id={`query-editor-${props.queryEditorId}_filter-operator-select`}
             value={operatorSelectValue}
             onChange={handleOperatorChange}
             options={SELECTABLE_QUERY_FILTER_OPERATORS}
@@ -152,7 +153,7 @@ export function QueryFilterInput(props: Readonly<QueryFilterInputProps>) {
         theme="error"
       >
         <Input
-          id="query-editor_filter-value-input"
+          id={`query-editor-${props.queryEditorId}_filter-value-input`}
           value={derivedQueryFilterState.value}
           onChange={(e) => handleInputValueChange(e.currentTarget.value)}
           invalid={derivedQueryFilterState.inputValueError != null}
@@ -162,7 +163,7 @@ export function QueryFilterInput(props: Readonly<QueryFilterInputProps>) {
       </Tooltip>
 
       <IconButton
-        id="query-editor_filter-delete-button"
+        id={`query-editor-${props.queryEditorId}_filter-delete-button`}
         variant="destructive"
         name="trash-alt"
         size="lg"
@@ -172,7 +173,7 @@ export function QueryFilterInput(props: Readonly<QueryFilterInputProps>) {
       {/* in "create mode" we want to show save icons all the time */}
       {(isCreatingNewOne || derivedQueryFilterState.dirty) && (
         <IconButton
-          id="query-editor_filter-save-button"
+          id={`query-editor-${props.queryEditorId}_filter-save-button`}
           variant="primary"
           name={isCreatingNewOne ? 'plus-square' : 'save'}
           size="lg"
@@ -183,7 +184,7 @@ export function QueryFilterInput(props: Readonly<QueryFilterInputProps>) {
       {/* in "create mode" there is nothing to revert to */}
       {!isCreatingNewOne && derivedQueryFilterState.dirty && (
         <IconButton
-          id="query-editor_filter-revert-changes-button"
+          id={`query-editor-${props.queryEditorId}_filter-revert-changes-button`}
           variant="secondary"
           name="history"
           size="lg"