attempting to add model

Author: DarshanaVenkatesh

packages/compass-aggregations/src/components/confirm-update-view-model/confirm-update-view-modal.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { FormModal } from '@mongodb-js/compass-components';
+import type { UpdateViewState } from '../../modules/update-view';
+import { closeConfirmUpdateModal, updateView } from '../../modules/update-view';
+import { connect } from 'react-redux';
+
+type ConfirmUpdateViewModalProps = {
+  updateView: () => void;
+  isOpen?: boolean;
+  closeModal: () => void;
+};
+
+const ConfirmUpdateViewModal: React.FunctionComponent<
+  ConfirmUpdateViewModalProps
+> = ({ updateView, isOpen, closeModal }) => {
+  const isSearchCompatibleUpdate = true;
+  return (
+    <FormModal
+      title={'Are you sure you want to update the view?'}
+      open={isOpen}
+      onSubmit={updateView}
+      onCancel={closeModal}
+      submitButtonText="Update"
+      data-testid="confirm-update-view-modal"
+    >
+      {isSearchCompatibleUpdate
+        ? 'There are search indexes created on this view. Updating the view will result in an ' +
+          'index rebuild, which will consume additional resources on your cluster.'
+        : 'This update will make the view incompatible with search indexes and will cause all ' +
+          'search indexes to fail. Only views containing $addFields, $set or $match stages with ' +
+          'the $expr operator are compatible with search indexes.'}
+    </FormModal>
+  );
+};
+
+const mapStateToProps = (state: UpdateViewState) => ({
+  isOpen: state.isOpen,
+});
+
+// Connect actions for dispatching
+const MappedConfirmUpdateViewModal = connect(mapStateToProps, {
+  updateView,
+  closeModal: closeConfirmUpdateModal,
+})(ConfirmUpdateViewModal);
+
+export default MappedConfirmUpdateViewModal;
+export { ConfirmUpdateViewModal };

packages/compass-aggregations/src/components/confirm-update-view-model/index.ts

@@ -0,0 +1,5 @@
+import MappedConfirmUpdateViewModal, {
+  ConfirmUpdateViewModal,
+} from './confirm-update-view-modal';
+export default MappedConfirmUpdateViewModal;
+export { ConfirmUpdateViewModal };

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/pipeline-actions.tsx

@@ -14,7 +14,7 @@ import {
   exportAggregationResults,
   runAggregation,
 } from '../../../modules/aggregation';
-import { updateView } from '../../../modules/update-view';
+import { openConfirmUpdateModal } from '../../../modules/update-view';
 import { explainAggregation } from '../../../modules/explain';
 import {
   getIsPipelineInvalidFromBuilderState,
@@ -59,6 +59,7 @@ type PipelineActionsProps = {
 
   showCollectionScanInsight?: boolean;
   onCollectionScanInsightActionButtonClick: () => void;
+  resultPipeline: any;
 };
 
 export const PipelineActions: React.FunctionComponent<PipelineActionsProps> = ({
@@ -189,7 +190,7 @@ const mapState = (state: RootState) => {
 };
 
 const mapDispatch = {
-  onUpdateView: updateView,
+  onUpdateView: openConfirmUpdateModal,
   onRunAggregation: runAggregation,
   onExportAggregationResults: exportAggregationResults,
   onExplainAggregation: explainAggregation,

packages/compass-aggregations/src/modules/update-view.ts

@@ -9,12 +9,29 @@ import type { PipelineBuilderThunkAction } from '.';
 import { isAction } from '../utils/is-action';
 import type { AnyAction } from 'redux';
 
-export type UpdateViewState = null | string;
+export type UpdateViewState = {
+  isOpen: boolean;
+  updateViewError: null | string;
+};
 
-/**
- * State `null` when there is no error, or string if there's an error.
- */
-export const INITIAL_STATE: UpdateViewState = null;
+export const INITIAL_STATE: UpdateViewState = {
+  isOpen: false,
+  updateViewError: null,
+};
+
+// Action for opening model.
+export const OPEN_CONFIRM_UPDATE_MODEL =
+  'aggregations/update-view/OPEN_CONFIRM_UPDATE_MODEL' as const;
+interface OpenConfirmUpdateModel {
+  type: typeof OPEN_CONFIRM_UPDATE_MODEL;
+}
+
+// Action for closing model.
+export const CLOSE_CONFIRM_UPDATE_MODEL =
+  'aggregations/update-view/CLOSE_CONFIRM_UPDATE_MODEL' as const;
+interface CloseConfirmUpdateModel {
+  type: typeof CLOSE_CONFIRM_UPDATE_MODEL;
+}
 
 // Action for when an error occurs when updating a view.
 export const ERROR_UPDATING_VIEW =
@@ -32,15 +49,34 @@ interface DismissViewUpdateErrorAction {
 }
 
 export type UpdateViewAction =
+  | OpenConfirmUpdateModel
+  | CloseConfirmUpdateModel
   | ErrorUpdatingViewAction
   | DismissViewUpdateErrorAction;
 
 export default function reducer(
   state: UpdateViewState = INITIAL_STATE,
   action: AnyAction
 ): UpdateViewState {
+  if (isAction<OpenConfirmUpdateModel>(action, OPEN_CONFIRM_UPDATE_MODEL)) {
+    return {
+      ...state,
+      isOpen: true,
+    };
+  }
+
+  if (isAction<CloseConfirmUpdateModel>(action, CLOSE_CONFIRM_UPDATE_MODEL)) {
+    return {
+      ...state,
+      isOpen: false,
+    };
+  }
+
   if (isAction<ErrorUpdatingViewAction>(action, ERROR_UPDATING_VIEW)) {
-    return action.error;
+    return {
+      ...state,
+      updateViewError: action.error,
+    };
   }
   if (
     isAction<DismissViewUpdateErrorAction>(action, DISMISS_VIEW_UPDATE_ERROR) ||
@@ -54,6 +90,23 @@ export default function reducer(
   return state;
 }
 
+/**
+ * Action creator for opening the confirmation modal.
+ *
+ * @returns {Object} The action to open the modal.
+ */
+export const openConfirmUpdateModal = (): OpenConfirmUpdateModel => ({
+  type: OPEN_CONFIRM_UPDATE_MODEL,
+});
+
+/**
+ * Action creator for closing the confirmation modal.
+ *
+ * @returns {Object} The action to close the modal.
+ */
+export const closeConfirmUpdateModal = (): CloseConfirmUpdateModel => ({
+  type: CLOSE_CONFIRM_UPDATE_MODEL,
+});
 /**
  * Action creator for showing the error that occured with updating the view.
  */