Fix contribution publish for the container deployments

Signed-off-by: Anil Vishnoi <[email protected]>

src/app/api/native/git/branches/route.ts

@@ -6,6 +6,8 @@ import path from 'path';
 
 // Get the repository path from the environment variable
 const LOCAL_TAXONOMY_ROOT_DIR = process.env.NEXT_PUBLIC_LOCAL_TAXONOMY_ROOT_DIR || `${process.env.HOME}/.instructlab-ui`;
+const REMOTE_TAXONOMY_ROOT_DIR = process.env.NEXT_PUBLIC_TAXONOMY_REPO_DIR || '';
+const REMOTE_TAXONOMY_REPO_CONTAINER_MOUNT_DIR = process.env.NEXT_PUBLIC_TAXONOMY_REPO_CONTAINER_MOUNT_DIR || '/tmp/.instructlab-ui/taxonomy';
 
 interface Diffs {
   file: string;
@@ -47,8 +49,8 @@ export async function GET() {
 // Handle POST requests for merge or branch comparison
 export async function POST(req: NextRequest) {
   const LOCAL_TAXONOMY_DIR = path.join(LOCAL_TAXONOMY_ROOT_DIR, '/taxonomy');
-  const { branchName, action, remoteTaxonomyRepoDir } = await req.json();
-  console.log('Received POST request:', { branchName, action, remoteTaxonomyRepoDir });
+  const { branchName, action } = await req.json();
+  console.log('Received POST request:', { branchName, action });
 
   if (action === 'delete') {
     return handleDelete(branchName, LOCAL_TAXONOMY_DIR);
@@ -59,6 +61,19 @@ export async function POST(req: NextRequest) {
   }
 
   if (action === 'publish') {
+    let remoteTaxonomyRepoDir: string = '';
+    // Check if directory pointed by remoteTaxonomyRepoDir exists and not empty
+    if (fs.existsSync(REMOTE_TAXONOMY_REPO_CONTAINER_MOUNT_DIR) && fs.readdirSync(remoteTaxonomyRepoDir).length !== 0) {
+      remoteTaxonomyRepoDir = REMOTE_TAXONOMY_REPO_CONTAINER_MOUNT_DIR;
+    } else {
+      if (fs.existsSync(REMOTE_TAXONOMY_ROOT_DIR) && fs.readdirSync(REMOTE_TAXONOMY_ROOT_DIR).length !== 0) {
+        remoteTaxonomyRepoDir = REMOTE_TAXONOMY_ROOT_DIR;
+      }
+    }
+    if (remoteTaxonomyRepoDir === '') {
+      return NextResponse.json({ error: 'Remote taxonomy repository path does not exist.' }, { status: 400 });
+    }
+
     return handlePublish(branchName, LOCAL_TAXONOMY_DIR, remoteTaxonomyRepoDir);
   }
   return NextResponse.json({ error: 'Invalid action specified' }, { status: 400 });

src/app/contribute/knowledge/page.tsx

@@ -1,11 +1,23 @@
 // src/app/contribute/knowledge/page.tsx
-import KnowledgeFormNative from '@/components/Contribute/Knowledge/Native';
-import * as React from 'react';
-import { AppLayout } from '../../../components/AppLayout';
-import { KnowledgeFormGithub } from '../../../components/Contribute/Knowledge/Github';
+'use client';
+import { AppLayout } from '@/components/AppLayout';
+import { KnowledgeFormGithub } from '@/components/Contribute/Knowledge/Github/index';
+import KnowledgeFormNative from '@/components/Contribute/Knowledge/Native/index';
+import { useEffect, useState } from 'react';
 
-const KnowledgeFormPage: React.FC = () => {
-  return <AppLayout>{process.env.IL_UI_DEPLOYMENT === 'native' ? <KnowledgeFormNative /> : <KnowledgeFormGithub />}</AppLayout>;
+const KnowledgeFormPage: React.FunctionComponent = () => {
+  const [deploymentType, setDeploymentType] = useState<string | undefined>();
+
+  useEffect(() => {
+    const getEnvVariables = async () => {
+      const res = await fetch('/api/envConfig');
+      const envConfig = await res.json();
+      setDeploymentType(envConfig.DEPLOYMENT_TYPE);
+    };
+    getEnvVariables();
+  }, []);
+
+  return <AppLayout>{deploymentType === 'native' ? <KnowledgeFormNative /> : <KnowledgeFormGithub />}</AppLayout>;
 };
 
 export default KnowledgeFormPage;

src/app/contribute/skill/page.tsx

@@ -1,11 +1,23 @@
 // src/app/contribute/skill/page.tsx
-import SkillFormNative from '@/components/Contribute/Skill/Native';
-import * as React from 'react';
-import { AppLayout } from '../../../components/AppLayout';
-import { SkillFormGithub } from '../../../components/Contribute/Skill/Github';
+'use client';
+import { AppLayout } from '@/components/AppLayout';
+import { SkillFormGithub } from '@/components/Contribute/Skill/Github/index';
+import { SkillFormNative } from '@/components/Contribute/Skill/Native/index';
+import { useEffect, useState } from 'react';
 
-const SkillFormPage: React.FC = () => {
-  return <AppLayout>{process.env.IL_UI_DEPLOYMENT === 'native' ? <SkillFormNative /> : <SkillFormGithub />}</AppLayout>;
+const SkillFormPage: React.FunctionComponent = () => {
+  const [deploymentType, setDeploymentType] = useState<string | undefined>();
+
+  useEffect(() => {
+    const getEnvVariables = async () => {
+      const res = await fetch('/api/envConfig');
+      const envConfig = await res.json();
+      setDeploymentType(envConfig.DEPLOYMENT_TYPE);
+    };
+    getEnvVariables();
+  }, []);
+
+  return <AppLayout>{deploymentType === 'native' ? <SkillFormNative /> : <SkillFormGithub />}</AppLayout>;
 };
 
 export default SkillFormPage;

src/app/dashboard/page.tsx

@@ -1,15 +1,16 @@
-// src/app/page.tsx
+// src/app/dashboard/page.tsx
 'use client';
 
-import * as React from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import { AppLayout } from '@/components/AppLayout';
 import { DashboardGithub } from '@/components/Dashboard/Github/dashboard';
 import { DashboardNative } from '@/components/Dashboard/Native/dashboard';
+import { useEffect, useState } from 'react';
+
 const Home: React.FunctionComponent = () => {
-  const [deploymentType, setDeploymentType] = React.useState<string | undefined>();
+  const [deploymentType, setDeploymentType] = useState<string | undefined>();
 
-  React.useEffect(() => {
+  useEffect(() => {
     const getEnvVariables = async () => {
       const res = await fetch('/api/envConfig');
       const envConfig = await res.json();

src/components/AppLayout.tsx

@@ -21,7 +21,7 @@ import { PageSidebar } from '@patternfly/react-core/dist/dynamic/components/Page
 import { PageSidebarBody } from '@patternfly/react-core/dist/dynamic/components/Page';
 import { SkipToContent } from '@patternfly/react-core/dist/dynamic/components/SkipToContent';
 import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner';
-import { Bullseye } from '@patternfly/react-core';
+import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
 import UserMenu from './UserMenu/UserMenu';
 import { useSession } from 'next-auth/react';
 // import { useTheme } from '../context/ThemeContext';

src/components/Contribute/Knowledge/DownloadAttribution/DownloadAttribution.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem';
-import { Icon } from '@patternfly/react-core';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
 import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
 import { KnowledgeFormData } from '@/types';
 

src/components/Contribute/Knowledge/DownloadDropdown/DownloadDropdown.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dropdown } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
 import { DropdownList } from '@patternfly/react-core/dist/dynamic/components/Dropdown';
-import { Icon } from '@patternfly/react-core';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
 import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
 import DownloadYaml from '../DownloadYaml/DownloadYaml';
 import DownloadAttribution from '../DownloadAttribution/DownloadAttribution';

src/components/Contribute/Knowledge/DownloadYaml/DownloadYaml.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { KnowledgeFormData, KnowledgeYamlData } from '@/types';
 import { KnowledgeSchemaVersion } from '@/types/const';
 import { dumpYaml } from '@/utils/yamlConfig';
-import { Icon } from '@patternfly/react-core';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
 import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 

src/components/Contribute/Knowledge/Github/index.tsx

@@ -1,4 +1,4 @@
-// src/components/Experimental/ContributeLocal/Knowledge/index.tsx
+// src/components/Contribute/Knowledge/Github/index.tsx
 'use client';
 import React, { useEffect, useMemo, useState } from 'react';
 import '../knowledge.css';

src/components/Contribute/Knowledge/Native/index.tsx

@@ -1,4 +1,4 @@
-// src/components/Experimental/ContributeLocal/Knowledge/index.tsx
+// src/components/Contribute/Native/Knowledge/index.tsx
 'use client';
 import React, { useEffect, useMemo, useState } from 'react';
 import '../knowledge.css';

src/components/Contribute/Knowledge/ViewDropdown/ViewDropdown.tsx

@@ -8,7 +8,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import { AttributionData, KnowledgeFormData, KnowledgeYamlData } from '@/types';
 import { KnowledgeSchemaVersion } from '@/types/const';
 import { dumpYaml } from '@/utils/yamlConfig';
-import { Icon } from '@patternfly/react-core';
+import { Icon } from '@patternfly/react-core/dist/dynamic/components/Icon';
 import FileIcon from '@patternfly/react-icons/dist/dynamic/icons/file-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 

src/components/Contribute/Skill/Github/index.tsx

@@ -1,4 +1,4 @@
-// src/components/Contribute/Skill/index.tsx
+// src/components/Contribute/Skill/Github/index.tsx
 'use client';
 import React, { useEffect, useState } from 'react';
 import './skills.css';

src/components/Contribute/Skill/Native/index.tsx

@@ -1,4 +1,4 @@
-// src/components/contribute/Skill/index.tsx
+// src/components/Contribute/Skill/Native/index.tsx
 'use client';
 import React, { useEffect, useState } from 'react';
 import './skills.css';

src/components/Dashboard/Native/dashboard.tsx

@@ -22,19 +22,12 @@ import { Alert, AlertProps, AlertVariant } from '@patternfly/react-core/dist/esm
 import { AlertActionCloseButton } from '@patternfly/react-core/dist/esm/components/Alert/AlertActionCloseButton';
 import { PencilAltIcon } from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import { UploadIcon } from '@patternfly/react-icons/dist/esm/icons/upload-icon';
-import { ModalHeader } from '@patternfly/react-core/dist/esm/components/Modal/ModalHeader';
-import { ModalBody } from '@patternfly/react-core/dist/esm/components/Modal/ModalBody';
-import { FormGroup } from '@patternfly/react-core/dist/esm/components/Form/FormGroup';
-import { Form } from '@patternfly/react-core/dist/esm/components/Form/Form';
-import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput/TextInput';
-import { ModalFooter } from '@patternfly/react-core/dist/esm/components/Modal/ModalFooter';
 
 const InstructLabLogo: React.FC = () => <Image src="/InstructLab-LogoFile-RGB-FullColor.svg" alt="InstructLab Logo" width={256} height={256} />;
 
 const DashboardNative: React.FunctionComponent = () => {
   const [branches, setBranches] = React.useState<{ name: string; creationDate: number }[]>([]);
-  const [selectedTaxonomyRepoDir, setSelectedTaxonomyRepoDir] = React.useState<string>('');
-  const [defaultTaxonomyRepoDir, setDefaultTaxonomyRepoDir] = React.useState<string>('');
+  const [taxonomyRepoDir, setTaxonomyRepoDir] = React.useState<string>('');
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
   const [mergeStatus] = React.useState<{ branch: string; message: string; success: boolean } | null>(null);
   const [diffData, setDiffData] = React.useState<{ branch: string; changes: { file: string; status: string }[] } | null>(null);
@@ -53,8 +46,7 @@ const DashboardNative: React.FunctionComponent = () => {
     const getEnvVariables = async () => {
       const res = await fetch('/api/envConfig');
       const envConfig = await res.json();
-      setDefaultTaxonomyRepoDir(envConfig.TAXONOMY_REPO_DIR);
-      setSelectedTaxonomyRepoDir(envConfig.TAXONOMY_REPO_DIR);
+      setTaxonomyRepoDir(envConfig.TAXONOMY_REPO_DIR);
     };
     getEnvVariables();
 
@@ -126,28 +118,6 @@ const DashboardNative: React.FunctionComponent = () => {
     return `${date.toLocaleDateString()} ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
   };
 
-  // Disabling Merge for now, leaving the code for when we re-implement the feature.
-  // const handleMerge = async (branchName: string) => {
-  //   setMergeStatus(null); // Clear previous status
-  //   try {
-  //     const response = await fetch('/api/native/git/branches', {
-  //       method: 'POST',
-  //       headers: { 'Content-Type': 'application/json' },
-  //       body: JSON.stringify({ branchName, action: 'merge' })
-  //     });
-  //
-  //     const result = await response.json();
-  //     if (response.ok) {
-  //       setMergeStatus({ branch: branchName, message: result.message, success: true });
-  //     } else {
-  //       setMergeStatus({ branch: branchName, message: result.error, success: false });
-  //     }
-  //   } catch (error) {
-  //     setMergeStatus({ branch: branchName, message: 'Merge failed due to an unexpected error.', success: false });
-  //     console.error('Error merging branch:', error);
-  //   }
-  // };
-
   const handleShowChanges = async (branchName: string) => {
     try {
       const response = await fetch('/api/native/git/branches', {
@@ -229,13 +199,12 @@ const DashboardNative: React.FunctionComponent = () => {
         const response = await fetch('/api/native/git/branches', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ branchName: selectedBranch, action: 'publish', remoteTaxonomyRepoDir: selectedTaxonomyRepoDir })
+          body: JSON.stringify({ branchName: selectedBranch, action: 'publish' })
         });
 
         const result = await response.json();
         if (response.ok) {
           addSuccessAlert(result.message);
-          setSelectedTaxonomyRepoDir(defaultTaxonomyRepoDir);
           setSelectedBranch(null);
           setIsPublishModalOpen(false);
         } else {
@@ -250,7 +219,6 @@ const DashboardNative: React.FunctionComponent = () => {
   };
 
   const handlePublishContributionCancel = () => {
-    setSelectedTaxonomyRepoDir(defaultTaxonomyRepoDir);
     setSelectedBranch(null);
     setIsPublishModalOpen(false);
   };
@@ -397,40 +365,20 @@ const DashboardNative: React.FunctionComponent = () => {
 
         <Modal
           variant={ModalVariant.small}
+          title="Publishing Contribution"
+          titleIconVariant="warning"
           isOpen={isPublishModalOpen}
           onClose={() => setIsPublishModalOpen(false)}
-          aria-labelledby="form-modal-title"
-          aria-describedby="modal-box-description-form"
-        >
-          <ModalHeader
-            title="Publish Contribution"
-            description="Publish your contribution to remote taxonomy repository"
-            descriptorId="modal-box-description-form"
-            labelId="form-modal-title"
-          />
-          <ModalBody>
-            <Form id="modal-with-form-form">
-              <FormGroup label="Taxonomy Path">
-                <TextInput
-                  isRequired
-                  type="email"
-                  id="modal-with-form-form-name"
-                  name="modal-with-form-form-name"
-                  placeholder={defaultTaxonomyRepoDir === '' ? 'Please enter the taxonomy repo directory path.' : defaultTaxonomyRepoDir}
-                  value={selectedTaxonomyRepoDir}
-                  onChange={(_event, value) => setSelectedTaxonomyRepoDir(value)}
-                />
-              </FormGroup>
-            </Form>
-          </ModalBody>
-          <ModalFooter>
-            <Button key="publish" variant="primary" form="modal-with-form-form" onClick={() => handlePublishContributionConfirm()}>
+          actions={[
+            <Button key="confirm" variant="primary" onClick={() => handlePublishContributionConfirm()}>
               Publish
-            </Button>
-            <Button key="cancel" variant="link" onClick={() => handlePublishContributionCancel()}>
+            </Button>,
+            <Button key="cancel" variant="secondary" onClick={() => handlePublishContributionCancel()}>
               Cancel
             </Button>
-          </ModalFooter>
+          ]}
+        >
+          <p>are you sure you want to publish contribution to remote taxonomy repository present at : {taxonomyRepoDir}?</p>
         </Modal>
       </PageSection>
     </div>