Merge pull request #739 from jeff-phillips-18/content-fixes

Content fixes based on review

Author: vishnoianil

src/components/Common/WizardPageHeader.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 const WizardPageHeader: React.FC<Props> = ({ title, description }) => (
   <div>
-    <Content component="h4">{title}</Content>
+    <Content component="h3">{title}</Content>
     <Content component="p">{description}</Content>
   </div>
 );

src/components/Contribute/AttributionInformation/AttributionInformation.tsx

@@ -95,7 +95,7 @@ const AttributionInformation: React.FC<Props> = ({
           <FormGroup
             isRequired
             key={'attribution-info-details-title_work'}
-            label="Title"
+            label="Resource title"
             labelHelp={<WizardFormGroupLabelHelp bodyContent="The resource title is the title of the source document. " />}
           >
             <TextInput
@@ -121,7 +121,7 @@ const AttributionInformation: React.FC<Props> = ({
             <FormGroup
               isRequired
               key={'attribution-info-details-work_link'}
-              label="Link to work"
+              label="Resource link"
               labelHelp={<WizardFormGroupLabelHelp bodyContent="The resource link is a direct link to the source document." />}
             >
               <TextInput
@@ -161,7 +161,7 @@ const AttributionInformation: React.FC<Props> = ({
           <FormGroup
             isRequired
             key={'attribution-info-details-license'}
-            label="License of the work"
+            label="Resource license"
             labelHelp={
               <WizardFormGroupLabelHelp bodyContent="The resource license is the license type of the source document. This is usually a Creative Commons (CC) license, such as CC BY or CC BY-SA." />
             }

src/components/Contribute/ContributionWizard/ViewDropdownButton.tsx

@@ -104,7 +104,7 @@ export const ViewDropdownButton: React.FunctionComponent<Props> = ({ formData, c
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <Button variant="secondary" ref={toggleRef} onClick={onToggleClick}>
               <Flex gap={{ default: 'gapMd' }}>
-                <FlexItem>YAML/Attribution files</FlexItem>
+                <FlexItem>Views contribution details</FlexItem>
                 <FlexItem>
                   <CaretDownIcon />
                 </FlexItem>

src/components/Contribute/DetailsPage/DetailsPage.tsx

@@ -144,7 +144,7 @@ const DetailsPage: React.FC<Props> = ({
                     icon={isSummaryInvalid ? <ExclamationCircleIcon /> : undefined}
                     variant={isSummaryInvalid ? ValidatedOptions.error : ValidatedOptions.default}
                   >
-                    {submissionSummary.trim().length ? (
+                    {!isSummaryInvalid || submissionSummary.trim().length ? (
                       <>
                         Must be {MAX_SUMMARY_CHARS} characters or less.
                         {validSummary === ValidatedOptions.error && isSummaryInvalid

src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx

@@ -25,6 +25,7 @@ const DocumentInformation: React.FC<Props> = ({ existingFiles, setExistingFiles,
               manuals, encyclopedias, journals, and websites.{' '}
               <Button
                 variant="link"
+                component="a"
                 isInline
                 href="https://docs.instructlab.ai/taxonomy/knowledge/#knowledge-yaml-examples"
                 target="_blank"

src/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeSeedExamples.tsx

@@ -89,6 +89,7 @@ const KnowledgeSeedExamples: React.FC<Props> = ({ isGithubMode, filesToUpload, u
               <Button
                 variant="link"
                 isInline
+                component="a"
                 href="https://docs.instructlab.ai/taxonomy/knowledge/#knowledge-yaml-examples"
                 target="_blank"
                 rel="noopener noreferrer"

src/components/Contribute/Knowledge/KnowledgeSeedExamples/utils.ts

@@ -1,6 +1,6 @@
 import { KnowledgeSeedExample } from '@/types';
 
 export const getSeedExampleTitle = (seedExample: KnowledgeSeedExample, seedExampleIndex: number) =>
-  seedExample.knowledgeFile?.filename
-    ? `Seed example ${seedExampleIndex + 1}: ${seedExample.knowledgeFile?.filename}`
+  seedExample.context
+    ? `Seed example ${seedExampleIndex + 1}: ${seedExample.knowledgeFile?.filename || ''}`
     : `Select context for seed example ${seedExampleIndex + 1}`;

src/components/Contribute/Knowledge/UploadFile.tsx

@@ -13,7 +13,8 @@ import {
   ModalHeader,
   Flex,
   FlexItem,
-  MultipleFileUploadContext
+  MultipleFileUploadContext,
+  Content
 } from '@patternfly/react-core';
 import { UploadIcon } from '@patternfly/react-icons';
 import React, { useState, useEffect } from 'react';
@@ -219,6 +220,33 @@ export const UploadFile: React.FunctionComponent<UploadFileProps> = ({ existingF
 
   const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length;
 
+  const getOverwriteWarningText = () => {
+    if (filesToOverwrite.length > 1) {
+      return (
+        <>
+          <Content component="p">The following files have already been uploaded in this contribution:</Content>
+          <Content component="p">
+            <Content component="ul">
+              {filesToOverwrite.map((file) => (
+                <Content component="li" key={file.name}>
+                  {file.name}
+                </Content>
+              ))}
+            </Content>
+          </Content>
+          <Content component="p">Uploading the new files will overwrite the existing files.</Content>
+        </>
+      );
+    }
+
+    return (
+      <Content component="p">
+        A file with the name <b>{filesToOverwrite[0].name}</b> has already been uploaded in this contribution. Uploading the new file will overwrite
+        the existing one.
+      </Content>
+    );
+  };
+
   return (
     <div>
       <MultipleFileUpload
@@ -310,20 +338,13 @@ export const UploadFile: React.FunctionComponent<UploadFileProps> = ({ existingF
           {showOverwriteModal && (
             <Modal
               isOpen
-              title="Overwrite file"
               variant="small"
               aria-label="file overwrite warning"
               aria-labelledby="file-overwrite-warning-title"
               aria-describedby="file-overwrite-warning-variant"
             >
-              <ModalHeader title="File Overwrite" labelId="file-overwrite-warning-title" titleIconVariant="warning" />
-              <ModalBody id="file-overwrite-warning-variant">
-                <p>
-                  Files [<strong>{filesToOverwrite.map((file) => file.name).join(', ')}</strong>] are already uploaded. Are you sure you want to
-                  overwrite the existing files?
-                  <br />
-                </p>
-              </ModalBody>
+              <ModalHeader title="Overwrite file?" labelId="file-overwrite-warning-title" titleIconVariant="warning" />
+              <ModalBody id="file-overwrite-warning-variant">{getOverwriteWarningText()}</ModalBody>
               <ModalFooter>
                 <Button key="overwrite" variant="primary" onClick={overwriteFiles}>
                   Overwrite

src/components/Contribute/Skill/SkillSeedExamples/SkillSeedExamples.tsx

@@ -65,6 +65,7 @@ const SkillSeedExamples: React.FC<Props> = ({ seedExamples, onUpdateSeedExamples
               pairs.{' '}
               <Button
                 variant="link"
+                component="a"
                 isInline
                 href="https://docs.instructlab.ai/taxonomy/knowledge/#knowledge-yaml-examples"
                 target="_blank"
@@ -85,7 +86,7 @@ const SkillSeedExamples: React.FC<Props> = ({ seedExamples, onUpdateSeedExamples
               <AccordionToggle onClick={() => toggleSeedExampleExpansion(seedExampleIndex)} id={`seed-example-toggle-${seedExampleIndex}`}>
                 <Flex gap={{ default: 'gapMd' }} justifyContent={{ default: 'justifyContentSpaceBetween' }} style={{ width: '100%' }}>
                   <FlexItem>
-                    Seed Example {seedExampleIndex + 1}{' '}
+                    Seed example {seedExampleIndex + 1}{' '}
                     {seedExample.immutable ? <span style={{ color: 'var(--pf-t--global--color--status--danger--default)' }}>*</span> : null}
                   </FlexItem>
                   {!seedExample.immutable ? (

src/components/Contribute/Utils/validation.ts

@@ -146,8 +146,8 @@ export const validateKnowledgeFormFields = (
     const { success, currLength: length } = validateQuestionAndAnswerPairs(knowledgeFormData.seedExamples[index]);
     if (!success) {
       const actionGroupAlertContent: ActionGroupAlertContent = {
-        title: `Seed Example ${index + 1} has an issue!`,
-        message: `Total size of the Q and A pairs and context should not exceed 750 words (current size ${length}). Please provide shorter Q and A pairs or context.`,
+        title: `Seed example ${index + 1} has an issue!`,
+        message: `Total size of the question-and-answer pairs and context should not exceed 750 words (current size ${length}). Please provide shorter question-and-answer pairs or context.`,
         success: false
       };
       setActionGroupAlertContent(actionGroupAlertContent);