From b94dd2db3ccab45fc8a8e341ea7c607ef6af8ecc Mon Sep 17 00:00:00 2001
From: Joel Armendariz <joelarmendariz@Joels-MBP.attlocal.net>
Date: Fri, 6 Nov 2020 14:37:48 -0600
Subject: [PATCH] fix(card-editor): show ids in data series

---
 .../CardEditFormItems/DataSeriesFormItem.jsx      |  2 +-
 .../CardEditFormItems/DataSeriesFormItem.test.jsx | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx
index 5fd7a97995..4083eef119 100644
--- a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx
+++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx
@@ -225,7 +225,7 @@ const DataSeriesFormItem = ({
           id={`${cardConfig.id}_dataSourceIds`}
           label={mergedI18n.selectDataItems}
           direction="bottom"
-          itemToString={(item) => item.text}
+          itemToString={(item) => item.id}
           initialSelectedItems={initialSelectedItems}
           items={formatDataItemsForDropdown(validDataItems)}
           light
diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.test.jsx
index dfc2215aec..a5b7e5f36b 100644
--- a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.test.jsx
+++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.test.jsx
@@ -2,7 +2,10 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import DataSeriesFormItem, { formatSeries } from './DataSeriesFormItem';
+import DataSeriesFormItem, {
+  formatSeries,
+  formatDataItemsForDropdown,
+} from './DataSeriesFormItem';
 
 const cardConfig = {
   id: 'Timeseries',
@@ -78,6 +81,14 @@ describe('DataSeriesFormItem', () => {
       ]);
     });
   });
+  describe('formatDataItemsForDropdown', () => {
+    it('should correctly format the items for the dropdown', () => {
+      expect(formatDataItemsForDropdown(dataItems)).toEqual([
+        { id: 'temperature', text: 'Temperature' },
+        { id: 'pressure', text: 'Pressure' },
+      ]);
+    });
+  });
   describe('dataItems', () => {
     it('should prioritize getValidDataItems', () => {
       render(
@@ -118,7 +129,7 @@ describe('DataSeriesFormItem', () => {
       expect(dataItemsDropdown).toBeInTheDocument();
       fireEvent.click(dataItemsDropdown);
       // click on a data item
-      const pressureDataItem = await screen.findAllByText('Pressure');
+      const pressureDataItem = await screen.findAllByText('pressure');
       expect(pressureDataItem[0]).toBeInTheDocument();
       fireEvent.click(pressureDataItem[0]);
       // assert that onChange was called