From 90d798f4a04358f9533acddaa3a3da1091beccc8 Mon Sep 17 00:00:00 2001
From: Alex Simonok <sashasimonok@gmail.com>
Date: Fri, 23 Aug 2024 00:23:23 +0300
Subject: [PATCH 1/2] Rename groups to tables (#27)

* Rename groups to tables

* Fix type errors
---
 provisioning/dashboards/query-based.json      |  1 -
 .../ColumnsEditor/ColumnsEditor.tsx           |  6 +-
 src/components/GroupsEditor/index.ts          |  1 -
 src/components/TablePanel/TablePanel.test.tsx | 10 +--
 src/components/TablePanel/TablePanel.tsx      | 24 ++---
 .../TablesEditor.styles.ts}                   | 10 +--
 .../TablesEditor.test.tsx}                    | 42 ++++-----
 .../TablesEditor.tsx}                         | 89 +++++++++----------
 src/components/TablesEditor/index.ts          |  1 +
 src/components/index.ts                       |  2 +-
 src/constants.ts                              | 20 ++---
 src/hooks/useContentSizes.ts                  |  2 +-
 src/migration.test.ts                         |  6 +-
 src/migration.ts                              | 22 ++++-
 src/module.ts                                 | 10 +--
 src/types/panel.ts                            | 10 +--
 src/utils/test.ts                             |  2 +-
 17 files changed, 135 insertions(+), 123 deletions(-)
 delete mode 100644 src/components/GroupsEditor/index.ts
 rename src/components/{GroupsEditor/GroupsEditor.styles.ts => TablesEditor/TablesEditor.styles.ts} (89%)
 rename src/components/{GroupsEditor/GroupsEditor.test.tsx => TablesEditor/TablesEditor.test.tsx} (96%)
 rename src/components/{GroupsEditor/GroupsEditor.tsx => TablesEditor/TablesEditor.tsx} (77%)
 create mode 100644 src/components/TablesEditor/index.ts

diff --git a/provisioning/dashboards/query-based.json b/provisioning/dashboards/query-based.json
index cf1c4f2..0bdf4f2 100644
--- a/provisioning/dashboards/query-based.json
+++ b/provisioning/dashboards/query-based.json
@@ -136,7 +136,6 @@
           }
         ]
       },
-      "pluginVersion": "1.1.0",
       "targets": [
         {
           "datasource": {
diff --git a/src/components/ColumnsEditor/ColumnsEditor.tsx b/src/components/ColumnsEditor/ColumnsEditor.tsx
index 9c0ad95..d202175 100644
--- a/src/components/ColumnsEditor/ColumnsEditor.tsx
+++ b/src/components/ColumnsEditor/ColumnsEditor.tsx
@@ -6,7 +6,7 @@ import { Collapse } from '@volkovlabs/components';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { TEST_IDS } from '@/constants';
-import { CellAggregation, CellType, ColumnConfig, ColumnFilterMode, FieldSource, Group } from '@/types';
+import { CellAggregation, CellType, ColumnConfig, ColumnFilterMode, FieldSource, TableConfig } from '@/types';
 import { reorder } from '@/utils';
 
 import { ColumnEditor } from '../ColumnEditor';
@@ -26,12 +26,12 @@ const getItemStyle = (isDragging: boolean, draggableStyle: DraggingStyle | NotDr
 /**
  * Properties
  */
-interface Props extends Group {
+interface Props extends TableConfig {
   /**
    * On Change
    * @param item
    */
-  onChange: (item: Group) => void;
+  onChange: (item: TableConfig) => void;
 
   /**
    * Data
diff --git a/src/components/GroupsEditor/index.ts b/src/components/GroupsEditor/index.ts
deleted file mode 100644
index 0249ccc..0000000
--- a/src/components/GroupsEditor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './GroupsEditor';
diff --git a/src/components/TablePanel/TablePanel.test.tsx b/src/components/TablePanel/TablePanel.test.tsx
index d502f6f..f17cc39 100644
--- a/src/components/TablePanel/TablePanel.test.tsx
+++ b/src/components/TablePanel/TablePanel.test.tsx
@@ -80,7 +80,7 @@ describe('TablePanel', () => {
       render(
         getComponent({
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [
@@ -110,12 +110,12 @@ describe('TablePanel', () => {
     );
   });
 
-  it('Should switch groups and scroll to selected', async () => {
+  it('Should switch tables and scroll to selected', async () => {
     await act(async () =>
       render(
         getComponent({
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [
@@ -157,12 +157,12 @@ describe('TablePanel', () => {
     );
   });
 
-  it('Should work if no groups', async () => {
+  it('Should work if no tables', async () => {
     await act(async () =>
       render(
         getComponent({
           options: {
-            groups: null,
+            tables: null,
           } as any,
         })
       )
diff --git a/src/components/TablePanel/TablePanel.tsx b/src/components/TablePanel/TablePanel.tsx
index 2304c16..7d010ce 100644
--- a/src/components/TablePanel/TablePanel.tsx
+++ b/src/components/TablePanel/TablePanel.tsx
@@ -28,18 +28,18 @@ export const TablePanel: React.FC<Props> = ({ id, data, width, height, options,
    */
   const [currentGroup, setCurrentGroup] = useSavedState<string>({
     key: `volkovlabs.table.panel.${id}`,
-    initialValue: options.groups?.[0]?.name || '',
+    initialValue: options.tables?.[0]?.name || '',
   });
 
   /**
    * Current Columns
    */
   const currentColumns = useMemo(() => {
-    if (options.groups?.length && currentGroup) {
-      return options.groups.find((group) => group.name === currentGroup)?.items;
+    if (options.tables?.length && currentGroup) {
+      return options.tables.find((group) => group.name === currentGroup)?.items;
     }
     return;
-  }, [options.groups, currentGroup]);
+  }, [options.tables, currentGroup]);
 
   /**
    * Table
@@ -50,32 +50,32 @@ export const TablePanel: React.FC<Props> = ({ id, data, width, height, options,
    * Change current group if was removed
    */
   useEffect(() => {
-    if (!options.groups?.some((group) => group.name === currentGroup)) {
-      setCurrentGroup(options.groups?.[0]?.name || '');
+    if (!options.tables?.some((group) => group.name === currentGroup)) {
+      setCurrentGroup(options.tables?.[0]?.name || '');
     }
-  }, [currentGroup, id, options.groups, setCurrentGroup]);
+  }, [currentGroup, id, options.tables, setCurrentGroup]);
 
   /**
    * Show selected group first
    */
   const sortedGroups = useMemo(() => {
-    if (!options.groups) {
+    if (!options.tables) {
       return [];
     }
 
-    const activeGroup = options.groups.find((group) => group.name === currentGroup);
+    const activeGroup = options.tables.find((group) => group.name === currentGroup);
 
     /**
      * Selected group is not found
      */
     if (!activeGroup) {
-      return options.groups;
+      return options.tables;
     }
 
-    const withoutActive = options.groups.filter((group) => group.name !== currentGroup);
+    const withoutActive = options.tables.filter((group) => group.name !== currentGroup);
 
     return [activeGroup, ...withoutActive];
-  }, [currentGroup, options.groups]);
+  }, [currentGroup, options.tables]);
 
   /**
    * Content Sizes
diff --git a/src/components/GroupsEditor/GroupsEditor.styles.ts b/src/components/TablesEditor/TablesEditor.styles.ts
similarity index 89%
rename from src/components/GroupsEditor/GroupsEditor.styles.ts
rename to src/components/TablesEditor/TablesEditor.styles.ts
index eb62da4..ea1d840 100644
--- a/src/components/GroupsEditor/GroupsEditor.styles.ts
+++ b/src/components/TablesEditor/TablesEditor.styles.ts
@@ -6,22 +6,22 @@ import { GrafanaTheme2 } from '@grafana/data';
  */
 export const getStyles = (theme: GrafanaTheme2) => {
   return {
-    newGroup: css`
+    newItem: css`
       margin: ${theme.spacing(2)} 0;
     `,
-    group: css`
+    item: css`
       margin-bottom: ${theme.spacing(1)};
     `,
-    groupHeader: css`
+    itemHeader: css`
       min-height: ${theme.spacing(4)};
       padding: ${theme.spacing(0.5)};
     `,
-    groupHeaderForm: css`
+    itemHeaderForm: css`
       display: flex;
       align-items: center;
       gap: ${theme.spacing(0.5)};
     `,
-    groupHeaderText: css`
+    itemHeaderText: css`
       overflow: hidden;
       text-overflow: ellipsis;
       line-height: ${theme.spacing(4)};
diff --git a/src/components/GroupsEditor/GroupsEditor.test.tsx b/src/components/TablesEditor/TablesEditor.test.tsx
similarity index 96%
rename from src/components/GroupsEditor/GroupsEditor.test.tsx
rename to src/components/TablesEditor/TablesEditor.test.tsx
index b46c88c..1c1d4da 100644
--- a/src/components/GroupsEditor/GroupsEditor.test.tsx
+++ b/src/components/TablesEditor/TablesEditor.test.tsx
@@ -7,15 +7,15 @@ import React from 'react';
 import { TEST_IDS } from '@/constants';
 
 import { ColumnsEditor } from '../ColumnsEditor';
-import { GroupsEditor } from './GroupsEditor';
+import { TablesEditor } from './TablesEditor';
 
 /**
  * Props
  */
-type Props = React.ComponentProps<typeof GroupsEditor>;
+type Props = React.ComponentProps<typeof TablesEditor>;
 
 /**
- * Mock LevelsEditor
+ * Mock Columns Editor
  */
 const ColumnsEditorMock = () => <div {...TEST_IDS.columnsEditor.root.apply()} />;
 
@@ -30,12 +30,12 @@ const InTestIds = {
   buttonLevelsUpdate: 'data-testid button-levels-update',
 };
 
-describe('GroupsEditor', () => {
+describe('TablesEditor', () => {
   /**
    * Get Tested Component
    * @param props
    */
-  const getComponent = (props: Partial<Props>) => <GroupsEditor {...(props as any)} />;
+  const getComponent = (props: Partial<Props>) => <TablesEditor {...(props as any)} />;
 
   const dataFrameA = toDataFrame({
     fields: [
@@ -65,7 +65,7 @@ describe('GroupsEditor', () => {
    * Selectors
    */
   const getSelectors = getJestSelectors({
-    ...TEST_IDS.groupsEditor,
+    ...TEST_IDS.tablesEditor,
     ...InTestIds,
   });
   const selectors = getSelectors(screen);
@@ -80,13 +80,13 @@ describe('GroupsEditor', () => {
     jest.mocked(ColumnsEditor).mockImplementation(ColumnsEditorMock);
   });
 
-  it('Should render groups', () => {
+  it('Should render tables', () => {
     render(
       getComponent({
         context: {
           data: [dataFrameA],
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [],
@@ -105,7 +105,7 @@ describe('GroupsEditor', () => {
     expect(selectors.item(false, 'group2')).toBeInTheDocument();
   });
 
-  it('Should render if groups unspecified', () => {
+  it('Should render if tables unspecified', () => {
     render(
       getComponent({
         context: {
@@ -126,7 +126,7 @@ describe('GroupsEditor', () => {
         context: {
           data: [dataFrameA, dataFrameB],
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [],
@@ -159,7 +159,7 @@ describe('GroupsEditor', () => {
         context: {
           data: [dataFrameA, dataFrameB],
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [],
@@ -200,7 +200,7 @@ describe('GroupsEditor', () => {
           context: {
             data: [dataFrameA, dataFrameB],
             options: {
-              groups: [
+              tables: [
                 {
                   name: 'group1',
                   items: [],
@@ -271,7 +271,7 @@ describe('GroupsEditor', () => {
           context: {
             data: [dataFrameA, dataFrameB],
             options: {
-              groups: [
+              tables: [
                 {
                   name: 'group1',
                   items: [],
@@ -335,7 +335,7 @@ describe('GroupsEditor', () => {
           context: {
             data: [dataFrameA, dataFrameB],
             options: {
-              groups: [
+              tables: [
                 {
                   name: 'group1',
                   items: [],
@@ -398,7 +398,7 @@ describe('GroupsEditor', () => {
           context: {
             data: [dataFrameA, dataFrameB],
             options: {
-              groups: [
+              tables: [
                 {
                   name: 'group1',
                   items: [],
@@ -459,7 +459,7 @@ describe('GroupsEditor', () => {
           context: {
             data: [dataFrameA, dataFrameB],
             options: {
-              groups: [
+              tables: [
                 {
                   name: 'group1',
                   items: [],
@@ -516,7 +516,7 @@ describe('GroupsEditor', () => {
 
     it('Should keep toggled state after save', async () => {
       let options = {
-        groups: [
+        tables: [
           {
             name: 'group1',
             items: [],
@@ -617,7 +617,7 @@ describe('GroupsEditor', () => {
         context: {
           data: [dataFrameA, dataFrameB],
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [],
@@ -670,7 +670,7 @@ describe('GroupsEditor', () => {
         context: {
           data: [dataFrameA, dataFrameB],
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [
@@ -736,7 +736,7 @@ describe('GroupsEditor', () => {
         context: {
           data: [dataFrameA, dataFrameB],
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [
@@ -802,7 +802,7 @@ describe('GroupsEditor', () => {
         context: {
           data: [dataFrameA, dataFrameB],
           options: {
-            groups: [
+            tables: [
               {
                 name: 'group1',
                 items: [
diff --git a/src/components/GroupsEditor/GroupsEditor.tsx b/src/components/TablesEditor/TablesEditor.tsx
similarity index 77%
rename from src/components/GroupsEditor/GroupsEditor.tsx
rename to src/components/TablesEditor/TablesEditor.tsx
index 2832970..3b43658 100644
--- a/src/components/GroupsEditor/GroupsEditor.tsx
+++ b/src/components/TablesEditor/TablesEditor.tsx
@@ -6,16 +6,16 @@ import { Collapse } from '@volkovlabs/components';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { TEST_IDS } from '@/constants';
-import { Group, PanelOptions } from '@/types';
+import { PanelOptions, TableConfig } from '@/types';
 import { reorder } from '@/utils';
 
 import { ColumnsEditor } from '../ColumnsEditor';
-import { getStyles } from './GroupsEditor.styles';
+import { getStyles } from './TablesEditor.styles';
 
 /**
  * Properties
  */
-interface Props extends StandardEditorProps<Group[], null, PanelOptions> {}
+interface Props extends StandardEditorProps<TableConfig[], null, PanelOptions> {}
 
 /**
  * Get Item Style
@@ -28,10 +28,9 @@ const getItemStyle = (isDragging: boolean, draggableStyle: DraggingStyle | NotDr
 });
 
 /**
- * Groups Editor
- * @constructor
+ * Tables Editor
  */
-export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onChange }) => {
+export const TablesEditor: React.FC<Props> = ({ context: { options, data }, onChange }) => {
   /**
    * Styles and Theme
    */
@@ -41,18 +40,18 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
   /**
    * States
    */
-  const [items, setItems] = useState<Group[]>(options?.groups || []);
-  const [newGroup, setNewGroup] = useState('');
+  const [items, setItems] = useState<TableConfig[]>(options?.tables || []);
+  const [newItemName, setNewItemName] = useState('');
   const [collapseState, setCollapseState] = useState<Record<string, boolean>>({});
   const [editItem, setEditItem] = useState('');
   const [editName, setEditName] = useState('');
 
   /**
   /**
-   * Change groups
+   * Change Items
    */
   const onChangeItems = useCallback(
-    (items: Group[]) => {
+    (items: TableConfig[]) => {
       setItems(items);
       onChange(items);
     },
@@ -77,9 +76,9 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
   );
 
   /**
-   * Toggle collapse state for group
+   * Toggle Item Expanded State
    */
-  const onToggleGroup = useCallback((name: string) => {
+  const onToggleItemExpandedState = useCallback((name: string) => {
     setCollapseState((prev) => ({
       ...prev,
       [name]: !prev[name],
@@ -87,19 +86,19 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
   }, []);
 
   /**
-   * Add new group
+   * Add New Item
    */
-  const onAddNewGroup = useCallback(() => {
-    setNewGroup('');
-    onChangeItems(items.concat([{ name: newGroup, items: [] }]));
-    onToggleGroup(newGroup);
-  }, [items, newGroup, onChangeItems, onToggleGroup]);
+  const onAddNewItem = useCallback(() => {
+    setNewItemName('');
+    onChangeItems(items.concat([{ name: newItemName, items: [] }]));
+    onToggleItemExpandedState(newItemName);
+  }, [items, newItemName, onChangeItems, onToggleItemExpandedState]);
 
   /**
-   * Change Group
+   * Change Item
    */
   const onChangeItem = useCallback(
-    (updatedItem: Group) => {
+    (updatedItem: TableConfig) => {
       onChangeItems(items.map((item) => (item.name === updatedItem.name ? updatedItem : item)));
     },
     [items, onChangeItems]
@@ -109,8 +108,8 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
    * Is Name Exists error
    */
   const isNameExistsError = useMemo(() => {
-    return items.some((item) => item.name === newGroup);
-  }, [items, newGroup]);
+    return items.some((item) => item.name === newItemName);
+  }, [items, newItemName]);
 
   /**
    * On Cancel Edit
@@ -159,7 +158,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
   return (
     <>
       <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="groups-editor">
+        <Droppable droppableId="tables-editor">
           {(provided) => (
             <div {...provided.droppableProps} ref={provided.innerRef}>
               {items.map(({ name, items: levels }, index) => (
@@ -169,14 +168,14 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                       ref={provided.innerRef}
                       {...provided.draggableProps}
                       style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
-                      className={styles.group}
+                      className={styles.item}
                     >
                       <Collapse
                         key={name}
                         title={
                           editItem === name ? (
                             <div
-                              className={cx(styles.groupHeader, styles.groupHeaderForm)}
+                              className={cx(styles.itemHeader, styles.itemHeaderForm)}
                               onClick={(event) => event.stopPropagation()}
                             >
                               <InlineField className={styles.fieldName} invalid={!isUpdatedNameValid}>
@@ -193,7 +192,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                       onCancelEdit();
                                     }
                                   }}
-                                  {...TEST_IDS.groupsEditor.fieldName.apply()}
+                                  {...TEST_IDS.tablesEditor.fieldName.apply()}
                                 />
                               </InlineField>
                               <Button
@@ -203,7 +202,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                 icon="times"
                                 size="sm"
                                 onClick={onCancelEdit}
-                                {...TEST_IDS.groupsEditor.buttonCancelRename.apply()}
+                                {...TEST_IDS.tablesEditor.buttonCancelRename.apply()}
                               />
                               <Button
                                 variant="secondary"
@@ -214,16 +213,16 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                 onClick={onSaveName}
                                 disabled={!isUpdatedNameValid}
                                 tooltip={
-                                  isUpdatedNameValid ? '' : 'Name is empty or group with the same name already exists.'
+                                  isUpdatedNameValid ? '' : 'Name is empty or table with the same name already exists.'
                                 }
-                                {...TEST_IDS.groupsEditor.buttonSaveRename.apply()}
+                                {...TEST_IDS.tablesEditor.buttonSaveRename.apply()}
                               />
                             </div>
                           ) : (
-                            <div className={cx(styles.groupHeader, styles.groupHeaderText)}>{name}</div>
+                            <div className={cx(styles.itemHeader, styles.itemHeaderText)}>{name}</div>
                           )
                         }
-                        headerTestId={TEST_IDS.groupsEditor.item.selector(name)}
+                        headerTestId={TEST_IDS.tablesEditor.item.selector(name)}
                         actions={
                           <>
                             {editItem !== name && (
@@ -240,7 +239,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                                   setEditName(name);
                                   setEditItem(name);
                                 }}
-                                {...TEST_IDS.groupsEditor.buttonStartRename.apply()}
+                                {...TEST_IDS.tablesEditor.buttonStartRename.apply()}
                               />
                             )}
                             <Button
@@ -251,11 +250,11 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                               className={styles.actionButton}
                               onClick={() => {
                                 /**
-                                 * Remove group
+                                 * Remove Item
                                  */
                                 onChangeItems(items.filter((item) => item.name !== name));
                               }}
-                              {...TEST_IDS.groupsEditor.buttonRemove.apply()}
+                              {...TEST_IDS.tablesEditor.buttonRemove.apply()}
                             />
                             <div className={styles.dragHandle} {...provided.dragHandleProps}>
                               <Icon name="draggabledots" className={styles.dragIcon} />
@@ -263,7 +262,7 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
                           </>
                         }
                         isOpen={collapseState[name]}
-                        onToggle={() => onToggleGroup(name)}
+                        onToggle={() => onToggleItemExpandedState(name)}
                       >
                         <ColumnsEditor name={name} items={levels} data={data} onChange={onChangeItem} />
                       </Collapse>
@@ -277,26 +276,26 @@ export const GroupsEditor: React.FC<Props> = ({ context: { options, data }, onCh
         </Droppable>
       </DragDropContext>
 
-      <InlineFieldRow className={styles.newGroup} {...TEST_IDS.groupsEditor.newItem.apply()}>
+      <InlineFieldRow className={styles.newItem} {...TEST_IDS.tablesEditor.newItem.apply()}>
         <InlineField
-          label="New Group"
+          label="New Table"
           grow={true}
           invalid={isNameExistsError}
-          error="Group with the same name already exists."
+          error="Table with the same name already exists."
         >
           <Input
             placeholder="Unique name"
-            value={newGroup}
-            onChange={(event) => setNewGroup(event.currentTarget.value.trim())}
-            {...TEST_IDS.groupsEditor.newItemName.apply()}
+            value={newItemName}
+            onChange={(event) => setNewItemName(event.currentTarget.value.trim())}
+            {...TEST_IDS.tablesEditor.newItemName.apply()}
           />
         </InlineField>
         <Button
           icon="plus"
-          title="Add Group"
-          disabled={!newGroup || isNameExistsError}
-          onClick={onAddNewGroup}
-          {...TEST_IDS.groupsEditor.buttonAddNew.apply()}
+          title="Add Table"
+          disabled={!newItemName || isNameExistsError}
+          onClick={onAddNewItem}
+          {...TEST_IDS.tablesEditor.buttonAddNew.apply()}
         >
           Add
         </Button>
diff --git a/src/components/TablesEditor/index.ts b/src/components/TablesEditor/index.ts
new file mode 100644
index 0000000..a0ab1af
--- /dev/null
+++ b/src/components/TablesEditor/index.ts
@@ -0,0 +1 @@
+export * from './TablesEditor';
diff --git a/src/components/index.ts b/src/components/index.ts
index f6e71f3..916aa97 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,3 @@
 export * from './CellRenderer';
-export * from './GroupsEditor';
 export * from './TablePanel';
+export * from './TablesEditor';
diff --git a/src/constants.ts b/src/constants.ts
index 84e2670..114f303 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -9,16 +9,16 @@ export const TEST_IDS = {
     root: createSelector('data-testid panel'),
     tab: createSelector((name: unknown) => `data-testid panel tab-${name}`),
   },
-  groupsEditor: {
-    buttonAddNew: createSelector('data-testid fields-editor button-add-new'),
-    buttonRemove: createSelector('data-testid fields-editor button-remove'),
-    buttonStartRename: createSelector('data-testid fields-editor button-start-rename'),
-    buttonCancelRename: createSelector('data-testid fields-editor button-cancel-rename'),
-    buttonSaveRename: createSelector('data-testid fields-editor button-save-rename'),
-    fieldName: createSelector('data-testid fields-editor field-name'),
-    item: createSelector((name: unknown) => `data-testid fields-editor item-${name}`),
-    newItem: createSelector('data-testid fields-editor new-level'),
-    newItemName: createSelector('data-testid fields-editor new-item-name'),
+  tablesEditor: {
+    buttonAddNew: createSelector('data-testid tables-editor button-add-new'),
+    buttonRemove: createSelector('data-testid tables-editor button-remove'),
+    buttonStartRename: createSelector('data-testid tables-editor button-start-rename'),
+    buttonCancelRename: createSelector('data-testid tables-editor button-cancel-rename'),
+    buttonSaveRename: createSelector('data-testid tables-editor button-save-rename'),
+    fieldName: createSelector('data-testid tables-editor field-name'),
+    item: createSelector((name: unknown) => `data-testid tables-editor item-${name}`),
+    newItem: createSelector('data-testid tables-editor new-level'),
+    newItemName: createSelector('data-testid tables-editor new-item-name'),
   },
   columnsEditor: {
     buttonAddNew: createSelector('data-testid columns-editor button-add-new'),
diff --git a/src/hooks/useContentSizes.ts b/src/hooks/useContentSizes.ts
index 7b93d1a..722c568 100644
--- a/src/hooks/useContentSizes.ts
+++ b/src/hooks/useContentSizes.ts
@@ -39,7 +39,7 @@ export const useContentSizes = ({
 
       setTableTopOffset(topOffset);
     }
-  }, [tableData, height, options.groups]);
+  }, [tableData, height, options.tables]);
 
   return {
     containerRef,
diff --git a/src/migration.test.ts b/src/migration.test.ts
index 7efb4b6..e9bd3ba 100644
--- a/src/migration.test.ts
+++ b/src/migration.test.ts
@@ -44,13 +44,13 @@ describe('migration', () => {
               ],
             },
           ],
-        }),
+        } as any),
       } as any);
 
       /**
        * Should add filter
        */
-      expect(normalizedOptions.groups[0].items[0].filter).toEqual({
+      expect(normalizedOptions.tables[0].items[0].filter).toEqual({
         enabled: false,
         mode: ColumnFilterMode.CLIENT,
         variable: '',
@@ -59,7 +59,7 @@ describe('migration', () => {
       /**
        * Should keep current filter
        */
-      expect(normalizedOptions.groups[0].items[1].filter).toEqual({
+      expect(normalizedOptions.tables[0].items[1].filter).toEqual({
         enabled: true,
         mode: ColumnFilterMode.QUERY,
         variable: 'abc',
diff --git a/src/migration.ts b/src/migration.ts
index a9c60c8..fde5619 100644
--- a/src/migration.ts
+++ b/src/migration.ts
@@ -1,6 +1,13 @@
 import { PanelModel } from '@grafana/data';
 
-import { ColumnConfig, ColumnFilterConfig, ColumnFilterMode, ColumnSortConfig, Group, PanelOptions } from './types';
+import {
+  ColumnConfig,
+  ColumnFilterConfig,
+  ColumnFilterMode,
+  ColumnSortConfig,
+  PanelOptions,
+  TableConfig,
+} from './types';
 
 /**
  * Outdated Column Config
@@ -24,7 +31,7 @@ interface OutdatedColumnConfig extends Omit<ColumnConfig, 'filter' | 'sort'> {
 /**
  * Outdated Group
  */
-interface OutdatedGroup extends Omit<Group, 'items'> {
+interface OutdatedGroup extends Omit<TableConfig, 'items'> {
   items: OutdatedColumnConfig[];
 }
 
@@ -32,7 +39,12 @@ interface OutdatedGroup extends Omit<Group, 'items'> {
  * Outdated Panel Options
  */
 interface OutdatedPanelOptions extends Omit<PanelOptions, 'groups'> {
-  groups: OutdatedGroup[];
+  /**
+   * Groups
+   *
+   * Renamed in v1.1.0
+   */
+  groups?: OutdatedGroup[];
 }
 
 /**
@@ -46,7 +58,7 @@ export const getMigratedOptions = (panel: PanelModel<OutdatedPanelOptions>): Pan
    * Normalize groups
    */
   if (options.groups) {
-    options.groups = options.groups.map((group) => {
+    options.tables = options.groups.map((group) => {
       return {
         ...group,
         items: group.items.map((columnConfig) => {
@@ -76,6 +88,8 @@ export const getMigratedOptions = (panel: PanelModel<OutdatedPanelOptions>): Pan
         }),
       };
     });
+
+    delete options.groups;
   }
 
   return options as PanelOptions;
diff --git a/src/module.ts b/src/module.ts
index 7a83c76..99d97a2 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,6 +1,6 @@
 import { PanelPlugin } from '@grafana/data';
 
-import { GroupsEditor, TablePanel } from './components';
+import { TablePanel, TablesEditor } from './components';
 import { getMigratedOptions } from './migration';
 import { PanelOptions } from './types';
 
@@ -12,10 +12,10 @@ export const plugin = new PanelPlugin<PanelOptions>(TablePanel)
   .setMigrationHandler(getMigratedOptions)
   .setPanelOptions((builder) => {
     builder.addCustomEditor({
-      id: 'groups',
-      path: 'groups',
-      name: 'Column Groups',
-      editor: GroupsEditor,
+      id: 'tables',
+      path: 'tables',
+      name: 'Tables',
+      editor: TablesEditor,
     });
 
     return builder;
diff --git a/src/types/panel.ts b/src/types/panel.ts
index 08e1f9d..1c857e4 100644
--- a/src/types/panel.ts
+++ b/src/types/panel.ts
@@ -110,9 +110,9 @@ export interface ColumnConfig {
 }
 
 /**
- * Group
+ * Table Config
  */
-export interface Group {
+export interface TableConfig {
   /**
    * Name
    *
@@ -134,11 +134,11 @@ export interface Group {
  */
 export interface PanelOptions {
   /**
-   * Groups
+   * Tables
    *
-   * @type {Group[]}
+   * @type {TableConfig[]}
    */
-  groups: Group[];
+  tables: TableConfig[];
 }
 
 /**
diff --git a/src/utils/test.ts b/src/utils/test.ts
index 397a371..8b53ca1 100644
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -66,6 +66,6 @@ export const createVariable = (
  * Create Panel Options
  */
 export const createPanelOptions = (options: Partial<PanelOptions> = {}): PanelOptions => ({
-  groups: [],
+  tables: [],
   ...options,
 });

From 49943fb3012127a4d50b205be029a69619fee965 Mon Sep 17 00:00:00 2001
From: Alex Simonok <sashasimonok@gmail.com>
Date: Fri, 23 Aug 2024 00:27:25 +0300
Subject: [PATCH 2/2] Show aggregation if one column is grouped (#28)

* Rename groups to tables

* Fix type errors

* Show aggregation if one of column is grouped

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>
---
 .../ColumnEditor/ColumnEditor.test.tsx        | 23 +++++++++++++++++--
 src/components/ColumnEditor/ColumnEditor.tsx  | 11 +++++++--
 .../ColumnsEditor/ColumnsEditor.tsx           |  8 +++++++
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/ColumnEditor/ColumnEditor.test.tsx b/src/components/ColumnEditor/ColumnEditor.test.tsx
index c3012f5..a8ddc61 100644
--- a/src/components/ColumnEditor/ColumnEditor.test.tsx
+++ b/src/components/ColumnEditor/ColumnEditor.test.tsx
@@ -39,7 +39,15 @@ describe('ColumnEditor', () => {
    * Get component
    */
   const getComponent = (props: Partial<Props>) => {
-    return <ColumnEditor value={createColumnConfig()} onChange={onChange} data={[frame]} {...(props as any)} />;
+    return (
+      <ColumnEditor
+        value={createColumnConfig()}
+        onChange={onChange}
+        data={[frame]}
+        isAggregationAvailable={false}
+        {...(props as any)}
+      />
+    );
   };
 
   it('Should allow to change label', () => {
@@ -93,8 +101,19 @@ describe('ColumnEditor', () => {
     expect(selectors.fieldAggregation(true)).not.toBeInTheDocument();
   });
 
+  it('Should hide aggregation if not available', () => {
+    render(getComponent({ value: createColumnConfig({ group: false }), isAggregationAvailable: false }));
+
+    expect(selectors.fieldAggregation(true)).not.toBeInTheDocument();
+  });
+
   it('Should allow to change aggregation', () => {
-    render(getComponent({ value: createColumnConfig({ group: false, aggregation: CellAggregation.UNIQUE_COUNT }) }));
+    render(
+      getComponent({
+        value: createColumnConfig({ group: false, aggregation: CellAggregation.UNIQUE_COUNT }),
+        isAggregationAvailable: true,
+      })
+    );
 
     expect(selectors.fieldAggregation()).toBeInTheDocument();
     expect(selectors.fieldAggregation()).toHaveValue(CellAggregation.UNIQUE_COUNT);
diff --git a/src/components/ColumnEditor/ColumnEditor.tsx b/src/components/ColumnEditor/ColumnEditor.tsx
index fd41614..a711076 100644
--- a/src/components/ColumnEditor/ColumnEditor.tsx
+++ b/src/components/ColumnEditor/ColumnEditor.tsx
@@ -29,6 +29,13 @@ interface Props {
    * @type {DataFrame[]}
    */
   data: DataFrame[];
+
+  /**
+   * Is Aggregation Available
+   *
+   * @type {boolean}
+   */
+  isAggregationAvailable: boolean;
 }
 
 /**
@@ -108,7 +115,7 @@ const filterModeOptions = [
 /**
  * Column Editor
  */
-export const ColumnEditor: React.FC<Props> = ({ value, onChange, data }) => {
+export const ColumnEditor: React.FC<Props> = ({ value, onChange, data, isAggregationAvailable }) => {
   /**
    * Current field
    */
@@ -211,7 +218,7 @@ export const ColumnEditor: React.FC<Props> = ({ value, onChange, data }) => {
         </InlineField>
       </InlineFieldRow>
 
-      {!value.group && (
+      {!value.group && isAggregationAvailable && (
         <InlineField label="Aggregation" grow={true}>
           <Select
             value={value.aggregation}
diff --git a/src/components/ColumnsEditor/ColumnsEditor.tsx b/src/components/ColumnsEditor/ColumnsEditor.tsx
index d202175..02e93e3 100644
--- a/src/components/ColumnsEditor/ColumnsEditor.tsx
+++ b/src/components/ColumnsEditor/ColumnsEditor.tsx
@@ -159,6 +159,13 @@ export const ColumnsEditor: React.FC<Props> = ({ items: groups, name, onChange,
     }
   }, [items, newItem, onChangeItems]);
 
+  /**
+   * Is Aggregation Available
+   */
+  const isAggregationAvailable = useMemo(() => {
+    return items.some((item) => item.group);
+  }, [items]);
+
   return (
     <div {...TEST_IDS.columnsEditor.root.apply()}>
       <DragDropContext onDragEnd={onDragEnd}>
@@ -226,6 +233,7 @@ export const ColumnsEditor: React.FC<Props> = ({ items: groups, name, onChange,
                             );
                           }}
                           data={data}
+                          isAggregationAvailable={isAggregationAvailable}
                         />
                       </Collapse>
                     </div>