implements reordering of GroupBys and fixes position of Add Button

bitmovin-analytics-datasource/src/components/GroupByInput.tsx

@@ -1,22 +1,47 @@
 import React from 'react';
+import { SelectableValue } from '@grafana/data';
 import { HorizontalGroup, IconButton, Select } from '@grafana/ui';
+
 import { QueryAttribute } from '../types/queryAttributes';
 import { QueryAdAttribute } from '../types/queryAdAttributes';
-import { SelectableValue } from '@grafana/data';
 
 type Props = {
   groupBy: SelectableValue<QueryAttribute | QueryAdAttribute>;
   selectableGroupBys: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
   onDelete: () => void;
   onChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
+  isFirst: boolean;
+  isLast: boolean;
+  onReorderGroupBy: (direction: REORDER_DIRECTION) => void;
 };
+
+export enum REORDER_DIRECTION {
+  UP,
+  DOWN,
+}
 export function GroupByInput(props: Props) {
-  //TODOMY delete margin between select and icon
-  //TODOMY border around the icon
   return (
     <HorizontalGroup>
       <Select value={props.groupBy} onChange={props.onChange} options={props.selectableGroupBys} width={30} />
-      <IconButton tooltip="Delete Group By" name="trash-alt" onClick={() => props.onDelete()} size="lg" />
+      <IconButton
+        tooltip="Move down"
+        onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.DOWN)}
+        name="arrow-down"
+        disabled={props.isLast}
+      />
+      <IconButton
+        tooltip="Move up"
+        onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.UP)}
+        name="arrow-up"
+        disabled={props.isFirst}
+      />
+      <IconButton
+        tooltip="Delete Group By"
+        name="trash-alt"
+        onClick={() => props.onDelete()}
+        size="lg"
+        variant="destructive"
+      />
     </HorizontalGroup>
   );
 }

bitmovin-analytics-datasource/src/components/GroupByRow.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
+import { Box, IconButton, VerticalGroup } from '@grafana/ui';
+import { difference } from 'lodash';
+
 import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
-import { IconButton, Stack } from '@grafana/ui';
-import { GroupByInput } from './GroupByInput';
-import { difference } from 'lodash';
+import { GroupByInput, REORDER_DIRECTION } from './GroupByInput';
 
 type Props = {
   readonly isAdAnalytics: boolean;
@@ -46,14 +47,26 @@ export function GroupByRow(props: Props) {
     props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
   };
 
+  const reorderGroupBy = (direction: REORDER_DIRECTION, index: number) => {
+    const newSelectedGroupBys = [...selectedGroupBys];
+    const groupByToMove = newSelectedGroupBys[index];
+    newSelectedGroupBys.splice(index, 1);
+
+    const newIndex = direction === REORDER_DIRECTION.UP ? index - 1 : index + 1;
+    newSelectedGroupBys.splice(newIndex, 0, groupByToMove);
+    setSelectedGroupBys(newSelectedGroupBys);
+
+    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
+    props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
+  };
+
   const addGroupByInput = () => {
     setSelectedGroupBys((prevState) => [...prevState, { name: '', label: '' }]);
   };
 
-  //TODOMY fix the overflowing of a lot of selects are created, make it go to the next row
   return (
-    <Stack>
-      {selectedGroupBys?.map((item, index) => (
+    <VerticalGroup>
+      {selectedGroupBys?.map((item, index, groupBys) => (
         <GroupByInput
           key={index}
           groupBy={item}
@@ -62,9 +75,14 @@ export function GroupByRow(props: Props) {
           }
           selectableGroupBys={mapGroupBysToSelectableValue()}
           onDelete={() => deleteGroupByInput(index)}
+          isFirst={index === 0}
+          isLast={index === groupBys.length - 1}
+          onReorderGroupBy={(direction: REORDER_DIRECTION) => reorderGroupBy(direction, index)}
         />
       ))}
-      <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xxl" />
-    </Stack>
+      <Box paddingTop={selectedGroupBys.length === 0 ? 0.5 : 0}>
+        <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xxl" />
+      </Box>
+    </VerticalGroup>
   );
 }

bitmovin-analytics-datasource/src/components/QueryEditor.tsx

@@ -89,7 +89,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
           <Select
             defaultValue={DEFAULT_SELECTABLE_QUERY_INTERVAL}
             onChange={(item) => onIntervalChange(item)}
-            width={40}
+            width={30}
             options={SELECTABLE_QUERY_INTERVALS}
           />
         </InlineField>
@@ -109,7 +109,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
         >
           <Select
             onChange={onLicenseChange}
-            width={40}
+            width={30}
             options={selectableLicenses}
             noOptionsMessage="No Analytics Licenses found"
             isLoading={licenseLoadingState === LoadingState.Loading}
@@ -121,15 +121,15 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             <Select
               defaultValue={DEFAULT_SELECTABLE_AGGREGATION}
               onChange={(item) => onAggregationChange(item)}
-              width={40}
+              width={30}
               options={SELECTABLE_AGGREGATIONS}
             />
           </InlineField>
         )}
         <InlineField label="Dimension" labelWidth={20}>
           <Select
             onChange={onDimensionChange}
-            width={40}
+            width={30}
             options={
               datasource.adAnalytics
                 ? SELECTABLE_QUERY_AD_ATTRIBUTES