fix(sqllab): Add docText for long keyword (#24847)

superset-frontend/src/SqlLab/components/AceEditorWrapper/useKeywords.test.ts

@@ -267,3 +267,49 @@ test('returns column keywords among selected tables', async () => {
     ),
   );
 });
+
+test('returns long keywords with docText', async () => {
+  const expectLongKeywordDbId = 2;
+  const longKeyword = 'veryveryveryveryverylongtablename';
+  const dbFunctionNamesApiRoute = `glob:*/api/v1/database/${expectLongKeywordDbId}/function_names/`;
+  fetchMock.get(dbFunctionNamesApiRoute, { function_names: [] });
+
+  act(() => {
+    store.dispatch(
+      schemaApiUtil.upsertQueryData(
+        'schemas',
+        {
+          dbId: expectLongKeywordDbId,
+          forceRefresh: false,
+        },
+        ['short', longKeyword].map(value => ({
+          value,
+          label: value,
+          title: value,
+        })),
+      ),
+    );
+  });
+  const { result, waitFor } = renderHook(
+    () =>
+      useKeywords({
+        queryEditorId: 'testqueryid',
+        dbId: expectLongKeywordDbId,
+      }),
+    {
+      wrapper: createWrapper({
+        useRedux: true,
+        store,
+      }),
+    },
+  );
+  await waitFor(() =>
+    expect(result.current).toContainEqual(
+      expect.objectContaining({
+        name: longKeyword,
+        value: longKeyword,
+        docText: longKeyword,
+      }),
+    ),
+  );
+});

superset-frontend/src/SqlLab/components/AceEditorWrapper/useKeywords.ts

@@ -50,6 +50,11 @@ const EMPTY_LIST = [] as typeof sqlKeywords;
 const { useQueryState: useSchemasQueryState } = schemaEndpoints.schemas;
 const { useQueryState: useTablesQueryState } = tableEndpoints.tables;
 
+const getHelperText = (value: string) =>
+  value.length > 30 && {
+    docText: value,
+  };
+
 export function useKeywords(
   { queryEditorId, dbId, schema }: Params,
   skip = false,
@@ -149,6 +154,7 @@ export function useKeywords(
         completer: {
           insertMatch,
         },
+        ...getHelperText(s.value),
       })),
     [schemaOptions, insertMatch],
   );
@@ -163,6 +169,7 @@ export function useKeywords(
         completer: {
           insertMatch,
         },
+        ...getHelperText(value),
       })),
     [tableData?.options, insertMatch],
   );
@@ -174,6 +181,7 @@ export function useKeywords(
         value: col,
         score: COLUMN_AUTOCOMPLETE_SCORE,
         meta: 'column',
+        ...getHelperText(col),
       })),
     [allColumns],
   );
@@ -188,6 +196,7 @@ export function useKeywords(
         completer: {
           insertMatch,
         },
+        ...getHelperText(func),
       })),
     [functionNames, insertMatch],
   );

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

@@ -35,6 +35,8 @@ export interface AceCompleterKeywordData {
   value: string;
   score: number;
   meta: string;
+  docText?: string;
+  docHTML?: string;
 }
 
 export type TextMode = OrigTextMode & { $id: string };