From 7ba0245ddbdf1973223d5b2d60d589d700cf2e53 Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Thu, 21 Sep 2023 10:42:26 -0700
Subject: [PATCH] Set up redux infrastructure

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>
---
 .../workflow_builder/workflow_builder.tsx     | 10 +++++-
 public/render_app.tsx                         | 10 ++++--
 public/store/index.ts                         |  7 +++++
 public/store/reducers/index.ts                |  6 ++++
 public/store/reducers/workspace_reducer.ts    | 31 +++++++++++++++++++
 public/store/store.ts                         | 17 ++++++++++
 6 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 public/store/index.ts
 create mode 100644 public/store/reducers/index.ts
 create mode 100644 public/store/reducers/workspace_reducer.ts
 create mode 100644 public/store/store.ts

diff --git a/public/pages/workflow_builder/workflow_builder.tsx b/public/pages/workflow_builder/workflow_builder.tsx
index d50759ac..9080929d 100644
--- a/public/pages/workflow_builder/workflow_builder.tsx
+++ b/public/pages/workflow_builder/workflow_builder.tsx
@@ -4,6 +4,7 @@
  */
 
 import React, { useEffect } from 'react';
+// import { useSelector, useDispatch } from 'react-redux';
 import {
   EuiPageHeader,
   EuiFlexGroup,
@@ -14,8 +15,15 @@ import {
 } from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
+// import { AppState, removeDirty, setComponents } from '../../store';
 
 export function WorkflowBuilder() {
+  // TODO: below commented out lines can be used for fetching & setting global redux state
+  // const dispatch = useDispatch();
+  // const { isDirty, components } = useSelector(
+  //   (state: AppState) => state.workspace
+  // );
+
   useEffect(() => {
     getCore().chrome.setBreadcrumbs([
       BREADCRUMBS.AI_APPLICATION_BUILDER,
@@ -36,7 +44,7 @@ export function WorkflowBuilder() {
       </EuiPageHeader>
       <EuiSpacer size="l" />
       <EuiFlexItem>
-        <EuiText>Placeholder for workflow builder page...</EuiText>
+        <EuiText>Workspace</EuiText>
       </EuiFlexItem>
     </div>
   );
diff --git a/public/render_app.tsx b/public/render_app.tsx
index fb38f110..4393262a 100644
--- a/public/render_app.tsx
+++ b/public/render_app.tsx
@@ -6,17 +6,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { Provider } from 'react-redux';
 import { AppMountParameters, CoreStart } from '../../../src/core/public';
 import { AiFlowDashboardsApp } from './app';
+import { store } from './store';
 
 export const renderApp = (
   coreStart: CoreStart,
   { appBasePath, element }: AppMountParameters
 ) => {
   ReactDOM.render(
-    <Router basename={appBasePath + '#/'}>
-      <Route render={(props) => <AiFlowDashboardsApp {...props} />} />
-    </Router>,
+    <Provider store={store}>
+      <Router basename={appBasePath + '#/'}>
+        <Route render={(props) => <AiFlowDashboardsApp {...props} />} />
+      </Router>
+    </Provider>,
     element
   );
 
diff --git a/public/store/index.ts b/public/store/index.ts
new file mode 100644
index 00000000..ccc2465d
--- /dev/null
+++ b/public/store/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './store';
+export * from './reducers';
diff --git a/public/store/reducers/index.ts b/public/store/reducers/index.ts
new file mode 100644
index 00000000..2f5cadc0
--- /dev/null
+++ b/public/store/reducers/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './workspace_reducer';
diff --git a/public/store/reducers/workspace_reducer.ts b/public/store/reducers/workspace_reducer.ts
new file mode 100644
index 00000000..70bc2095
--- /dev/null
+++ b/public/store/reducers/workspace_reducer.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  isDirty: false,
+  components: [],
+};
+
+const workspaceSlice = createSlice({
+  name: 'workspace',
+  initialState,
+  reducers: {
+    setDirty(state) {
+      state.isDirty = true;
+    },
+    removeDirty(state) {
+      state.isDirty = false;
+    },
+    setComponents(state, action) {
+      state.components = action.payload;
+      state.isDirty = true;
+    },
+  },
+});
+
+export const workspaceReducer = workspaceSlice.reducer;
+export const { setDirty, removeDirty, setComponents } = workspaceSlice.actions;
diff --git a/public/store/store.ts b/public/store/store.ts
new file mode 100644
index 00000000..9359d352
--- /dev/null
+++ b/public/store/store.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers } from 'redux';
+import { workspaceReducer } from './reducers';
+
+const rootReducer = combineReducers({
+  workspace: workspaceReducer,
+});
+export const store = configureStore({
+  reducer: rootReducer,
+});
+
+export type AppState = ReturnType<typeof rootReducer>;