Merge branch 'main' into logoFix

changelogs/fragments/7991.yml

@@ -0,0 +1,2 @@
+feat:
+- Keep Autocomplete suggestion window open and put user hints below the suggestion window ([#7991](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7991))

src/plugins/data/public/antlr/dql/code_completion.test.ts

@@ -174,11 +174,11 @@ const testingIndex = ({
 } as unknown) as IndexPattern;
 
 const booleanOperatorSuggestions = [
-  { text: 'or', type: 17, detail: 'Keyword' },
-  { text: 'and', type: 17, detail: 'Keyword' },
+  { text: 'or', type: 11, detail: 'Operator', insertText: 'or ' },
+  { text: 'and', type: 11, detail: 'Operator', insertText: 'and ' },
 ];
 
-const notOperatorSuggestion = { text: 'not', type: 17, detail: 'Keyword' };
+const notOperatorSuggestion = { text: 'not', type: 11, detail: 'Operator', insertText: 'not ' };
 
 const fieldNameSuggestions: Array<{
   text: string;
@@ -211,27 +211,31 @@ const carrierValues = [
 ];
 
 const allCarrierValueSuggestions = [
-  { text: 'Logstash Airways', type: 13, detail: 'Value' },
-  { text: 'BeatsWest', type: 13, detail: 'Value' },
+  { text: 'Logstash Airways', type: 13, detail: 'Value', insertText: 'Logstash Airways ' },
+  { text: 'BeatsWest', type: 13, detail: 'Value', insertText: 'BeatsWest ' },
   {
     text: 'OpenSearch Dashboards Airlines',
     type: 13,
     detail: 'Value',
+    insertText: 'OpenSearch Dashboards Airlines ',
   },
-  { text: 'OpenSearch-Air', type: 13, detail: 'Value' },
+  { text: 'OpenSearch-Air', type: 13, detail: 'Value', insertText: 'OpenSearch-Air ' },
 ];
 
 const carrierWithNotSuggestions = allCarrierValueSuggestions.concat(notOperatorSuggestion);
 
-const logCarrierValueSuggestion = [{ text: 'Logstash Airways', type: 13, detail: 'Value' }];
+const logCarrierValueSuggestion = [
+  { text: 'Logstash Airways', type: 13, detail: 'Value', insertText: 'Logstash Airways ' },
+];
 
 const openCarrierValueSuggestion = [
   {
     text: 'OpenSearch Dashboards Airlines',
     type: 13,
     detail: 'Value',
+    insertText: 'OpenSearch Dashboards Airlines ',
   },
-  { text: 'OpenSearch-Air', type: 13, detail: 'Value' },
+  { text: 'OpenSearch-Air', type: 13, detail: 'Value', insertText: 'OpenSearch-Air ' },
 ];
 
 const addPositionToValue = (vals: any, start: number, end: number) =>

src/plugins/data/public/antlr/dql/code_completion.ts

@@ -135,7 +135,7 @@ export const getSuggestions = async ({
 
     // check to see if field rule is a candidate. if so, suggest field names
     if (candidates.rules.has(DQLParser.RULE_field)) {
-      completions.push(...fetchFieldSuggestions(indexPattern, (f) => `${f}: `));
+      completions.push(...fetchFieldSuggestions(indexPattern, (f: any) => `${f}: `));
     }
 
     interface FoundLastValue {
@@ -247,12 +247,15 @@ export const getSuggestions = async ({
                 cursorLine,
                 cursorColumn + 1
               ),
+              insertText: `${val} `,
             };
           })
         );
       }
     }
 
+    const dqlOperators = new Set([DQLParser.AND, DQLParser.OR, DQLParser.NOT]);
+
     // suggest other candidates, mainly keywords
     [...candidates.tokens.keys()].forEach((token: number) => {
       // ignore identifier, already handled with field rule
@@ -261,11 +264,19 @@ export const getSuggestions = async ({
       }
 
       const tokenSymbolName = parser.vocabulary.getSymbolicName(token)?.toLowerCase();
+
       if (tokenSymbolName) {
+        let type = monaco.languages.CompletionItemKind.Keyword;
+        let detail = SuggestionItemDetailsTags.Keyword;
+        if (dqlOperators.has(token)) {
+          type = monaco.languages.CompletionItemKind.Operator;
+          detail = SuggestionItemDetailsTags.Operator;
+        }
         completions.push({
           text: tokenSymbolName,
-          type: monaco.languages.CompletionItemKind.Keyword,
-          detail: SuggestionItemDetailsTags.Keyword,
+          type,
+          detail,
+          insertText: `${tokenSymbolName} `,
         });
       }
     });

src/plugins/data/public/antlr/shared/constants.ts

@@ -8,5 +8,6 @@ export const enum SuggestionItemDetailsTags {
   Keyword = 'Keyword',
   AggregateFunction = 'Aggregate Function',
   Value = 'Value',
+  Operator = 'Operator',
 }
 export const quotesRegex = /^'(.*)'$/;

src/plugins/data/public/ui/query_editor/_query_editor.scss

@@ -199,3 +199,23 @@
     border: none;
   }
 }
+
+.suggest-widget {
+  position: relative;
+
+  &.visible::after {
+    position: absolute;
+    height: auto;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    background-color: $euiColorLightestShade;
+    border: $euiBorderThin;
+    padding: $euiSizeXS;
+    text-align: left;
+    color: $euiColorDarkShade;
+    font-size: $euiFontSizeXS;
+    content: "Tab to insert, ESC to close window";
+    display: block;
+  }
+}

src/plugins/data/public/ui/query_editor/editors/default_editor/index.tsx

@@ -55,6 +55,7 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
         }}
         suggestionProvider={{
           provideCompletionItems,
+          triggerCharacters: [' '],
         }}
         languageConfiguration={{
           autoClosingPairs: [
@@ -65,6 +66,7 @@ export const DefaultInput: React.FC<DefaultInputProps> = ({
             { open: "'", close: "'" },
           ],
         }}
+        triggerSuggestOnFocus={true}
       />
       <div className="defaultEditor__footer">
         {footerItems && (

src/plugins/data/public/ui/query_editor/editors/shared.tsx

@@ -95,6 +95,7 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
         }}
         suggestionProvider={{
           provideCompletionItems,
+          triggerCharacters: [' '],
         }}
         languageConfiguration={{
           autoClosingPairs: [
@@ -108,6 +109,7 @@ export const SingleLineInput: React.FC<SingleLineInputProps> = ({
             },
           ],
         }}
+        triggerSuggestOnFocus={true}
       />
     </div>
   </div>

src/plugins/data/public/ui/query_editor/query_editor.tsx

@@ -309,6 +309,7 @@ export default class QueryEditorUI extends Component<Props, State> {
                   insertText: s.insertText ?? s.text,
                   range: s.replacePosition ?? defaultRange,
                   detail: s.detail,
+                  command: { id: 'editor.action.triggerSuggest', title: 'Trigger Next Suggestion' },
                 };
               })
           : [],

src/plugins/data_source_management/public/components/create_button/create_button.test.tsx

@@ -17,7 +17,9 @@ describe('CreateButton', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
 
   beforeEach(() => {
-    component = shallow(<CreateButton history={history} dataTestSubj={dataTestSubj} />);
+    component = shallow(
+      <CreateButton history={history} dataTestSubj={dataTestSubj} featureFlagStatus={true} />
+    );
   });
 
   it('should render normally', () => {

src/plugins/data_source_management/public/components/create_button/create_button.tsx

@@ -13,9 +13,10 @@ interface Props {
   history: History;
   isEmptyState?: boolean;
   dataTestSubj: string;
+  featureFlagStatus: boolean;
 }
 
-export const CreateButton = ({ history, isEmptyState, dataTestSubj }: Props) => {
+export const CreateButton = ({ history, isEmptyState, dataTestSubj, featureFlagStatus }: Props) => {
   return (
     <EuiSmallButton
       data-test-subj={dataTestSubj}
@@ -24,7 +25,9 @@ export const CreateButton = ({ history, isEmptyState, dataTestSubj }: Props) =>
     >
       <FormattedMessage
         id="dataSourcesManagement.dataSourceListing.createButton"
-        defaultMessage="Create data source connection"
+        defaultMessage={
+          featureFlagStatus ? 'Create data source connection' : 'Create direct query connection'
+        }
       />
     </EuiSmallButton>
   );

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx

@@ -100,9 +100,9 @@ describe('DataSourceHomePanel', () => {
     expect(wrapper.find(ManageDirectQueryDataConnectionsTableWithRouter)).toHaveLength(1);
   });
 
-  test('does not render OpenSearch connections tab when featureFlagStatus is false', () => {
+  test('does not render any tab when featureFlagStatus is false', () => {
     const wrapper = shallowComponent({ ...defaultProps, featureFlagStatus: false });
-    expect(wrapper.find(EuiTab)).toHaveLength(1);
+    expect(wrapper.find(EuiTab)).toHaveLength(0);
   });
 
   test('calls history.push when CreateButton is clicked', () => {

src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx

@@ -38,17 +38,9 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   useNewUX,
   ...props
 }) => {
-  const {
-    setBreadcrumbs,
-    notifications,
-    http,
-    savedObjects,
-    uiSettings,
-    application,
-    workspaces,
-    docLinks,
-    navigation,
-  } = useOpenSearchDashboards<DataSourceManagementContext>().services;
+  const { setBreadcrumbs, application, workspaces, docLinks, navigation } = useOpenSearchDashboards<
+    DataSourceManagementContext
+  >().services;
 
   const defaultTabId = featureFlagStatus
     ? 'manageOpensearchDataSources'
@@ -69,7 +61,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   const createDataSourceButton = [
     {
       id: 'Create data source',
-      label: 'Create data source connection',
+      label: featureFlagStatus ? 'Create data source connection' : 'Create direct query connection',
       testId: 'createDataSourceButton',
       run: () => props.history.push('/create'),
       fill: true,
@@ -110,6 +102,25 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     },
   ];
 
+  const description = {
+    description: i18n.translate('dataSourcesManagement.dataSourcesTable.description', {
+      defaultMessage: featureFlagStatus
+        ? 'Create and manage data source connections.'
+        : 'Manage direct query data source connections.',
+    }),
+    links: [
+      {
+        href: docLinks.links.opensearchDashboards.dataSource.guide,
+        controlType: 'link',
+        target: '_blank',
+        className: 'external-link-inline-block',
+        label: i18n.translate('dataSourcesManagement.dataSourcesTable.documentation', {
+          defaultMessage: 'Learn more',
+        }),
+      },
+    ],
+  } as TopNavControlDescriptionData;
+
   const renderTabs = () => {
     return tabs.map((tab) => (
       <EuiTab
@@ -126,10 +137,12 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     <EuiPanel>
       {useNewUX && (
         <>
-          <HeaderControl
-            setMountPoint={application.setAppCenterControls}
-            controls={connectionTypeButton}
-          />
+          {featureFlagStatus && (
+            <HeaderControl
+              setMountPoint={application.setAppCenterControls}
+              controls={connectionTypeButton}
+            />
+          )}
           {canManageDataSource && (
             <HeaderControl
               setMountPoint={application.setAppRightControls}
@@ -151,28 +164,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
                       }
                     ),
                   }
-                : ({
-                    description: i18n.translate(
-                      'dataSourcesManagement.dataSourcesTable.description',
-                      {
-                        defaultMessage: 'Create and manage data source connections.',
-                      }
-                    ),
-                    links: [
-                      {
-                        href: docLinks.links.opensearchDashboards.dataSource.guide,
-                        controlType: 'link',
-                        target: '_blank',
-                        className: 'external-link-inline-block',
-                        label: i18n.translate(
-                          'dataSourcesManagement.dataSourcesTable.documentation',
-                          {
-                            defaultMessage: 'Learn more',
-                          }
-                        ),
-                      },
-                    ],
-                  } as TopNavControlDescriptionData),
+                : description,
             ]}
           />
         </>
@@ -184,28 +176,40 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
               <EuiPageHeader>
                 <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
                   <EuiFlexItem grow={false}>
-                    <DataSourceHeader history={props.history} />
+                    <DataSourceHeader
+                      history={props.history}
+                      featureFlagStatus={featureFlagStatus}
+                    />
                   </EuiFlexItem>
                   {canManageDataSource ? (
                     <EuiFlexItem grow={false}>
-                      <CreateButton history={props.history} dataTestSubj="createDataSourceButton" />
+                      <CreateButton
+                        history={props.history}
+                        featureFlagStatus={featureFlagStatus}
+                        dataTestSubj="createDataSourceButton"
+                      />
                     </EuiFlexItem>
                   ) : null}
                 </EuiFlexGroup>
               </EuiPageHeader>
             </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiSpacer size="s" />
-              <EuiTabs size="s">{renderTabs()}</EuiTabs>
-            </EuiFlexItem>
+            {featureFlagStatus && (
+              <EuiFlexItem>
+                <EuiSpacer size="s" />
+                <EuiTabs size="s">{renderTabs()}</EuiTabs>
+              </EuiFlexItem>
+            )}
           </>
         )}
         <EuiFlexItem>
           {selectedTabId === 'manageOpensearchDataSources' && featureFlagStatus && (
             <DataSourceTableWithRouter {...props} />
           )}
-          {selectedTabId === 'manageDirectQueryDataSources' && featureFlagStatus && (
-            <ManageDirectQueryDataConnectionsTableWithRouter {...props} />
+          {(!featureFlagStatus || selectedTabId === 'manageDirectQueryDataSources') && (
+            <ManageDirectQueryDataConnectionsTableWithRouter
+              featureFlagStatus={featureFlagStatus}
+              {...props}
+            />
           )}
         </EuiFlexItem>
       </EuiFlexGroup>