Associated detectors flyout through UI actions

public/action/ad_dashboard_action.tsx

@@ -1,6 +1,6 @@
-/* 
- * Copyright OpenSearch Contributors 
- * SPDX-License-Identifier: Apache-2.0 
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
  */
 import { IEmbeddable } from '../../../../src/plugins/dashboard/public/embeddable_plugin';
 import {
@@ -75,4 +75,4 @@ export const createADAction = ({
 
       onClick({ embeddable });
     },
-  });
+  });

public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/AnywhereParentFlyout.tsx

@@ -1,10 +1,10 @@
-/* 
- * Copyright OpenSearch Contributors 
- * SPDX-License-Identifier: Apache-2.0 
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useState } from 'react';
 import { get } from 'lodash';
-import AddAnomalyDetector from '../CreateAnomalyDetector';
+import AssociatedDetectors from '../AssociatedDetectors/containers/AssociatedDetectors';
 import { getEmbeddable } from '../../../../public/services';
 
 const AnywhereParentFlyout = ({ startingFlyout, ...props }) => {
@@ -17,7 +17,7 @@ const AnywhereParentFlyout = ({ startingFlyout, ...props }) => {
   const [selectedDetectorId, setSelectedDetectorId] = useState();
 
   const AnywhereFlyout = {
-    create: AddAnomalyDetector,
+    associated: AssociatedDetectors,
   }[mode];
 
   return (
@@ -30,8 +30,8 @@ const AnywhereParentFlyout = ({ startingFlyout, ...props }) => {
         selectedDetectorId,
         setSelectedDetectorId,
       }}
-  />
+    />
   );
 };
 
-export default AnywhereParentFlyout;
+export default AnywhereParentFlyout;

public/components/FeatureAnywhereContextMenu/AnywhereParentFlyout/index.tsx

@@ -5,4 +5,4 @@
 
 import AnywhereParentFlyout from './AnywhereParentFlyout';
 
-export default AnywhereParentFlyout;
+export default AnywhereParentFlyout;

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx

@@ -0,0 +1,78 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiText,
+  EuiOverlayMask,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalFooter,
+  EuiModalBody,
+  EuiModalHeaderTitle,
+} from '@elastic/eui';
+import { DetectorListItem } from '../../../../../models/interfaces';
+import { EuiSpacer } from '@elastic/eui';
+
+interface ConfirmUnlinkDetectorModalProps {
+  detector: DetectorListItem;
+  onUnlinkDetector(): void;
+  onHide(): void;
+  onConfirm(): void;
+  isListLoading: boolean;
+}
+
+export const ConfirmUnlinkDetectorModal = (
+  props: ConfirmUnlinkDetectorModalProps
+) => {
+  const [isModalLoading, setIsModalLoading] = useState<boolean>(false);
+  const isLoading = isModalLoading || props.isListLoading;
+  return (
+    <EuiOverlayMask>
+      <EuiModal
+        data-test-subj="startDetectorsModal"
+        onClose={props.onHide}
+        maxWidth={450}
+      >
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>{'Remove association?'}</EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          <EuiText>
+            Removing association unlinks {props.detector.name} detector from the
+            visualization but does not delete it. The detector association can
+            be restored.
+          </EuiText>
+          <EuiSpacer size="s" />
+        </EuiModalBody>
+        <EuiModalFooter>
+          {isLoading ? null : (
+            <EuiButtonEmpty
+              data-test-subj="cancelButton"
+              onClick={props.onHide}
+            >
+              Cancel
+            </EuiButtonEmpty>
+          )}
+          <EuiButton
+            data-test-subj="confirmButton"
+            color="primary"
+            fill
+            isLoading={isLoading}
+            onClick={async () => {
+              setIsModalLoading(true);
+              props.onUnlinkDetector();
+              props.onConfirm();
+            }}
+          >
+            {'Remove association'}
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import React from 'react';
+
+const FILTER_TEXT = 'There are no detectors matching your search';
+
+interface EmptyDetectorProps {
+  isFilterApplied: boolean;
+  embeddableTitle: string;
+}
+
+export const EmptyAssociatedDetectorMessage = (props: EmptyDetectorProps) => (
+  <EuiEmptyPrompt
+    title={<h3>No anomaly detectors to display</h3>}
+    titleSize="s"
+    data-test-subj="emptyAssociatedDetectorFlyoutMessage"
+    style={{ maxWidth: '45em' }}
+    body={
+      <EuiText>
+        <p>
+          {props.isFilterApplied
+            ? FILTER_TEXT
+            : `There are no anomaly detectors associated with ${props.embeddableTitle} visualization.`}
+        </p>
+      </EuiText>
+    }
+  />
+);

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ConfirmUnlinkDetectorModal } from './ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal';
+export { EmptyAssociatedDetectorMessage } from './EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage';