instructlab · vishnoianil · Jul 11, 2024 · Jul 11, 2024
diff --git a/src/app/api/pr/knowledge/route.ts b/src/app/api/pr/knowledge/route.ts
@@ -3,7 +3,8 @@ import { NextResponse } from 'next/server';
 import { getToken } from 'next-auth/jwt';
 import { NextRequest } from 'next/server';
 import yaml from 'js-yaml';
-import { KnowledgeYamlData, AttributionData, YamlLineLength } from '@/types';
+import { KnowledgeYamlData, AttributionData } from '@/types';
+import { dumpYaml } from '@/utils/yamlConfig';
 
 const GITHUB_API_URL = 'https://api.github.com';
 const UPSTREAM_REPO_OWNER = process.env.NEXT_PUBLIC_TAXONOMY_REPO_OWNER!;
@@ -51,7 +52,8 @@ export async function POST(req: NextRequest) {
     const newYamlFilePath = `${filePath}qna.yaml`;
     const newAttributionFilePath = `${filePath}attribution.txt`;
 
-    const yamlString = yaml.dump(knowledgeData, { lineWidth: YamlLineLength });
+    const yamlString = dumpYaml(knowledgeData);
+
     const attributionContent = `Title of work: ${attributionData.title_of_work}
 Link to work: ${attributionData.link_to_work}
 Revision: ${attributionData.revision}

diff --git a/src/app/api/pr/skill/route.ts b/src/app/api/pr/skill/route.ts
@@ -3,7 +3,8 @@ import { NextResponse } from 'next/server';
 import { getToken } from 'next-auth/jwt';
 import { NextRequest } from 'next/server';
 import yaml from 'js-yaml';
-import { YamlLineLength, SkillYamlData, AttributionData } from '@/types';
+import { SkillYamlData, AttributionData } from '@/types';
+import { dumpYaml } from '@/utils/yamlConfig';
 
 const GITHUB_API_URL = 'https://api.github.com';
 const UPSTREAM_REPO_OWNER = process.env.NEXT_PUBLIC_TAXONOMY_REPO_OWNER!;
@@ -47,7 +48,7 @@ export async function POST(req: NextRequest) {
     const skillData = yaml.load(content) as SkillYamlData;
     const attributionData = attribution as AttributionData;
 
-    const yamlString = yaml.dump(skillData, { lineWidth: YamlLineLength });
+    const yamlString = dumpYaml(skillData);
 
     const attributionString = `Title of work: ${attributionData.title_of_work}
 Link to work: ${attributionData.link_to_work}

diff --git a/src/app/edit-submission/knowledge/[id]/page.tsx b/src/app/edit-submission/knowledge/[id]/page.tsx
@@ -18,7 +18,7 @@ import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
 import { AppLayout } from '../../../../components/AppLayout';
 import { UploadFile } from '../../../../components/Contribute/Knowledge/UploadFile';
-import { AttributionData, PullRequestFile, KnowledgeYamlData, SchemaVersion, YamlLineLength } from '@/types';
+import { AttributionData, PullRequestFile, KnowledgeYamlData, SchemaVersion } from '@/types';
 import {
   fetchPullRequest,
   fetchFileContent,
@@ -29,6 +29,7 @@ import {
 } from '../../../../utils/github';
 import yaml from 'js-yaml';
 import axios from 'axios';
+import { dumpYaml } from '@/utils/yamlConfig';
 
 const UPSTREAM_REPO_NAME = process.env.NEXT_PUBLIC_TAXONOMY_REPO!;
 
@@ -166,11 +167,9 @@ const EditKnowledgePage: React.FunctionComponent<{ params: { id: string } }> = (
             answer: answers[index]
           }))
         };
-        const updatedYamlContent = yaml.dump(updatedYamlData, {
-          lineWidth: YamlLineLength,
-          noCompatMode: true,
-          quotingType: '"'
-        });
+
+        const updatedYamlContent = dumpYaml(updatedYamlData);
+
         console.log('Updated YAML content:', updatedYamlContent);
 
         const updatedAttributionData: AttributionData = {

diff --git a/src/app/edit-submission/skill/[id]/page.tsx b/src/app/edit-submission/skill/[id]/page.tsx
@@ -17,7 +17,7 @@ import { ActionGroup } from '@patternfly/react-core/dist/dynamic/components/Form
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
 import { AppLayout } from '../../../../components/AppLayout';
-import { AttributionData, PullRequestFile, SchemaVersion, SkillYamlData, YamlLineLength } from '@/types';
+import { AttributionData, PullRequestFile, SchemaVersion, SkillYamlData } from '@/types';
 import {
   fetchPullRequest,
   fetchFileContent,
@@ -28,6 +28,7 @@ import {
 } from '../../../../utils/github';
 import yaml from 'js-yaml';
 import axios from 'axios';
+import { dumpYaml } from '@/utils/yamlConfig';
 
 const UPSTREAM_REPO_NAME = process.env.NEXT_PUBLIC_TAXONOMY_REPO!;
 
@@ -148,11 +149,8 @@ const EditSkillPage: React.FunctionComponent<{ params: { id: string } }> = ({ pa
             answer: answers[index]
           }))
         };
-        const updatedYamlContent = yaml.dump(updatedYamlData, {
-          lineWidth: YamlLineLength,
-          noCompatMode: true,
-          quotingType: '"'
-        });
+
+        const updatedYamlContent = dumpYaml(updatedYamlData);
 
         console.log('Updated YAML content:', updatedYamlContent);
 

diff --git a/src/components/Contribute/Knowledge/index.tsx b/src/components/Contribute/Knowledge/index.tsx
@@ -11,14 +11,14 @@ import { Form } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { TextArea } from '@patternfly/react-core/dist/dynamic/components/TextArea';
 import { PlusIcon, MinusCircleIcon, CodeIcon } from '@patternfly/react-icons/dist/dynamic/icons/';
-import yaml from 'js-yaml';
 import { validateFields, validateEmail, validateUniqueItems } from '../../../utils/validation';
 import { getGitHubUsername } from '../../../utils/github';
 import { useSession } from 'next-auth/react';
 import YamlCodeModal from '../../YamlCodeModal';
 import { UploadFile } from './UploadFile';
-import { SchemaVersion, YamlLineLength, KnowledgeYamlData, AttributionData } from '@/types';
+import { SchemaVersion, KnowledgeYamlData, AttributionData } from '@/types';
 import KnowledgeDescription from './KnowledgeDescription';
+import { dumpYaml } from '@/utils/yamlConfig';
 
 export const KnowledgeForm: React.FunctionComponent = () => {
   const { data: session } = useSession();
@@ -204,7 +204,7 @@ export const KnowledgeForm: React.FunctionComponent = () => {
       }
     };
 
-    const yamlString = yaml.dump(knowledgeData, { lineWidth: YamlLineLength });
+    const yamlString = dumpYaml(knowledgeData);
 
     const attributionData: AttributionData = {
       title_of_work: title_work,
@@ -364,7 +364,7 @@ export const KnowledgeForm: React.FunctionComponent = () => {
       }
     };
 
-    const yamlString = yaml.dump(yamlData, { lineWidth: YamlLineLength });
+    const yamlString = dumpYaml(yamlData);
     const blob = new Blob([yamlString], { type: 'application/x-yaml' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
@@ -420,7 +420,7 @@ Creator names: ${creators}
       }
     };
 
-    const yamlString = yaml.dump(yamlData, { lineWidth: YamlLineLength });
+    const yamlString = dumpYaml(yamlData);
     setYamlContent(yamlString);
     setIsModalOpen(true);
   };

diff --git a/src/components/Contribute/Knowledge/knowledge.css b/src/components/Contribute/Knowledge/knowledge.css
@@ -6,7 +6,6 @@
   margin-bottom: 50px;
 }
 
-
 .submit-k:hover,
 .download-k-yaml:hover,
 .download-k-attribution:hover,

diff --git a/src/components/Contribute/Skill/index.tsx b/src/components/Contribute/Skill/index.tsx
@@ -12,12 +12,12 @@ import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { TextArea } from '@patternfly/react-core/dist/dynamic/components/TextArea';
 import { PlusIcon, MinusCircleIcon, CodeIcon } from '@patternfly/react-icons/dist/dynamic/icons/';
 import { validateFields, validateEmail, validateUniqueItems } from '../../../utils/validation';
-import yaml from 'js-yaml';
 import { getGitHubUsername } from '../../../utils/github';
 import { useSession } from 'next-auth/react';
 import YamlCodeModal from '../../YamlCodeModal';
-import { AttributionData, SchemaVersion, SkillYamlData, YamlLineLength } from '@/types';
+import { AttributionData, SchemaVersion, SkillYamlData } from '@/types';
 import SkillDescription from './SkillDescription';
+import { dumpYaml } from '@/utils/yamlConfig';
 
 export const SkillForm: React.FunctionComponent = () => {
   const { data: session } = useSession();
@@ -188,7 +188,7 @@ export const SkillForm: React.FunctionComponent = () => {
       }))
     };
 
-    const yamlString = yaml.dump(skillData, { lineWidth: YamlLineLength });
+    const yamlString = dumpYaml(skillData);
 
     const attributionData: AttributionData = {
       title_of_work: title_work,
@@ -237,7 +237,7 @@ export const SkillForm: React.FunctionComponent = () => {
       }))
     };
 
-    const yamlString = yaml.dump(yamlData, { lineWidth: YamlLineLength });
+    const yamlString = dumpYaml(yamlData);
 
     setYamlContent(yamlString);
     setIsModalOpen(true);
@@ -309,7 +309,7 @@ export const SkillForm: React.FunctionComponent = () => {
       })
     };
 
-    const yamlString = yaml.dump(yamlData, { lineWidth: YamlLineLength });
+    const yamlString = dumpYaml(yamlData);
     const blob = new Blob([yamlString], { type: 'application/x-yaml' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -1,7 +1,6 @@
 // src/types/index.ts
 
 export const SchemaVersion = 2;
-export const YamlLineLength = 80;
 
 export interface Endpoint {
   id: string;

diff --git a/src/utils/yamlConfig.ts b/src/utils/yamlConfig.ts
@@ -0,0 +1,44 @@
+// src/app/utils/yamlConfig.ts
+import yaml from 'js-yaml';
+
+export const YamlLineLength = 80;
+
+export const EmptyStringYamlType = new yaml.Type('!empty', {
+  kind: 'scalar',
+  resolve: (data: unknown): boolean => data === '' || data === null,
+  represent: (): string => '',
+  predicate: (object: unknown): boolean => object === '' || object === null
+});
+
+export const CustomYamlSchema = yaml.DEFAULT_SCHEMA.extend({ implicit: [EmptyStringYamlType] });
+
+export interface YamlDumpOptions extends yaml.DumpOptions {
+  schema: typeof CustomYamlSchema;
+  lineWidth: number;
+  noQuotes?: boolean;
+}
+
+export const defaultYamlDumpOptions: YamlDumpOptions = {
+  schema: CustomYamlSchema,
+  lineWidth: YamlLineLength,
+  noQuotes: true
+};
+
+function removeNullValues(obj: unknown): unknown {
+  if (Array.isArray(obj)) {
+    return obj.map(removeNullValues);
+  } else if (obj !== null && typeof obj === 'object') {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .map(([key, value]) => [key, removeNullValues(value)])
+        .filter(([, value]) => value !== null)
+    );
+  }
+  return obj === null ? '' : obj;
+}
+
+export function dumpYaml(data: unknown, options: Partial<YamlDumpOptions> = {}): string {
+  const mergedOptions: YamlDumpOptions = { ...defaultYamlDumpOptions, ...options };
+  const processedData = removeNullValues(data);
+  return yaml.dump(processedData, mergedOptions);
+}