chore: (litmus-portal) Refactoring and bug fixes (#2027)

This commit has the following changes: - folder structure change for models and useEffect fixes - user redux fixed - graphql documents re-organised Signed-off-by: arkajyotiMukherjee <[email protected]>
litmuschaos · Sep 10, 2020 · 8623ee3 · 8623ee3
1 parent c481a57
commit 8623ee3
Show file tree

Hide file tree

Showing 47 changed files with 329 additions and 329 deletions.
diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/TableData.tsx
@@ -12,7 +12,7 @@ import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import moment from 'moment';
 import React from 'react';
-import { WorkflowRun } from '../../../../models/workflowData';
+import { WorkflowRun } from '../../../../models/graphql/workflowData';
 import { history } from '../../../../redux/configureStore';
 import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';
 import useStyles from './styles';

diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseSchedule/index.tsx
@@ -27,7 +27,7 @@ import {
   Workflow,
   WorkflowDataVars,
   WorkflowRun,
-} from '../../../../models/workflowData';
+} from '../../../../models/graphql/workflowData';
 import { RootState } from '../../../../redux/reducers';
 import {
   sortAlphaAsc,

diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/TableData.tsx
@@ -7,7 +7,10 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import React from 'react';
-import { ExecutionData, WorkflowRun } from '../../../../models/workflowData';
+import {
+  ExecutionData,
+  WorkflowRun,
+} from '../../../../models/graphql/workflowData';
 import { history } from '../../../../redux/configureStore';
 import timeDifferenceForDate from '../../../../utils/datesModifier';
 import LinearProgressBar from '../../ReturningHome/ProgressBar/LinearProgressBar';

diff --git a/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/ChaosWorkflows/BrowseWorkflow/index.tsx
@@ -22,7 +22,7 @@ import {
   WorkflowDataVars,
   WorkflowRun,
   WorkflowSubscription,
-} from '../../../../models/workflowData';
+} from '../../../../models/graphql/workflowData';
 import { RootState } from '../../../../redux/reducers';
 import {
   sortAlphaAsc,

diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/ReliabilityScore/index.tsx
@@ -2,17 +2,17 @@ import { Typography } from '@material-ui/core';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import Center from '../../../../containers/layouts/Center';
+import Unimodal from '../../../../containers/layouts/Unimodal';
+import { experimentMap, WorkflowData } from '../../../../models/redux/workflow';
+import useActions from '../../../../redux/actions';
+import * as WorkflowActions from '../../../../redux/actions/workflow';
+import { RootState } from '../../../../redux/reducers';
 import ButtonFilled from '../../../Button/ButtonFilled';
 import ButtonOutline from '../../../Button/ButtonOutline';
-import WeightSlider from '../WeightSlider';
 import InfoTooltip from '../../../InfoTooltip';
+import WeightSlider from '../WeightSlider';
 import ResultTable from './ResultTable';
 import useStyles from './styles';
-import { WorkflowData, experimentMap } from '../../../../models/workflow';
-import { RootState } from '../../../../redux/reducers';
-import useActions from '../../../../redux/actions';
-import * as WorkflowActions from '../../../../redux/actions/workflow';
-import Unimodal from '../../../../containers/layouts/Unimodal';
 
 const ReliablityScore = () => {
   const classes = useStyles();

diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/TuneWorkflow/index.tsx
@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
 import { Typography } from '@material-ui/core';
 import Divider from '@material-ui/core/Divider';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import YAML from 'yaml';
-import useStyles from './styles';
-import { WorkflowData } from '../../../../models/workflow';
-import { RootState } from '../../../../redux/reducers';
+import { WorkflowData } from '../../../../models/redux/workflow';
 import useActions from '../../../../redux/actions';
 import * as WorkflowActions from '../../../../redux/actions/workflow';
+import { RootState } from '../../../../redux/reducers';
 import Loader from '../../../Loader';
 import YamlEditor from '../../../YamlEditor/Editor';
+import useStyles from './styles';
 
 const TuneWorkflow: React.FC = () => {
   const classes = useStyles();

diff --git a/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx b/litmus-portal/frontend/src/components/Sections/CreateWorkflow/VerifyCommit/index.tsx
@@ -1,7 +1,8 @@
 import { Divider, Typography } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { experimentMap, WorkflowData } from '../../../../models/workflow';
+import Unimodal from '../../../../containers/layouts/Unimodal';
+import { experimentMap, WorkflowData } from '../../../../models/redux/workflow';
 import useActions from '../../../../redux/actions';
 import * as WorkflowActions from '../../../../redux/actions/workflow';
 import { RootState } from '../../../../redux/reducers';
@@ -17,7 +18,6 @@ import {
   parseYamlValidations,
 } from '../../../YamlEditor/Validations';
 import useStyles from './styles';
-import Unimodal from '../../../../containers/layouts/Unimodal';
 
 interface VerifyCommitProps {
   gotoStep: (page: number) => void;

diff --git a/...us-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx b/...us-portal/frontend/src/components/Sections/Settings/AccountsTab/PersonalDetails/index.tsx
@@ -1,17 +1,16 @@
+import { useQuery } from '@apollo/client';
 import { Button, Typography } from '@material-ui/core';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { useQuery } from '@apollo/client';
+import Unimodal from '../../../../../containers/layouts/Unimodal';
+import { GET_USER } from '../../../../../graphql';
 import {
-  UserData,
-  CurrentUserDetails,
   CurrentUserDedtailsVars,
-} from '../../../../../models/user';
+  CurrentUserDetails,
+} from '../../../../../models/graphql/user';
 import { RootState } from '../../../../../redux/reducers';
 import UserDetails from '../../UserManagementTab/CreateUser/UserDetails';
 import useStyles from './styles';
-import Unimodal from '../../../../../containers/layouts/Unimodal';
-import { GET_USER } from '../../../../../graphql';
 
 interface personaData {
   email: string;
@@ -22,8 +21,7 @@ interface personaData {
 // Displays the personals details on the "accounts" tab
 const PersonalDetails: React.FC = () => {
   const classes = useStyles();
-  const userData: UserData = useSelector((state: RootState) => state.userData);
-  const { username } = userData;
+  const username = useSelector((state: RootState) => state.userData.username);
 
   // Query to get user details
   const { data } = useQuery<CurrentUserDetails, CurrentUserDedtailsVars>(

diff --git a/...end/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx b/...end/src/components/Sections/Settings/TeammingTab/Invitation/ReceivedInvitations/index.tsx
@@ -14,12 +14,11 @@ import {
   DECLINE_INVITE,
   GET_USER,
 } from '../../../../../../graphql';
-import { MemberInvitation } from '../../../../../../models/invite';
-import { Project } from '../../../../../../models/project';
+import { MemberInvitation } from '../../../../../../models/graphql/invite';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
-} from '../../../../../../models/user';
+} from '../../../../../../models/graphql/user';
 import { RootState } from '../../../../../../redux/reducers';
 import userAvatar from '../../../../../../utils/user';
 import ButtonFilled from '../../../../../Button/ButtonFilled';
@@ -39,7 +38,7 @@ const ReceivedInvitations: React.FC = () => {
   // for response data
   const [rows, setRows] = useState<ReceivedInvitation[]>([]);
 
-  const { userData } = useSelector((state: RootState) => state);
+  const username = useSelector((state: RootState) => state.userData.username);
 
   // stores the user whose invitation is accepted/declined
   const [acceptDecline, setAcceptDecline] = useState<string>('');
@@ -54,9 +53,7 @@ const ReceivedInvitations: React.FC = () => {
       );
     },
     onError: () => {},
-    refetchQueries: [
-      { query: GET_USER, variables: { username: userData.username } },
-    ],
+    refetchQueries: [{ query: GET_USER, variables: { username } }],
   });
 
   // mutation to decline the invitation
@@ -69,30 +66,26 @@ const ReceivedInvitations: React.FC = () => {
       );
     },
     onError: () => {},
-    refetchQueries: [
-      { query: GET_USER, variables: { username: userData.username } },
-    ],
+    refetchQueries: [{ query: GET_USER, variables: { username } }],
   });
 
   // query for getting all the data for the logged in user
-  const { data, loading } = useQuery<
-    CurrentUserDetails,
-    CurrentUserDedtailsVars
-  >(GET_USER, {
-    variables: { username: userData.username },
-  });
+  const { data } = useQuery<CurrentUserDetails, CurrentUserDedtailsVars>(
+    GET_USER,
+    { variables: { username } }
+  );
 
   useEffect(() => {
-    if (data?.getUser.username === userData.username) {
-      const projectList: Project[] = data?.getUser.projects;
+    if (data?.getUser.username === username) {
+      const projectList = data?.getUser.projects;
       let users: ReceivedInvitation[] = [];
 
       let flag = 0;
 
       projectList.forEach((project) => {
         project.members.forEach((member) => {
           if (
-            member.user_name === userData.username &&
+            member.user_name === username &&
             member.role !== 'Owner' &&
             member.invitation === 'Pending'
           ) {
@@ -101,10 +94,7 @@ const ReceivedInvitations: React.FC = () => {
         });
         if (flag === 1) {
           project.members.forEach((member) => {
-            if (
-              member.user_name !== userData.username &&
-              member.role === 'Owner'
-            ) {
+            if (member.user_name !== username && member.role === 'Owner') {
               users = users.concat(rows, {
                 username: member.user_name,
                 role: member.role,
@@ -119,7 +109,8 @@ const ReceivedInvitations: React.FC = () => {
 
       setRows(users);
     }
-  }, [loading]);
+  }, [data]);
+
   return (
     <div>
       <TableContainer className={classes.table}>
@@ -153,7 +144,7 @@ const ReceivedInvitations: React.FC = () => {
                             variables: {
                               member: {
                                 project_id: row.projectID,
-                                user_name: userData.username,
+                                user_name: username,
                               },
                             },
                           });
@@ -170,7 +161,7 @@ const ReceivedInvitations: React.FC = () => {
                             variables: {
                               member: {
                                 project_id: row.projectID,
-                                user_name: userData.username,
+                                user_name: username,
                               },
                             },
                           });

diff --git a/...rontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx b/...rontend/src/components/Sections/Settings/TeammingTab/Invitation/SentInvitations/index.tsx
@@ -10,11 +10,11 @@ import {
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { GET_USER } from '../../../../../../graphql';
-import { Member, Project } from '../../../../../../models/project';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
-} from '../../../../../../models/user';
+  Member,
+} from '../../../../../../models/graphql/user';
 import { RootState } from '../../../../../../redux/reducers';
 import userAvatar from '../../../../../../utils/user';
 import ButtonFilled from '../../../../../Button/ButtonFilled';
@@ -25,21 +25,19 @@ const SentInvitations: React.FC = () => {
   // for response data
   const [rows, setRows] = useState<Member[]>([]);
 
-  const { userData } = useSelector((state: RootState) => state);
+  const userData = useSelector((state: RootState) => state.userData);
 
   // query for getting all the data for the logged in user
-  const { data, loading } = useQuery<
-    CurrentUserDetails,
-    CurrentUserDedtailsVars
-  >(GET_USER, {
-    variables: { username: userData.username },
-  });
+  const { data } = useQuery<CurrentUserDetails, CurrentUserDedtailsVars>(
+    GET_USER,
+    { variables: { username: userData.username } }
+  );
 
   let memberList: Member[];
   let users: Member[] = [];
   useEffect(() => {
     if (data?.getUser.username === userData.username) {
-      const projectList: Project[] = data?.getUser.projects;
+      const projectList = data?.getUser.projects;
 
       projectList.forEach((project) => {
         if (project.id === userData.selectedProjectID) {
@@ -54,7 +52,7 @@ const SentInvitations: React.FC = () => {
         setRows(users);
       });
     }
-  }, [loading]);
+  }, [data]);
 
   return (
     <div>

diff --git a/...s-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx b/...s-portal/frontend/src/components/Sections/Settings/TeammingTab/InviteNew/Invite/index.tsx
@@ -12,12 +12,12 @@ import {
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { ALL_USERS, GET_USER, SEND_INVITE } from '../../../../../../graphql';
-import { MemberInviteNew } from '../../../../../../models/invite';
-import { Project } from '../../../../../../models/project';
+import { MemberInviteNew } from '../../../../../../models/graphql/invite';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
-} from '../../../../../../models/user';
+  Project,
+} from '../../../../../../models/graphql/user';
 import { RootState } from '../../../../../../redux/reducers';
 import ButtonFilled from '../../../../../Button/ButtonFilled';
 import Loader from '../../../../../Loader';
@@ -55,7 +55,7 @@ const Invite: React.FC<InviteProps> = ({ handleModal }) => {
   // for response data
   const [rows, setRows] = useState<UserInvite[]>([]);
 
-  const { userData } = useSelector((state: RootState) => state);
+  const userData = useSelector((state: RootState) => state.userData);
 
   // for setting the role of the user while sending invitation
   const [roles, setRoles] = useState<Role[]>([]);
@@ -80,9 +80,7 @@ const Invite: React.FC<InviteProps> = ({ handleModal }) => {
   // query for getting all the data for the logged in user
   const { data: dataB } = useQuery<CurrentUserDetails, CurrentUserDedtailsVars>(
     GET_USER,
-    {
-      variables: { username: userData.username },
-    }
+    { variables: { username: userData.username } }
   );
 
   // query to list all the users

diff --git a/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx b/litmus-portal/frontend/src/components/Sections/Settings/TeammingTab/index.tsx
@@ -27,11 +27,11 @@ import moment from 'moment';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { GET_USER } from '../../../../graphql';
-import { Member, Project } from '../../../../models/project';
 import {
   CurrentUserDedtailsVars,
   CurrentUserDetails,
-} from '../../../../models/user';
+  Member,
+} from '../../../../models/graphql/user';
 import { RootState } from '../../../../redux/reducers';
 import userAvatar from '../../../../utils/user';
 import DelUser from '../UserManagementTab/EditUser/DelUser';
@@ -64,17 +64,15 @@ interface PaginationData {
 // TeammingTab displays team member table
 const TeammingTab: React.FC = () => {
   const classes = useStyles();
-  const { userData } = useSelector((state: RootState) => state);
+  const userData = useSelector((state: RootState) => state.userData);
 
   // for response data
   const [rows, setRows] = useState<Member[]>([]);
 
   // query for getting all the data for the logged in user
   const { data } = useQuery<CurrentUserDetails, CurrentUserDedtailsVars>(
     GET_USER,
-    {
-      variables: { username: userData.username },
-    }
+    { variables: { username: userData.username } }
   );
 
   // State for pagination
@@ -96,7 +94,7 @@ const TeammingTab: React.FC = () => {
   let users: Member[] = [];
   useEffect(() => {
     if (data?.getUser.username === userData.username) {
-      const projectList: Project[] = data?.getUser.projects;
+      const projectList = data?.getUser.projects;
 
       projectList.forEach((project) => {
         if (project.id === userData.selectedProjectID) {

diff --git a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx b/litmus-portal/frontend/src/components/Sections/WorkflowDetails/ArgoWorkflow/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Nodes } from '../../../../models/workflowData';
+import { Nodes } from '../../../../models/graphql/workflowData';
 import useActions from '../../../../redux/actions';
 import * as NodeSelectionActions from '../../../../redux/actions/nodeSelection';
 import DagreGraph, { d3Link, d3Node } from '../../../DagreGraph';

diff --git a/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx b/litmus-portal/frontend/src/components/Sections/WorkflowDetails/WorkflowInfo/index.tsx
@@ -3,7 +3,7 @@
 import { Typography } from '@material-ui/core';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { ExecutionData } from '../../../../models/workflowData';
+import { ExecutionData } from '../../../../models/graphql/workflowData';
 import { RootState } from '../../../../redux/reducers';
 import timeDifference from '../../../../utils/datesModifier';
 import useStyles from './styles';