chore(style): Enforce optional chaining (#21614)

superset-frontend/.eslintrc.js

@@ -96,6 +96,7 @@ module.exports = {
         '@typescript-eslint/no-non-null-assertion': 0, // disabled temporarily
         '@typescript-eslint/explicit-function-return-type': 0,
         '@typescript-eslint/explicit-module-boundary-types': 0, // re-enable up for discussion
+        '@typescript-eslint/prefer-optional-chain': 2,
         camelcase: 0,
         'class-methods-use-this': 0,
         'func-names': 0,

superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx

@@ -54,11 +54,7 @@ const TooltipSection = ({
 );
 
 export const isLabelTruncated = (labelRef?: React.RefObject<any>): boolean =>
-  !!(
-    labelRef &&
-    labelRef.current &&
-    labelRef.current.scrollWidth > labelRef.current.clientWidth
-  );
+  !!(labelRef?.current?.scrollWidth > labelRef?.current?.clientWidth);
 
 export const getColumnLabelText = (column: ColumnMeta): string =>
   column.verbose_name || column.column_name;

superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx

@@ -77,10 +77,8 @@ export const dndGroupByControl: SharedControlConfig<
   valueKey: 'column_name',
   allowAll: true,
   filterOption: ({ data: opt }: FilterOption<ColumnMeta>, text: string) =>
-    (opt.column_name &&
-      opt.column_name.toLowerCase().includes(text.toLowerCase())) ||
-    (opt.verbose_name &&
-      opt.verbose_name.toLowerCase().includes(text.toLowerCase())) ||
+    opt.column_name?.toLowerCase().includes(text.toLowerCase()) ||
+    opt.verbose_name?.toLowerCase().includes(text.toLowerCase()) ||
     false,
   promptTextCreator: (label: unknown) => label,
   mapStateToProps(state, controlState) {

superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts

@@ -67,8 +67,7 @@ class CategoricalColorScale extends ExtensibleFunction {
     const cleanedValue = stringifyAndTrim(value);
     const sharedLabelColor = getSharedLabelColor();
 
-    const parentColor =
-      this.parentForcedColors && this.parentForcedColors[cleanedValue];
+    const parentColor = this.parentForcedColors?.[cleanedValue];
     if (parentColor) {
       sharedLabelColor.addSlice(cleanedValue, parentColor, sliceId);
       return parentColor;

superset-frontend/packages/superset-ui-core/src/connection/callApi/callApi.ts

@@ -94,7 +94,7 @@ export default async function callApi({
     cache !== 'no-store' &&
     cache !== 'reload' &&
     CACHE_AVAILABLE &&
-    (window.location && window.location.protocol) === 'https:'
+    window.location?.protocol === 'https:'
   ) {
     let supersetCache: Cache | null = null;
     try {

superset-frontend/packages/superset-ui-core/src/models/Registry.ts

@@ -169,7 +169,7 @@ export default class Registry<
     const item = this.items[key];
     if (item !== undefined) {
       if ('loader' in item) {
-        return item.loader && item.loader();
+        return item.loader?.();
       }
 
       return item.value;

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts

@@ -46,7 +46,7 @@ export default function transformProps(chartProps: BigNumberTotalChartProps) {
     data.length === 0 ? null : parseMetricValue(data[0][metricName]);
 
   let metricEntry;
-  if (chartProps.datasource && chartProps.datasource.metrics) {
+  if (chartProps.datasource?.metrics) {
     metricEntry = chartProps.datasource.metrics.find(
       metricItem => metricItem.metric_name === metric,
     );

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -155,7 +155,7 @@ export default function transformProps(
   }
 
   let metricEntry;
-  if (chartProps.datasource && chartProps.datasource.metrics) {
+  if (chartProps.datasource?.metrics) {
     metricEntry = chartProps.datasource.metrics.find(
       metricEntry => metricEntry.metric_name === metric,
     );

superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx

@@ -182,7 +182,7 @@ const AceEditorWrapper = ({
     const tableWords = tables.map(t => {
       const tableName = t.value;
       const extendedTable = extendedTables.find(et => et.name === tableName);
-      const cols = (extendedTable && extendedTable.columns) || [];
+      const cols = extendedTable?.columns || [];
       cols.forEach(col => {
         columns[col.name] = null; // using an object as a unique set
       });

superset-frontend/src/components/Chart/chartReducer.ts

@@ -130,10 +130,7 @@ export default function chartReducer(
       return { ...state, latestQueryFormData: action.value };
     },
     [actions.ANNOTATION_QUERY_STARTED](state) {
-      if (
-        state.annotationQuery &&
-        state.annotationQuery[action.annotation.name]
-      ) {
+      if (state.annotationQuery?.[action.annotation.name]) {
         state.annotationQuery[action.annotation.name].abort();
       }
       const annotationQuery = {

superset-frontend/src/components/ConfirmStatusChange/index.tsx

@@ -69,7 +69,7 @@ export default function ConfirmStatusChange({
 
   return (
     <>
-      {children && children(showConfirm)}
+      {children?.(showConfirm)}
       <DeleteModal
         description={description}
         onConfirm={confirm}

superset-frontend/src/components/Datasource/CollectionTable.tsx

@@ -214,7 +214,7 @@ export default class CRUDCollection extends React.PureComponent<
 
   getLabel(col: any) {
     const { columnLabels } = this.props;
-    let label = columnLabels && columnLabels[col] ? columnLabels[col] : col;
+    let label = columnLabels?.[col] ? columnLabels[col] : col;
     if (label.startsWith('__')) {
       // special label-free columns (ie: caret for expand, delete cross)
       label = '';
@@ -350,7 +350,7 @@ export default class CRUDCollection extends React.PureComponent<
   }
 
   renderCell(record: any, col: any) {
-    const renderer = this.props.itemRenderers && this.props.itemRenderers[col];
+    const renderer = this.props.itemRenderers?.[col];
     const val = record[col];
     const onChange = this.onCellChange.bind(this, record.id, col);
     return renderer ? renderer(val, onChange, this.getLabel(col), record) : val;

superset-frontend/src/components/ErrorMessage/DatabaseErrorMessage.tsx

@@ -75,19 +75,18 @@ function DatabaseErrorMessage({
     </>
   );
 
-  const copyText =
-    extra && extra.issue_codes
-      ? t('%(message)s\nThis may be triggered by: \n%(issues)s', {
-          message,
-          issues: extra.issue_codes
-            .map(issueCode => issueCode.message)
-            .join('\n'),
-        })
-      : message;
+  const copyText = extra?.issue_codes
+    ? t('%(message)s\nThis may be triggered by: \n%(issues)s', {
+        message,
+        issues: extra.issue_codes
+          .map(issueCode => issueCode.message)
+          .join('\n'),
+      })
+    : message;
 
   return (
     <ErrorAlert
-      title={t('%s Error', (extra && extra.engine_name) || t('DB engine'))}
+      title={t('%s Error', extra?.engine_name || t('DB engine'))}
       subtitle={subtitle}
       level={level}
       source={source}

superset-frontend/src/components/FacePile/index.tsx

@@ -67,8 +67,8 @@ export default function FacePile({ users, maxCount = 4 }: FacePileProps) {
                 borderColor: color,
               }}
             >
-              {first_name && first_name[0]?.toLocaleUpperCase()}
-              {last_name && last_name[0]?.toLocaleUpperCase()}
+              {first_name?.[0]?.toLocaleUpperCase()}
+              {last_name?.[0]?.toLocaleUpperCase()}
             </StyledAvatar>
           </Tooltip>
         );

superset-frontend/src/components/ListView/Filters/index.tsx

@@ -74,8 +74,7 @@ function UIFilters(
           },
           index,
         ) => {
-          const initialValue =
-            internalFilters[index] && internalFilters[index].value;
+          const initialValue = internalFilters?.[index]?.value;
           if (input === 'select') {
             return (
               <SelectFilter

superset-frontend/src/components/Select/utils.tsx

@@ -170,7 +170,7 @@ export const handleFilterOptionHelper = (
 
   if (filterOption) {
     const searchValue = search.trim().toLowerCase();
-    if (optionFilterProps && optionFilterProps.length) {
+    if (optionFilterProps?.length) {
       return optionFilterProps.some(prop => {
         const optionProp = option?.[prop]
           ? String(option[prop]).trim().toLowerCase()

superset-frontend/src/components/TableCollection/index.tsx

@@ -292,9 +292,9 @@ export default React.memo(
                 {row.cells.map(cell => {
                   if (cell.column.hidden) return null;
                   const columnCellProps = cell.column.cellProps || {};
-                  const isWrapText =
-                    columnsForWrapText &&
-                    columnsForWrapText.includes(cell.column.Header as string);
+                  const isWrapText = columnsForWrapText?.includes(
+                    cell.column.Header as string,
+                  );
 
                   return (
                     <td

superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx

@@ -282,25 +282,22 @@ class SliceHeaderControls extends React.PureComponent<
         break;
       case MENU_KEYS.TOGGLE_CHART_DESCRIPTION:
         // eslint-disable-next-line no-unused-expressions
-        this.props.toggleExpandSlice &&
-          this.props.toggleExpandSlice(this.props.slice.slice_id);
+        this.props.toggleExpandSlice?.(this.props.slice.slice_id);
         break;
       case MENU_KEYS.EXPLORE_CHART:
         // eslint-disable-next-line no-unused-expressions
-        this.props.logExploreChart &&
-          this.props.logExploreChart(this.props.slice.slice_id);
+        this.props.logExploreChart?.(this.props.slice.slice_id);
         break;
       case MENU_KEYS.EXPORT_CSV:
         // eslint-disable-next-line no-unused-expressions
-        this.props.exportCSV && this.props.exportCSV(this.props.slice.slice_id);
+        this.props.exportCSV?.(this.props.slice.slice_id);
         break;
       case MENU_KEYS.FULLSCREEN:
         this.props.handleToggleFullSize();
         break;
       case MENU_KEYS.EXPORT_FULL_CSV:
         // eslint-disable-next-line no-unused-expressions
-        this.props.exportFullCSV &&
-          this.props.exportFullCSV(this.props.slice.slice_id);
+        this.props.exportFullCSV?.(this.props.slice.slice_id);
         break;
       case MENU_KEYS.DOWNLOAD_AS_IMAGE: {
         // menu closes with a delay, we need to hide it manually,

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx

@@ -136,7 +136,7 @@ const FilterControl: React.FC<FilterProps> = ({
           {name}
         </StyledFilterControlTitle>
         {isRequired && <RequiredFieldIndicator />}
-        {filter.description && filter.description.trim() && (
+        {filter.description?.trim() && (
           <DescriptionToolTip description={filter.description} />
         )}
         <StyledIcon data-test="filter-icon">{icon}</StyledIcon>

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/useFilterScope.ts

@@ -62,10 +62,9 @@ export const useFilterScope = (filter: Filter) => {
     if (
       filter.scope.excluded.length === 0 &&
       (filter.scope.rootPath[0] === DASHBOARD_ROOT_ID ||
-        (topLevelTabs &&
-          topLevelTabs.every(topLevelTab =>
-            filter.scope.rootPath.includes(topLevelTab),
-          )))
+        topLevelTabs?.every(topLevelTab =>
+          filter.scope.rootPath.includes(topLevelTab),
+        ))
     ) {
       return { all: [t('All charts')] };
     }

superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx

@@ -396,7 +396,7 @@ export function FiltersConfigModal({
         let array: string[] = [];
         if (formItem && 'dependencies' in formItem) {
           array = [...formItem.dependencies];
-        } else if (configItem && configItem.cascadeParentIds) {
+        } else if (configItem?.cascadeParentIds) {
           array = [...configItem.cascadeParentIds];
         }
         dependencyMap.set(key, array);

superset-frontend/src/dashboard/containers/DashboardPage.tsx

@@ -209,9 +209,9 @@ export const DashboardPage: FC<PageProps> = ({ idOrSlug }: PageProps) => {
 
   useEffect(() => {
     // should convert filter_box to filter component?
-    const hasFilterBox =
-      charts &&
-      charts.some(chart => chart.form_data?.viz_type === 'filter_box');
+    const hasFilterBox = charts?.some(
+      chart => chart.form_data?.viz_type === 'filter_box',
+    );
     const canEdit = dashboard && canUserEditDashboard(dashboard, user);
 
     if (canEdit) {

superset-frontend/src/dashboard/util/filterboxMigrationHelper.ts

@@ -99,10 +99,7 @@ enum FILTER_COMPONENT_FILTER_TYPES {
 const getPreselectedValuesFromDashboard =
   (preselectedFilters: PreselectedFiltersMeatadata) =>
   (filterKey: string, column: string) => {
-    if (
-      preselectedFilters[filterKey] &&
-      preselectedFilters[filterKey][column]
-    ) {
+    if (preselectedFilters[filterKey]?.[column]) {
       // overwrite default values by dashboard default_filters
       return preselectedFilters[filterKey][column];
     }

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx

@@ -151,13 +151,12 @@ const DndFilterSelect = (props: DndFilterSelectProps) => {
           endpoint: `/api/v1/database/${dbId}/table_extra/${name}/${schema}/`,
         })
           .then(({ json }: { json: Record<string, any> }) => {
-            if (json && json.partitions) {
+            if (json?.partitions) {
               const { partitions } = json;
               // for now only show latest_partition option
               // when table datasource has only 1 partition key.
               if (
-                partitions &&
-                partitions.cols &&
+                partitions?.cols &&
                 Object.keys(partitions.cols).length === 1
               ) {
                 setPartitionColumn(partitions.cols[0]);

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx

@@ -158,7 +158,7 @@ export const useSimpleTabFilterProps = (props: Props) => {
     } else if (option && 'saved_metric_name' in option) {
       subject = option.saved_metric_name;
       clause = CLAUSES.HAVING;
-    } else if (option && option.label) {
+    } else if (option?.label) {
       subject = option.label;
       clause = CLAUSES.HAVING;
     }

superset-frontend/src/explore/controlUtils/getControlState.ts

@@ -174,7 +174,7 @@ export function getAllControlsState(
   getSectionsToRender(vizType, datasourceType).forEach(section =>
     section.controlSetRows.forEach(fieldsetRow =>
       fieldsetRow.forEach((field: CustomControlItem) => {
-        if (field && field.config && field.name) {
+        if (field?.config && field.name) {
           const { config, name } = field;
           controlsState[name] = getControlStateFromControlConfig(
             config,

superset-frontend/src/explore/exploreUtils/getParsedExploreURLParams.ts

@@ -105,7 +105,7 @@ const getParsedExploreURLPathParams = (pathname: string) =>
   Object.keys(EXPLORE_URL_PATH_PARAMS).reduce((acc, currentParam) => {
     const re = new RegExp(`/(${currentParam})/(\\w+)`);
     const pathGroups = pathname.match(re);
-    if (pathGroups && pathGroups[2]) {
+    if (pathGroups?.[2]) {
       return { ...acc, [EXPLORE_URL_PATH_PARAMS[currentParam]]: pathGroups[2] };
     }
     return acc;

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

@@ -228,7 +228,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
         : null;
       // firstItem[0] !== undefined for a case when groupby changed but new data still not fetched
       // TODO: still need repopulate default value in config modal when column changed
-      if (firstItem && firstItem[0] !== undefined) {
+      if (firstItem?.[0] !== undefined) {
         updateDataMask(firstItem);
       }
     } else if (isDisabled) {

superset-frontend/src/middleware/asyncEvent.ts

@@ -171,7 +171,7 @@ const loadEventsFromApi = async () => {
   if (Object.keys(listenersByJobId).length) {
     try {
       const { result: events } = await fetchEvents(eventArgs);
-      if (events && events.length) await processEvents(events);
+      if (events?.length) await processEvents(events);
     } catch (err) {
       logging.warn(err);
     }

superset-frontend/src/preamble.ts

@@ -52,7 +52,7 @@ if (typeof window !== 'undefined') {
   bootstrapData = root
     ? JSON.parse(root.getAttribute('data-bootstrap') || '{}')
     : {};
-  if (bootstrapData.common && bootstrapData.common.language_pack) {
+  if (bootstrapData?.common?.language_pack) {
     const languagePack = bootstrapData.common.language_pack;
     configure({ languagePack });
     moment.locale(bootstrapData.common.locale);

superset-frontend/src/setup/setupApp.ts

@@ -52,7 +52,7 @@ function toggleCheckbox(apiUrlPrefix: string, selector: string) {
     .then(() => undefined)
     .catch(response =>
       getClientErrorObject(response).then(parsedResp => {
-        if (parsedResp && parsedResp.message) {
+        if (parsedResp?.message) {
           showApiMessage(parsedResp);
         }
       }),

superset-frontend/src/setup/setupClient.ts

@@ -30,7 +30,7 @@ function getDefaultConfiguration(): ClientConfig {
     protocol: ['http:', 'https:'].includes(window?.location?.protocol)
       ? (window?.location?.protocol as 'http:' | 'https:')
       : undefined,
-    host: (window.location && window.location.host) || '',
+    host: window.location?.host || '',
     csrfToken: csrfToken || cookieCSRFToken,
   };
 }

superset-frontend/src/views/CRUD/alert/AlertList.tsx

@@ -191,7 +191,7 @@ function AlertList({
 
   const toggleActive = useCallback(
     (data: AlertObject, checked: boolean) => {
-      if (data && data.id) {
+      if (data?.id) {
         const update_id = data.id;
         const original = [...alerts];