Set up redux infrastructure (#33)

Signed-off-by: Tyler Ohlsen <[email protected]>

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>
   );

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
   );
 

public/store/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './store';
+export * from './reducers';

public/store/reducers/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './workspace_reducer';

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;

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>;