Export button disabled when section API's are in progress

Author: Bangarraju-Microsoft

src/frontend/src/components/ChatHistory/ChatHistoryList.test.tsx

@@ -4,10 +4,13 @@ import { AppStateContext } from '../../state/AppProvider';
 import ChatHistoryList from './ChatHistoryList';
 import { Conversation } from '../../api/models';
 import { ChatHistoryLoadingState } from '../../api/models';
+import {defaultMockState} from '../../test/test.utils';
+
 
 const mockDispatch = jest.fn();
 
 const mockState = {
+  ...defaultMockState,
   isChatHistoryOpen: false,
   chatHistoryLoadingState: ChatHistoryLoadingState.Loading,
   isCosmosDBAvailable: {
@@ -27,8 +30,7 @@ const mockState = {
   isRequestInitiated: false,
   failedSections : [],
   isFailedReqInitiated : false,
-  isLoading : false,
-  isLoadedSections : []
+  isLoading : false
 };
 
 const renderChatHistoryList = (stateOverride = {}) => {

src/frontend/src/components/ChatHistory/ChatHistoryPanel.test.tsx

@@ -4,6 +4,8 @@ import { AppStateContext } from '../../state/AppProvider';
 import { ChatHistoryPanel } from './ChatHistoryPanel';
 import { ChatHistoryLoadingState, ChatMessage, Conversation, CosmosDBStatus, Feedback, historyDeleteAll,historyList } from '../../api';
 import * as api from '../../api';
+import {defaultMockState} from '../../test/test.utils';
+
 
 // Mock the API function
 jest.mock('../../api/api', () => ({
@@ -37,6 +39,7 @@ const mockConversation: Conversation = {
 
 // Mock initial state for the context
 const mockState = {
+  ...defaultMockState,
   chatHistoryLoadingState: ChatHistoryLoadingState.Success,
   isCosmosDBAvailable: { cosmosDB: true, status: CosmosDBStatus.NotConfigured },
   chatHistory: [mockConversation], // Added mock chat history here
@@ -54,8 +57,7 @@ const mockState = {
   isRequestInitiated: false,
   failedSections : [],
   isFailedReqInitiated : false,
-  isLoading : false,
-  isLoadedSections: []
+  isLoading : false
 };
 
 const mockDispatch = jest.fn();

src/frontend/src/components/DraftCards/SectionCard.test.tsx

@@ -9,6 +9,8 @@ import { MemoryRouter } from 'react-router-dom'
 import { ChatHistoryLoadingState } from '../../api/models'
 import { act } from 'react-dom/test-utils'
 
+import {defaultMockState} from '../../test/test.utils';
+
 // Mock the API
 jest.mock('../../api/api', () => ({
   sectionGenerate: jest.fn(() =>
@@ -26,6 +28,7 @@ jest.mock('../../assets/Generate.svg', () => 'mocked-generate-icon')
 
 const mockDispatch = jest.fn()
 const mockState = {
+  ...defaultMockState,
   draftedDocument: {
     title: 'Draft Document',
     sections: [
@@ -56,8 +59,7 @@ const mockState = {
   isRequestInitiated: false,
   failedSections : [],
   isFailedReqInitiated : false,
-  isLoading : false,
-  isLoadedSections: []
+  isLoading : false
 }
 
 const renderWithContext = (idx = 0) =>

src/frontend/src/components/DraftCards/SectionCard.tsx

@@ -142,7 +142,6 @@ const SectionCard = ({ sectionIdx  }: SectionCardProps) => {
 
   useEffect(() => {
     if (appStateContext.state?.failedSections.length >0 && appStateContext.state?.failedSections[0].title === sectionTitle && isLoading && !appStateContext.state.isFailedReqInitiated) {
-      console.log("appStateContext.state?.failedSections", appStateContext.state?.failedSections);
       const tempItem = {
         title: sectionTitle,
         description: sectionDescription,
@@ -159,13 +158,13 @@ const SectionCard = ({ sectionIdx  }: SectionCardProps) => {
   async function fetchSectionContent(sectionTitle: string, sectionDescription: string , isReqFrom = '') {
     setIsLoading(true)
     //onLoadingChange(true)
+    
     const sectionGenerateRequest: SectionGenerateRequest = { sectionTitle, sectionDescription }
 
     const response = await sectionGenerate(sectionGenerateRequest)
     const responseBody = await response.json()
 
     if(responseBody?.error?.includes("429")) {
-      console.log("retriggerd !!!")
       const failedSectionItems = {
         title: sectionTitle,
         description: sectionDescription,
@@ -212,6 +211,11 @@ const SectionCard = ({ sectionIdx  }: SectionCardProps) => {
   useEffect(() => {
     if (sectionContent === '' && !isLoading && !isManuallyCleared) {
       fetchSectionContent(sectionTitle, sectionDescription)
+    }else {
+      if(sectionContent!='' && !isLoading){
+        const updatedSection: Section = {...section}
+        appStateContext?.dispatch({ type: 'UPDATE_IS_LOADED_SECTIONS', payload: {section : updatedSection} })
+      }
     }
   }, [sectionContent, isLoading, isManuallyCleared])
 
@@ -261,6 +265,7 @@ const SectionCard = ({ sectionIdx  }: SectionCardProps) => {
                     console.error('Section description is empty')
                     return
                   }
+                  appStateContext?.dispatch({ type: 'UPDATE_IS_LOADED_SECTIONS', payload: {section : null, 'title' : sectionTitle ,'act' :'removeItem'  } })
 
                   setIsPopoverOpen(false)
                   fetchSectionContent(sectionTitle, updatedSectionDescription)

src/frontend/src/components/Sidebar/Sidebar.test.tsx

@@ -5,6 +5,7 @@ import Sidebar from './Sidebar';
 import { ChatHistoryLoadingState } from '../../api/models';
 import { BrowserRouter as Router, useLocation ,useNavigate} from 'react-router-dom';
 import { getUserInfo } from '../../api';
+import {defaultMockState} from '../../test/test.utils';
 
 const mockDispatch = jest.fn();
 beforeEach(() => {
@@ -35,6 +36,7 @@ jest.mock('react-router-dom', () => ({
   useLocation: jest.fn(),
 }));
 const mockState = {
+  ...defaultMockState,
   isChatHistoryOpen: false,
   chatHistoryLoadingState: ChatHistoryLoadingState.Loading,
   isCosmosDBAvailable: {
@@ -55,25 +57,8 @@ const mockState = {
   failedSections : [],
   isFailedReqInitiated : false,
   isLoading : false,
-  isLoadedSections : []
-};
-const mockState2 = {
-  isChatHistoryOpen: false,
-    chatHistoryLoadingState: ChatHistoryLoadingState.Loading,
-    chatHistory: null, 
-    filteredChatHistory: [], 
-    currentChat: null, 
-    browseChat: null, 
-    generateChat: null,
-    isCosmosDBAvailable: {
-        cosmosDB: false,
-        status: 'NotConfigured' 
-    },
-    frontendSettings: { auth_enabled: false }, 
-    feedbackState: {}, 
-    draftedDocument: null,
-    draftedDocumentTitle: ''
 };
+
 const renderSidebar = (stateOverride = {}, pathname = '/') => {
 
   (useLocation as jest.Mock).mockReturnValue({ pathname });

src/frontend/src/pages/draft/Draft.tsx

@@ -41,8 +41,9 @@ const Draft = (): JSX.Element => {
       }, index * 500); 
     });
 
-      //appStateContext?.dispatch({ type: 'UPDATE_IS_LOADED_SECTIONS', payload: {section : null, 'act': 'removeAll' } })
-  
+    return ()=>{
+      appStateContext?.dispatch({ type: 'UPDATE_IS_LOADED_SECTIONS', payload: {section : null, 'act': 'removeAll' } })
+    }
   }, []); 
 
   useEffect(()=>{

src/frontend/src/state/AppProvider.tsx

@@ -67,7 +67,7 @@ export type Action =
   | { type: 'REMOVED_FAILED_SECTION'; payload: {section : Section} }
   | { type: 'UPDATE_SECTION_API_REQ_STATUS'; payload: boolean }
   | { type: 'SET_LOADING'; payload: boolean }
-  | { type: 'UPDATE_IS_LOADED_SECTIONS'; payload: {section : Section | null ,'act'?: string} }
+  | { type: 'UPDATE_IS_LOADED_SECTIONS'; payload: {section : Section | null , title ? : string , 'act'?: string} }
 
 const initialState: AppState = {
   isChatHistoryOpen: false,

src/frontend/src/state/AppReducer.tsx

@@ -122,14 +122,25 @@ export const appStateReducer = (state: AppState, action: Action): AppState => {
 
     case 'UPDATE_IS_LOADED_SECTIONS' :
       let tempLoadedSection:any = [];
-      if(action.payload.act === 'removeAll')
-      {
-         tempLoadedSection = [];
-      }else
-      {
-        tempLoadedSection = [...state.isLoadedSections];
-        tempLoadedSection.push(action.payload.section)
+      console.log("action.payload", action.payload);
+
+      switch(action.payload.act){
+        case 'removeAll': 
+        tempLoadedSection = [];
+        break;
+        case 'removeItem' : 
+        tempLoadedSection = state.isLoadedSections.filter((item) => item.title !== action.payload.title);
+        break;
+        default : 
+          const exists = state.isLoadedSections.some((item) => item.title === action.payload.section?.title);
+          console.log("exists", exists);
+          tempLoadedSection = [...state.isLoadedSections];
+          if(!exists){
+            tempLoadedSection.push(action.payload.section);
+          }
+          break;
       }
+    
       return {...state, isLoadedSections: tempLoadedSection}
 
     default:

src/frontend/src/test/test.utils.tsx

@@ -4,7 +4,7 @@ import { render, RenderResult } from '@testing-library/react';
 import { AppStateContext } from '../state/AppProvider';
 import { Conversation, ChatHistoryLoadingState } from '../api/models'; 
 // Default mock state
-const defaultMockState = {
+export const defaultMockState = {
   isChatHistoryOpen: true,
   chatHistoryLoadingState: ChatHistoryLoadingState.Loading,
   isCosmosDBAvailable: { cosmosDB: true, status: 'success' },