opensearch-project#320: Add clear modal for friction

Signed-off-by: Eugene Lee <eugenesk@amazon.com>

dashboards-observability/public/components/application_analytics/components/config_components/log_config.tsx

@@ -3,12 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiAccordion, EuiText, EuiSpacer, EuiButton, EuiFormRow, EuiFlexItem, EuiBadge } from "@elastic/eui";
+import { EuiAccordion, EuiText, EuiSpacer, EuiButton, EuiFormRow, EuiFlexItem, EuiBadge, EuiOverlayMask } from "@elastic/eui";
 import { uiSettingsService } from "../../../../../common/utils";
 import { Autocomplete } from "../../../common/search/autocomplete";
 import DSLService from "public/services/requests/dsl";
 import React, { useState } from "react";
 import { AppAnalyticsComponentDeps } from "../../home";
+import{ getClearModal } from "../helpers/modal_containers";
 
 interface LogConfigProps extends AppAnalyticsComponentDeps {
   dslService: DSLService;
@@ -18,6 +19,8 @@ interface LogConfigProps extends AppAnalyticsComponentDeps {
 export const LogConfig = (props: LogConfigProps) => {
   const { dslService, query, setQuery, setIsFlyoutVisible } = props;
   const [logOpen, setLogOpen] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask></EuiOverlayMask>);
   const tempQuery ='';
 
   const handleQueryChange = async (query: string) => setQuery(query);
@@ -26,7 +29,38 @@ export const LogConfig = (props: LogConfigProps) => {
     setIsFlyoutVisible(true);
   };
 
+  const onCancel = () => {
+    setIsModalVisible(false);
+  }
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onConfirm = () => {
+    handleQueryChange('');
+    closeModal();
+  }
+
+  const clearAllModal = () => {
+    setModalLayout(
+      getClearModal(
+        onCancel, 
+        onConfirm, 
+        'Clear log source', 
+        'Are you sure you would like to clear the log source?', 
+        'Clear'
+      )
+    );
+    showModal();
+  };
+
   return (
+    <div>
     <EuiAccordion
       id="logSource"
       buttonContent={
@@ -40,7 +74,7 @@ export const LogConfig = (props: LogConfigProps) => {
         </EuiText>
         </>
       }
-      extraAction={<EuiButton size="s" disabled={!logOpen || !query.length} onClick={() => { handleQueryChange('') }}>Clear all</EuiButton>}
+      extraAction={<EuiButton size="s" disabled={!logOpen || !query.length} onClick={clearAllModal}>Clear</EuiButton>}
       onToggle={(isOpen) => {setLogOpen(isOpen)}}
       paddingSize="l"
     >
@@ -68,5 +102,7 @@ export const LogConfig = (props: LogConfigProps) => {
         </EuiFlexItem>
       </EuiFormRow>
     </EuiAccordion>
+    {isModalVisible && modalLayout}
+    </div>
   );
 }

dashboards-observability/public/components/application_analytics/components/create.tsx

@@ -37,10 +37,9 @@ interface CreateAppProps extends AppAnalyticsComponentDeps {
 };
 
 export const CreateApp = (props: CreateAppProps) => {
-  const { parentBreadcrumb, chrome, query, filters } = props;
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const { parentBreadcrumb, chrome, query } = props;
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-  const [selectedServices, setSelectedServices] = useState(filters.map((f) => { return { label: f.value }}));
+  const [selectedServices, setSelectedServices] = useState<Array<optionType>>([]);
   const [selectedTraces, setSelectedTraces] = useState<Array<optionType>>([]);
   const [state, setState] = useState({
     name: '',

dashboards-observability/public/components/application_analytics/components/helpers/modal_containers.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiOverlayMask,
+  EuiConfirmModal,
+} from '@elastic/eui';
+
+/* The file contains helper functions for modal layouts
+ * getDeleteModal - returns a confirm-modal with clear option
+ */
+
+export const getClearModal = (
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
+  title: string,
+  message: string,
+  confirmMessage?: string
+) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title={title}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText={confirmMessage || 'Delete'}
+        buttonColor="danger"
+        defaultFocusedButton="confirm"
+      >
+        {message}
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};