rebase and address comments

Signed-off-by: abbyhu2000 <[email protected]>

src/plugins/data/public/ui/query_string_input/_language_switcher.scss

@@ -1,3 +1,5 @@
+// TODO: removed the following CSS
+// when https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5628 is completed
 .languageSwitcher {
   max-width: 150px;
 }

src/plugins/data/public/ui/query_string_input/language_switcher.tsx

@@ -78,8 +78,10 @@ export function QueryLanguageSwitcher(props: Props) {
     {
       label: 'PPL',
     },
+    {
+      label: 'SQL',
+    },
   ];
-  const [selectedLanguage, setSelectedLanguage] = useState([dataExplorerOptions[0]]);
 
   const osdDQLDocs = useOpenSearchDashboards().services.docLinks?.links.opensearchDashboards.dql
     .base;
@@ -109,20 +111,26 @@ export function QueryLanguageSwitcher(props: Props) {
   );
 
   const handleLanguageChange = (newLanguage: EuiComboBoxOptionOption[]) => {
+    if (['PPL', 'SQL'].includes(newLanguage[0].label)) {
+      application?.navigateToUrl('../observability-logs#/explorer');
+      return;
+    }
     const queryLanguage = newLanguage[0].label === 'DQL' ? 'kuery' : newLanguage[0].label;
     props.onSelectLanguage(queryLanguage);
-    setSelectedLanguage(newLanguage);
   };
 
   // The following is a temporary solution for adding PPL navigation, and should be replaced once final solution is determined.
   // Follow-up issue: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5628
   if (useObservable(currentApp$!, '') === 'data-explorer' && useNewQuerySelector) {
+    const selectedLanguage = {
+      label: props.language === 'kuery' ? 'DQL' : props.language,
+    };
     return (
       <EuiComboBox
         className="languageSwitcher"
         data-test-subj="languageSelect"
         options={dataExplorerOptions}
-        selectedOptions={selectedLanguage}
+        selectedOptions={[selectedLanguage]}
         onChange={handleLanguageChange}
         singleSelection={{ asPlainText: true }}
         isClearable={false}

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

@@ -93,7 +93,6 @@ interface State {
   selectionEnd: number | null;
   indexPatterns: IIndexPattern[];
   queryBarRect: DOMRect | undefined;
-  currentApp: string | undefined;
 }
 
 const KEY_CODES = {
@@ -120,7 +119,6 @@ export default class QueryStringInputUI extends Component<Props, State> {
     selectionEnd: null,
     indexPatterns: [],
     queryBarRect: undefined,
-    currentApp: undefined,
   };
 
   public inputRef: HTMLTextAreaElement | null = null;
@@ -459,10 +457,6 @@ export default class QueryStringInputUI extends Component<Props, State> {
   };
 
   private onSelectLanguage = (language: string) => {
-    if (language === 'PPL') {
-      this.services.application?.navigateToUrl('../observability-logs#/explorer');
-      return;
-    }
     // Send telemetry info every time the user opts in or out of kuery
     // As a result it is important this function only ever gets called in the
     // UI component's change handler.