[GitHub] [superset] villebro commented on a change in pull request #16440: chore: Select component refactoring - DndColumnSelectControl - Iteration 5

[GitBox <gi...@apache.org>]

villebro commented on a change in pull request #16440:
URL: https://github.com/apache/superset/pull/16440#discussion_r711897034



##########
File path: superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
##########
@@ -149,54 +138,42 @@ const ColumnSelectPopover = ({
         <Tabs.TabPane key="saved" tab={t('Saved')}>
           <FormItem label={t('Saved expressions')}>
             <StyledSelect
+              ariaLabel={t('Saved expressions')}

Review comment:
       nit: to avoid either one of these being updated out of sync with the other, could we introduce a `const HEADER_TEXT = t('Saved expressions')` or similar and then reference that in both the `FormItem` and `ariaLabel`?

##########
File path: superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
##########
@@ -149,54 +138,42 @@ const ColumnSelectPopover = ({
         <Tabs.TabPane key="saved" tab={t('Saved')}>
           <FormItem label={t('Saved expressions')}>
             <StyledSelect
+              ariaLabel={t('Saved expressions')}
               value={selectedCalculatedColumn?.column_name}
-              getPopupContainer={getPopupContainer}
               onChange={onCalculatedColumnChange}
               allowClear
-              showSearch
               autoFocus={!selectedCalculatedColumn}
-              filterOption={filterOption}
               placeholder={t('%s column(s)', calculatedColumns.length)}
-            >
-              {calculatedColumns.map(calculatedColumn => (
-                <Select.Option
-                  value={calculatedColumn.column_name}
-                  filterBy={
-                    calculatedColumn.verbose_name ||
-                    calculatedColumn.column_name
-                  }
-                  key={calculatedColumn.column_name}
-                >
+              options={calculatedColumns.map(calculatedColumn => ({
+                value: calculatedColumn.column_name,
+                label:
+                  calculatedColumn.verbose_name || calculatedColumn.column_name,
+                customLabel: (
                   <StyledColumnOption column={calculatedColumn} showType />
-                </Select.Option>
-              ))}
-            </StyledSelect>
+                ),
+                key: calculatedColumn.column_name,
+              }))}
+            />
           </FormItem>
         </Tabs.TabPane>
         <Tabs.TabPane key="simple" tab={t('Simple')}>
           <FormItem label={t('Column')}>
             <Select
+              ariaLabel="simple-columns"

Review comment:
       With reference to the previous tab, should this be `t('Column')`?




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org