Simplify navigation for draft contributions

src/app/contribute/knowledge/[...slug]/page.tsx

@@ -12,7 +12,7 @@ const KnowledgeViewPage = async ({ params }: PageProps) => {
 
   return (
     <AppLayout className="contribute-page">
-      <ViewKnowledgePage branchName={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] === 'isDraft'} />
+      <ViewKnowledgePage branchName={resolvedParams.slug[0]} />
     </AppLayout>
   );
 };

src/app/contribute/knowledge/edit/[...slug]/page.tsx

@@ -12,7 +12,7 @@ const EditKnowledgePage = async ({ params }: PageProps) => {
 
   return (
     <AppLayout className="contribute-page">
-      <EditKnowledge branchName={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] === 'isDraft'} />
+      <EditKnowledge branchName={resolvedParams.slug[0]} />
     </AppLayout>
   );
 };

src/app/contribute/skill/[...slug]/page.tsx

@@ -12,7 +12,7 @@ const SkillViewPage = async ({ params }: PageProps) => {
 
   return (
     <AppLayout className="contribute-page" requiredFeature={FeaturePages.Skill}>
-      <ViewSkillPage branchName={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] === 'isDraft'} />
+      <ViewSkillPage branchName={resolvedParams.slug[0]} />
     </AppLayout>
   );
 };

src/app/contribute/skill/edit/[...slug]/page.tsx

@@ -12,7 +12,7 @@ const EditSkillPage = async ({ params }: PageProps) => {
 
   return (
     <AppLayout className="contribute-page" requiredFeature={FeaturePages.Skill}>
-      <EditSkill branchName={resolvedParams.slug[0]} isDraft={resolvedParams.slug[1] === 'isDraft'} />
+      <EditSkill branchName={resolvedParams.slug[0]} />
     </AppLayout>
   );
 };

src/app/dashboard/page.tsx

@@ -2,7 +2,6 @@
 'use client';
 
 import React from 'react';
-import '@patternfly/react-core/dist/styles/base.css';
 import { AppLayout } from '@/components/AppLayout';
 import DashboardPage from '@/components/Dashboard/DashboardPage';
 

src/app/documents/page.tsx

@@ -2,7 +2,6 @@
 'use client';
 
 import React from 'react';
-import '@patternfly/react-core/dist/styles/base.css';
 import { AppLayout } from '@/components/AppLayout';
 import Documents from '@/components/Documents/Documents';
 

src/app/experimental/chat-eval/page.tsx

@@ -2,7 +2,6 @@
 'use client';
 
 import * as React from 'react';
-import '@patternfly/react-core/dist/styles/base.css';
 import { AppLayout, FeaturePages } from '@/components/AppLayout';
 import ChatEval from '@/components/Experimental/ChatEval/ChatEval';
 

src/app/experimental/fine-tune/page.tsx

@@ -2,7 +2,6 @@
 'use client';
 
 import * as React from 'react';
-import '@patternfly/react-core/dist/styles/base.css';
 import { AppLayout, FeaturePages } from '@/components/AppLayout';
 import FineTuning from '@/components/Experimental/FineTuning/FineTuningJobs';
 

src/app/index.tsx

@@ -2,16 +2,8 @@
 'use client';
 
 import * as React from 'react';
-import { ThemeProvider } from '../context/ThemeContext';
-import '@patternfly/react-core/dist/styles/base.css';
-import Dashboard from './dashboard/page';
+import DashboardPage from './dashboard/page';
 
-const Home: React.FunctionComponent = () => {
-  return (
-    <ThemeProvider>
-      <Dashboard />
-    </ThemeProvider>
-  );
-};
+const Home: React.FunctionComponent = () => <DashboardPage />;
 
 export default Home;

src/components/Contribute/ContributePageHeader.tsx

@@ -4,8 +4,9 @@
 import * as React from 'react';
 import { useRouter } from 'next/navigation';
 import { PageSection, Flex, FlexItem, Title, PageBreadcrumb, Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
-import { EditFormData, KnowledgeFormData, SkillFormData } from '@/types';
+import { ContributionFormData, EditFormData, KnowledgeFormData, SkillFormData } from '@/types';
 import PageDescriptionWithHelp from '@/components/Common/PageDescriptionWithHelp';
+import { isDraftDataExist } from '@/components/Contribute/Utils/autoSaveUtils';
 import {
   DraftContributionLabel,
   KnowledgeContributionLabel,
@@ -15,6 +16,7 @@ import {
 
 interface Props {
   editFormData?: EditFormData<SkillFormData | KnowledgeFormData>;
+  draftData?: ContributionFormData;
   isEdit?: boolean;
   isSkill?: boolean;
   description: React.ReactNode;
@@ -25,6 +27,7 @@ interface Props {
 
 const ContributePageHeader: React.FC<Props> = ({
   editFormData,
+  draftData,
   isEdit = false,
   isSkill = false,
   description,
@@ -33,9 +36,10 @@ const ContributePageHeader: React.FC<Props> = ({
   actions
 }) => {
   const router = useRouter();
+  const currentData = draftData || editFormData?.formData;
   const contributionType = isSkill ? 'skill' : 'knowledge';
-  const viewUrl = `/contribute/${isSkill ? 'skill' : 'knowledge'}/${editFormData?.formData.branchName}${editFormData?.isDraft ? '/isDraft' : ''}`;
-  const contributionTitle = editFormData?.formData?.submissionSummary || `Draft ${contributionType} contribution`;
+  const viewUrl = `/contribute/${isSkill ? 'skill' : 'knowledge'}/${currentData?.branchName}`;
+  const contributionTitle = currentData?.submissionSummary || `Draft ${contributionType} contribution`;
 
   return (
     <>
@@ -58,9 +62,7 @@ const ContributePageHeader: React.FC<Props> = ({
                 router.push(viewUrl);
               }}
             >
-              {!editFormData
-                ? `Contribute ${contributionType}`
-                : editFormData?.formData?.submissionSummary || `Draft ${contributionType} contribution`}
+              {!editFormData ? `Contribute ${contributionType}` : currentData?.submissionSummary || `Draft ${contributionType} contribution`}
             </BreadcrumbItem>
           ) : null}
           <BreadcrumbItem isActive>
@@ -78,16 +80,16 @@ const ContributePageHeader: React.FC<Props> = ({
                     <Title headingLevel="h1" size="2xl">
                       {!editFormData
                         ? `Submit ${contributionType} contribution`
-                        : editFormData?.formData?.submissionSummary || `Draft ${isSkill ? 'skill' : 'knowledge'} contribution`}
+                        : currentData?.submissionSummary || `Draft ${isSkill ? 'skill' : 'knowledge'} contribution`}
                     </Title>
                   </FlexItem>
                   <FlexItem>{isSkill ? <SkillContributionLabel /> : <KnowledgeContributionLabel />}</FlexItem>
-                  {editFormData?.isDraft ? (
+                  {currentData && isDraftDataExist(currentData.branchName) ? (
                     <FlexItem>
                       <DraftContributionLabel />
                     </FlexItem>
                   ) : null}
-                  {editFormData && !editFormData.isSubmitted ? (
+                  {!editFormData ? (
                     <FlexItem>
                       <NewContributionLabel isCompact={false} />
                     </FlexItem>

src/components/Contribute/Knowledge/Edit/EditKnowledge.tsx

@@ -3,7 +3,7 @@
 
 import * as React from 'react';
 import { useSession } from 'next-auth/react';
-import { KnowledgeEditFormData } from '@/types';
+import { KnowledgeEditFormData, KnowledgeFormData } from '@/types';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Modal, ModalVariant, ModalBody } from '@patternfly/react-core';
@@ -13,26 +13,22 @@ import KnowledgeForm from '@/components/Contribute/Knowledge/Edit/KnowledgeForm'
 
 interface EditKnowledgeClientComponentProps {
   branchName: string;
-  isDraft: boolean;
 }
 
-const EditKnowledge: React.FC<EditKnowledgeClientComponentProps> = ({ branchName, isDraft }) => {
+const EditKnowledge: React.FC<EditKnowledgeClientComponentProps> = ({ branchName }) => {
   const { data: session } = useSession();
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [loadingMsg, setLoadingMsg] = useState<string>('');
-  const [knowledgeEditFormData, setKnowledgeEditFormData] = useState<KnowledgeEditFormData>();
+  const [knowledgeData, setKnowledgeData] = useState<{ draftData?: KnowledgeFormData; editFormData?: KnowledgeEditFormData }>();
   const router = useRouter();
 
   useEffect(() => {
-    if (isDraft) {
-      fetchDraftKnowledgeChanges({ branchName, setIsLoading, setLoadingMsg, setKnowledgeEditFormData });
-      return;
-    }
-
-    setLoadingMsg('Fetching knowledge data from branch : ' + branchName);
+    setLoadingMsg('Fetching knowledge data');
     const fetchFormData = async () => {
+      const draftData = fetchDraftKnowledgeChanges(branchName);
+
       const { editFormData, error } = await fetchKnowledgeBranchChanges(session, branchName);
-      if (error) {
+      if (error && !draftData) {
         setLoadingMsg(error);
         return;
       }
@@ -43,10 +39,10 @@ const EditKnowledge: React.FC<EditKnowledgeClientComponentProps> = ({ branchName
       }
 
       setIsLoading(false);
-      setKnowledgeEditFormData(editFormData);
+      setKnowledgeData({ draftData, editFormData });
     };
     fetchFormData();
-  }, [branchName, isDraft, session]);
+  }, [branchName, session]);
 
   const handleOnClose = () => {
     router.push('/dashboard');
@@ -63,7 +59,7 @@ const EditKnowledge: React.FC<EditKnowledgeClientComponentProps> = ({ branchName
     );
   }
 
-  return <KnowledgeForm knowledgeEditFormData={knowledgeEditFormData} />;
+  return <KnowledgeForm knowledgeEditFormData={knowledgeData?.editFormData} draftData={knowledgeData?.draftData} />;
 };
 
 export default EditKnowledge;

src/components/Contribute/Knowledge/Edit/KnowledgeForm.tsx

@@ -21,7 +21,7 @@ import { ActionGroupAlertContent } from '@/components/Contribute/types';
 import KnowledgeContributionSidePanelHelp from '@/components/SidePanelContents/KnowledgeContributionSidePanelHelp';
 import ContributePageHeader from '@/components/Contribute/ContributePageHeader';
 import ContributeAlertGroup from '@/components/Contribute/ContributeAlertGroup';
-import { storeDraftData, deleteDraftData, doSaveDraft, isDraftDataExist } from '@/components/Contribute/Utils/autoSaveUtils';
+import { storeDraftData, deleteDraftData, formDataChanged, isDraftDataExist } from '@/components/Contribute/Utils/autoSaveUtils';
 import { getDefaultKnowledgeFormData } from '@/components/Contribute/Utils/contributionUtils';
 import { UploadKnowledgeDocuments } from '@/components/Contribute/Utils/documentUtils';
 import { submitKnowledgeData } from '@/components/Contribute/Utils/submitUtils';
@@ -34,17 +34,19 @@ import '../knowledge.css';
 
 export interface KnowledgeFormProps {
   knowledgeEditFormData?: KnowledgeEditFormData;
+  draftData?: KnowledgeFormData;
 }
 
-export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ knowledgeEditFormData }) => {
+export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ knowledgeEditFormData, draftData }) => {
   const router = useRouter();
 
   const { data: session } = useSession();
+  const currentData: KnowledgeFormData | undefined = draftData || knowledgeEditFormData?.formData;
   const [knowledgeFormData, setKnowledgeFormData] = React.useState<KnowledgeFormData>(
-    knowledgeEditFormData?.formData
+    currentData
       ? {
-          ...knowledgeEditFormData.formData,
-          seedExamples: knowledgeEditFormData.formData.seedExamples.map((example, index) => ({
+          ...currentData,
+          seedExamples: currentData.seedExamples.map((example, index) => ({
             ...example,
             isExpanded: index === 0,
             immutable: example.immutable !== undefined ? example.immutable : true, // Ensure immutable is set
@@ -59,10 +61,12 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
               answerValidationError: qa.answerValidationError || ''
             }))
           })),
-          uploadedFiles: knowledgeEditFormData.formData.uploadedFiles
+          uploadedFiles: currentData.uploadedFiles
         }
       : getDefaultKnowledgeFormData()
   );
+  const lastUpdateRef = React.useRef<string>(JSON.stringify(knowledgeFormData));
+
   const [actionGroupAlertContent, setActionGroupAlertContent] = React.useState<ActionGroupAlertContent | undefined>();
   const [scrollableRef, setScrollableRef] = React.useState<HTMLElement | null>();
 
@@ -79,21 +83,23 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
   const setFilePath = React.useCallback((filePath: string) => setKnowledgeFormData((prev) => ({ ...prev, filePath })), []);
 
   React.useEffect(() => {
-    const storeDraft = async () => {
-      // If no change in the form data and there is no existing draft present, skip storing the draft.
-      if (!doSaveDraft(knowledgeFormData) && !isDraftDataExist(knowledgeFormData.branchName)) return;
-
-      const draftContributionStr = JSON.stringify(knowledgeFormData);
-      storeDraftData(
-        knowledgeFormData.branchName,
-        knowledgeFormData.filePath,
-        draftContributionStr,
-        !!knowledgeEditFormData?.isSubmitted,
-        knowledgeEditFormData?.oldFilesPath || ''
-      );
+    const storeDraft = () => {
+      if (isDraftDataExist(knowledgeFormData.branchName) && !formDataChanged(knowledgeFormData, knowledgeEditFormData?.formData)) {
+        deleteDraftData(knowledgeFormData.branchName);
+        lastUpdateRef.current = JSON.stringify(knowledgeFormData);
+        return;
+      }
+
+      const draftChanges = formDataChanged(knowledgeFormData, JSON.parse(lastUpdateRef.current));
+      if (draftChanges) {
+        const draftContributionStr = JSON.stringify(knowledgeFormData);
+        lastUpdateRef.current = draftContributionStr;
+        storeDraftData(knowledgeFormData.branchName, knowledgeFormData.filePath, draftContributionStr, knowledgeEditFormData?.oldFilesPath || '');
+      }
     };
+
     storeDraft();
-  }, [knowledgeEditFormData?.isSubmitted, knowledgeEditFormData?.oldFilesPath, knowledgeFormData]);
+  }, [knowledgeEditFormData?.formData, knowledgeEditFormData?.oldFilesPath, knowledgeFormData]);
 
   const updateActionGroupAlertContent = (newContent: ActionGroupAlertContent | undefined) => {
     // In order to restart the timer, we must re-create the Alert not re-use it. Clear it for one round then set the new info
@@ -116,11 +122,7 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
       return isDocUploaded;
     }
 
-    const result = await submitKnowledgeData(
-      knowledgeFormData,
-      updateActionGroupAlertContent,
-      knowledgeEditFormData?.isSubmitted ? knowledgeEditFormData : undefined
-    );
+    const result = await submitKnowledgeData(knowledgeFormData, updateActionGroupAlertContent, knowledgeEditFormData);
     if (result) {
       //Remove draft if present in the local storage
       deleteDraftData(knowledgeFormData.branchName);
@@ -135,6 +137,7 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
         <ContributePageHeader
           isEdit
           editFormData={knowledgeEditFormData}
+          draftData={draftData}
           description="Knowledge contributions improve a model’s ability to answer questions accurately. They consist of questions and answers, and documents
                 which back up that data. To autofill this form from a document, upload a YAML file."
           sidePanelContent={<KnowledgeContributionSidePanelHelp />}
@@ -143,8 +146,8 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
             <KnowledgeFormActions
               contributionTitle={knowledgeEditFormData?.formData.submissionSummary ?? 'New contribution'}
               knowledgeFormData={knowledgeFormData}
-              isDraft={knowledgeEditFormData?.isDraft}
-              isSubmitted={knowledgeEditFormData?.isSubmitted}
+              isDraft={!!draftData}
+              isSubmitted={!!knowledgeEditFormData}
               setActionGroupAlertContent={setActionGroupAlertContent}
               setKnowledgeFormData={setKnowledgeFormData}
             />
@@ -196,7 +199,7 @@ export const KnowledgeForm: React.FunctionComponent<KnowledgeFormProps> = ({ kno
             <ActionListGroup>
               <ActionListItem>
                 <Button variant={ButtonVariant.primary} type="submit" isDisabled={!isValid} onClick={() => isValid && handleSubmit()}>
-                  {knowledgeEditFormData?.isSubmitted ? 'Update' : 'Submit'}
+                  {knowledgeEditFormData ? 'Update' : 'Submit'}
                 </Button>
               </ActionListItem>
               <ActionListItem>

src/components/Contribute/Knowledge/KnowledgeFormActions.tsx

@@ -215,9 +215,7 @@ export const KnowledgeFormActions: React.FunctionComponent<Props> = ({
         <DropdownList>
           {isDevMode && setKnowledgeFormData ? <DropdownItem onClick={autoFillForm}>Autofill</DropdownItem> : null}
           {!setKnowledgeFormData ? (
-            <DropdownItem onClick={() => router.push(`/contribute/knowledge/edit/${knowledgeFormData.branchName}${isDraft ? '/isDraft' : ''}`)}>
-              Edit contribution
-            </DropdownItem>
+            <DropdownItem onClick={() => router.push(`/contribute/knowledge/edit/${knowledgeFormData.branchName}`)}>Edit contribution</DropdownItem>
           ) : null}
           {setKnowledgeFormData ? <DropdownItem onClick={() => setIsUploadYamlModalOpen(true)}>Upload YAML</DropdownItem> : null}
           <DropdownItem onClick={() => handleViewYaml()}>View YAML</DropdownItem>