Display Stories Users in Admin Panel

src/commons/application/ApplicationTypes.ts

@@ -552,7 +552,8 @@ export const defaultStories: StoriesState = {
   storyList: [],
   currentStoryId: null,
   currentStory: null,
-  envs: {}
+  envs: {},
+  storiesUsers: []
 };
 
 export const createDefaultStoriesEnv = (

src/commons/application/actions/SessionActions.ts

@@ -19,16 +19,18 @@ import {
   NotificationFilterFunction
 } from '../../notificationBadge/NotificationBadgeTypes';
 import { generateOctokitInstance } from '../../utils/GitHubPersistenceHelper';
-import { Role } from '../ApplicationTypes';
+import { Role, StoriesRole } from '../ApplicationTypes';
 import {
   AdminPanelCourseRegistration,
   CourseRegistration,
+  DELETE_STORIES_USER_USER_GROUPS,
   NotificationConfiguration,
   NotificationPreference,
   TimeOption,
   Tokens,
   UPDATE_ASSESSMENT,
   UPDATE_COURSE_RESEARCH_AGREEMENT,
+  UPDATE_STORIES_USER_ROLE,
   UPDATE_TOTAL_XP,
   UpdateCourseConfiguration,
   User
@@ -174,11 +176,23 @@ export const updateCourseResearchAgreement = createAction(
   (agreedToResearch: boolean) => ({ payload: { agreedToResearch } })
 );
 
+export const updateStoriesUserRole = createAction(
+  UPDATE_STORIES_USER_ROLE,
+  (userId: number, role: StoriesRole) => ({ payload: { userId, role } })
+);
+
+export const deleteStoriesUserUserGroups = createAction(
+  DELETE_STORIES_USER_USER_GROUPS,
+  (userId: number) => ({ payload: { userId } })
+);
+
 // For compatibility with existing code (actions helper)
 export default {
   ...newActions,
   updateTotalXp,
   updateAssessment,
   ...newActions2,
-  updateCourseResearchAgreement
+  updateCourseResearchAgreement,
+  updateStoriesUserRole,
+  deleteStoriesUserUserGroups
 };

src/commons/application/types/SessionTypes.ts

@@ -15,6 +15,8 @@ import { GameState, Role, Story } from '../ApplicationTypes';
 export const UPDATE_TOTAL_XP = 'UPDATE_TOTAL_XP';
 export const UPDATE_ASSESSMENT = 'UPDATE_ASSESSMENT';
 export const UPDATE_COURSE_RESEARCH_AGREEMENT = 'UPDATE_COURSE_RESEARCH_AGREEMENT';
+export const UPDATE_STORIES_USER_ROLE = 'UPDATE_STORIES_USER_ROLE';
+export const DELETE_STORIES_USER_USER_GROUPS = 'DELETE_STORIES_USER_USER_GROUPS';
 
 export type SessionState = {
   // Tokens

src/commons/sagas/StoriesSaga.ts

@@ -3,25 +3,31 @@ import { call, put, select } from 'redux-saga/effects';
 import StoriesActions from 'src/features/stories/StoriesActions';
 import {
   deleteStory,
+  deleteUserUserGroups,
+  getAdminPanelStoriesUsers,
   getStories,
   getStoriesUser,
   getStory,
   postStory,
+  putStoriesUserRole,
   updateStory
 } from 'src/features/stories/storiesComponents/BackendAccess';
 import { StoryData, StoryListView, StoryView } from 'src/features/stories/StoriesTypes';
 
+import SessionActions from '../application/actions/SessionActions';
 import { OverallState, StoriesRole } from '../application/ApplicationTypes';
 import { Tokens } from '../application/types/SessionTypes';
 import { combineSagaHandlers } from '../redux/utils';
 import { resetSideContent } from '../sideContent/SideContentActions';
 import { actions } from '../utils/ActionsHelper';
-import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
+import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
 import { defaultStoryContent } from '../utils/StoriesHelper';
 import { selectTokens } from './BackendSaga';
 import { evalCodeSaga } from './WorkspaceSaga/helpers/evalCode';
 
-const StoriesSaga = combineSagaHandlers(StoriesActions, {
+// TODO: Refactor and combine in a future commit
+const sagaActions = { ...StoriesActions, ...SessionActions };
+const StoriesSaga = combineSagaHandlers(sagaActions, {
   // TODO: This should be using `takeLatest`, not `takeEvery`
   getStoriesList: function* () {
     const tokens: Tokens = yield selectTokens();
@@ -141,6 +147,36 @@ const StoriesSaga = combineSagaHandlers(StoriesActions, {
       action.type,
       env
     );
+  },
+  fetchAdminPanelStoriesUsers: function* (action) {
+    const tokens: Tokens = yield selectTokens();
+
+    const storiesUsers = yield call(getAdminPanelStoriesUsers, tokens);
+
+    if (storiesUsers) {
+      yield put(actions.setAdminPanelStoriesUsers(storiesUsers));
+    }
+  },
+  updateStoriesUserRole: function* (action) {
+    const tokens: Tokens = yield selectTokens();
+    const { userId, role } = action.payload;
+
+    const resp: Response | null = yield call(putStoriesUserRole, tokens, userId, role);
+
+    if (resp) {
+      yield put(actions.fetchAdminPanelStoriesUsers());
+      yield call(showSuccessMessage, 'Role updated!');
+    }
+  },
+  deleteStoriesUserUserGroups: function* (action) {
+    const tokens: Tokens = yield selectTokens();
+    const { userId } = action.payload;
+
+    const resp: Response | null = yield call(deleteUserUserGroups, tokens, userId);
+    if (resp) {
+      yield put(actions.fetchAdminPanelStoriesUsers());
+      yield call(showSuccessMessage, 'Stories user deleted!');
+    }
   }
 });
 

src/features/stories/StoriesActions.ts

@@ -4,8 +4,11 @@ import { StoriesRole } from 'src/commons/application/ApplicationTypes';
 import { createActions } from 'src/commons/redux/utils';
 
 import {
+  AdminPanelStoriesUser,
   CLEAR_STORIES_USER_AND_GROUP,
+  FETCH_ADMIN_PANEL_STORIES_USERS,
   GET_STORIES_USER,
+  SET_ADMIN_PANEL_STORIES_USERS,
   SET_CURRENT_STORIES_GROUP,
   SET_CURRENT_STORIES_USER,
   StoryData,
@@ -53,6 +56,13 @@ export const setCurrentStoriesGroup = createAction(
 export const clearStoriesUserAndGroup = createAction(CLEAR_STORIES_USER_AND_GROUP, () => ({
   payload: {}
 }));
+export const fetchAdminPanelStoriesUsers = createAction(FETCH_ADMIN_PANEL_STORIES_USERS, () => ({
+  payload: {}
+}));
+export const setAdminPanelStoriesUsers = createAction(
+  SET_ADMIN_PANEL_STORIES_USERS,
+  (users: AdminPanelStoriesUser[]) => ({ payload: { users } })
+);
 
 // For compatibility with existing code (reducer)
 export const {
@@ -80,5 +90,7 @@ export default {
   getStoriesUser,
   setCurrentStoriesUser,
   setCurrentStoriesGroup,
-  clearStoriesUserAndGroup
+  clearStoriesUserAndGroup,
+  fetchAdminPanelStoriesUsers,
+  setAdminPanelStoriesUsers
 };

src/features/stories/StoriesReducer.ts

@@ -28,7 +28,7 @@ import {
   updateStoriesList
 } from './StoriesActions';
 import { DEFAULT_ENV } from './storiesComponents/UserBlogContent';
-import { StoriesState } from './StoriesTypes';
+import { SET_ADMIN_PANEL_STORIES_USERS, StoriesState } from './StoriesTypes';
 
 export const StoriesReducer: Reducer<StoriesState, SourceActionType> = (
   state = defaultStories,
@@ -187,6 +187,11 @@ const oldStoriesReducer: Reducer<StoriesState, SourceActionType> = (
   action
 ) => {
   switch (action.type) {
+    case SET_ADMIN_PANEL_STORIES_USERS:
+      return {
+        ...state,
+        storiesUsers: action.payload.users
+      };
     default:
       return state;
   }

src/features/stories/StoriesTypes.ts

@@ -9,6 +9,8 @@ export const CLEAR_STORIES_USER_AND_GROUP = 'CLEAR_STORIES_USER_AND_GROUP';
 // TODO: Investigate possibility of combining the two actions
 export const SET_CURRENT_STORIES_USER = 'SET_CURRENT_STORIES_USER';
 export const SET_CURRENT_STORIES_GROUP = 'SET_CURRENT_STORIES_GROUP';
+export const FETCH_ADMIN_PANEL_STORIES_USERS = 'FETCH_ADMIN_PANEL_STORIES_USERS';
+export const SET_ADMIN_PANEL_STORIES_USERS = 'SET_ADMIN_PANEL_STORIES_USERS';
 
 export type StoryMetadata = {
   authorId: number;
@@ -53,9 +55,18 @@ export type StoriesAuthState = {
   readonly role?: StoriesRole;
 };
 
+export type AdminPanelStoriesUser = {
+  readonly id: number;
+  readonly name: string;
+  readonly username: string;
+  readonly provider: string;
+  readonly role: string;
+};
+
 export type StoriesState = {
   readonly storyList: StoryListView[];
   readonly currentStoryId: number | null;
   readonly currentStory: StoryData | null;
   readonly envs: { [key: string]: StoriesEnvState };
+  readonly storiesUsers: AdminPanelStoriesUser[];
 } & StoriesAuthState;

src/features/stories/storiesComponents/BackendAccess.ts

@@ -11,7 +11,7 @@ import { store } from 'src/pages/createStore';
 
 import { Tokens } from '../../../commons/application/types/SessionTypes';
 import { NameUsernameRole } from '../../../pages/academy/adminPanel/subcomponents/AddStoriesUserPanel';
-import { StoryListView, StoryView } from '../StoriesTypes';
+import { AdminPanelStoriesUser, StoryListView, StoryView } from '../StoriesTypes';
 
 // Helpers
 
@@ -150,3 +150,58 @@ export const deleteStory = async (tokens: Tokens, id: number): Promise<StoryView
   const story = await resp.json();
   return story;
 };
+
+export const getAdminPanelStoriesUsers = async (
+  tokens: Tokens
+): Promise<AdminPanelStoriesUser[] | null> => {
+  const resp = await requestStoryBackend(`/groups/${getStoriesGroupId()}/users`, 'GET', {
+    ...tokens
+  });
+  if (!resp) {
+    return null;
+  }
+  const users = await resp.json();
+  return users;
+};
+
+export const putStoriesUserRole = async (
+  tokens: Tokens,
+  userId: number,
+  role: StoriesRole
+): Promise<Response | null> => {
+  const resp = await requestStoryBackend(
+    `/groups/${getStoriesGroupId()}/users/${userId}/role`,
+    'PUT',
+    {
+      ...tokens,
+      body: { role }
+    }
+  );
+
+  if (!resp) {
+    showWarningMessage("Failed to update stories user's role");
+    return null;
+  }
+  const user = await resp.json();
+  return user;
+};
+
+export const deleteUserUserGroups = async (
+  tokens: Tokens,
+  userId: number
+): Promise<Response | null> => {
+  const resp = await requestStoryBackend(
+    `/groups/${getStoriesGroupId()}/users/${userId}`,
+    'DELETE',
+    {
+      ...tokens
+    }
+  );
+
+  if (!resp) {
+    showWarningMessage('Failed to delete stories user');
+    return null;
+  }
+  const user = await resp.json();
+  return user;
+};

src/pages/academy/adminPanel/AdminPanel.tsx

@@ -4,11 +4,13 @@ import 'ag-grid-community/styles/ag-theme-balham.css';
 import { Button, Divider, H1, Intent, Tab, Tabs } from '@blueprintjs/core';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useSession } from 'src/commons/utils/Hooks';
+import { StoriesRole } from 'src/commons/application/ApplicationTypes';
+import { useSession, useTypedSelector } from 'src/commons/utils/Hooks';
 import {
   addNewStoriesUsersToCourse,
   addNewUsersToCourse
 } from 'src/features/academy/AcademyActions';
+import { fetchAdminPanelStoriesUsers } from 'src/features/stories/StoriesActions';
 
 import SessionActions from '../../../commons/application/actions/SessionActions';
 import { UpdateCourseConfiguration } from '../../../commons/application/types/SessionTypes';
@@ -20,6 +22,7 @@ import AssessmentConfigPanel, {
 } from './subcomponents/assessmentConfigPanel/AssessmentConfigPanel';
 import CourseConfigPanel from './subcomponents/CourseConfigPanel';
 import NotificationConfigPanel from './subcomponents/NotificationConfigPanel';
+import StoriesUserConfigPanel from './subcomponents/storiesUserConfigPanel/StoriesUserConfigPanel';
 import UserConfigPanel from './subcomponents/userConfigPanel/UserConfigPanel';
 
 const defaultCourseConfig: UpdateCourseConfiguration = {
@@ -40,12 +43,14 @@ const AdminPanel: React.FC = () => {
 
   const dispatch = useDispatch();
   const session = useSession();
+  const stories = useTypedSelector(state => state.stories);
 
   useEffect(() => {
     dispatch(SessionActions.fetchCourseConfig());
     dispatch(SessionActions.fetchAssessmentConfigs());
     dispatch(SessionActions.fetchAdminPanelCourseRegistrations());
     dispatch(SessionActions.fetchNotificationConfigs());
+    dispatch(fetchAdminPanelStoriesUsers());
   }, [dispatch]);
 
   useEffect(() => {
@@ -83,6 +88,15 @@ const AdminPanel: React.FC = () => {
     }
   };
 
+  const storiesUserConfigPanelProps = {
+    userId: stories.userId,
+    storiesUsers: stories.storiesUsers,
+    handleUpdateStoriesUserRole: (id: number, role: StoriesRole) =>
+      dispatch(SessionActions.updateStoriesUserRole(id, role)),
+    handleDeleteStoriesUserFromUserGroup: (id: number) =>
+      dispatch(SessionActions.deleteStoriesUserUserGroups(id))
+  };
+
   // Handler to submit changes to Course Configration and Assessment Configuration to the backend.
   // Changes made to users are handled separately.
   const submitHandler = useCallback(() => {
@@ -156,6 +170,11 @@ const AdminPanel: React.FC = () => {
             />
           }
         />
+        <Tab
+          id="stories-users"
+          title="Stories Users"
+          panel={<StoriesUserConfigPanel {...storiesUserConfigPanelProps} />}
+        />
         <Tab
           id="add-users"
           title="Add Users"