Support project documentation with direct Markdown input

client/.eslintrc.json

@@ -93,6 +93,7 @@
           "apiversion",
           "ascii",
           "asciimath",
+          "autoformat",
           "autosave",
           "autosaved",
           "autosaves",
@@ -106,6 +107,7 @@
           "bool",
           "booleans",
           "borderless",
+          "bulleted",
           "calc",
           "cancellable",
           "cancelled",
@@ -257,13 +259,15 @@
           "stdout",
           "stockimages",
           "storages",
+          "strikethrough",
           "swiper",
           "tada",
           "telepresence",
           "textarea",
           "thead",
           "toastify",
           "toggler",
+          "tokenizer",
           "tolerations",
           "toml",
           "tooltip",

client/src/components/form-field/TextAreaInput.tsx

@@ -17,6 +17,7 @@
  */
 
 // TODO: Upgrade to ckeditor5 v6.0.0 to get TS support
+import cx from "classnames";
 import React from "react";
 import { Controller } from "react-hook-form";
 import type {
@@ -42,9 +43,9 @@ function EditMarkdownSwitch(props: EditMarkdownSwitchProps) {
   const outputType = "markdown";
   const switchLabel = outputType === "markdown" ? "Raw Markdown" : "Raw HTML";
   return (
-    <div className="form-check form-switch float-end">
+    <div className={cx("form-check", "form-switch", "float-end")}>
       <Input
-        className="form-check-input rounded-pill"
+        className={cx("form-check-input", "rounded-pill")}
         type="switch"
         id="CKEditorSwitch"
         name="customSwitch"
@@ -107,7 +108,7 @@ interface TextAreaInputProps<T extends FieldValues> {
   error?: FieldError;
   getValue: () => string;
   help?: string | React.ReactNode;
-  label: string;
+  label?: string;
   name: string;
   register: UseFormRegisterReturn;
   required?: boolean;
@@ -119,12 +120,14 @@ function TextAreaInput<T extends FieldValues>(props: TextAreaInputProps<T>) {
   return (
     <div>
       <FormGroup className="field-group">
-        <div className="pb-2">
-          <FormLabel
-            name={props.name}
-            label={props.label}
-            required={props.required ?? false}
-          />
+        <div className={cx("pb-2", props.label == null && "mb-4")}>
+          {props.label && (
+            <FormLabel
+              name={props.name}
+              label={props.label}
+              required={props.required ?? false}
+            />
+          )}
           <EditMarkdownSwitch codeView={codeView} setCodeView={setCodeView} />
         </div>
         <div data-cy={`ckeditor-${props.name}`}>

client/src/components/formlabels/FormLabels.tsx

@@ -57,11 +57,11 @@ interface InputLabelProps extends LabelProps {
 }
 
 const InputLabel = ({ text, isRequired = false }: InputLabelProps) => {
-  return (
+  return text ? (
     <Label>
       {text} <RequiredLabel isRequired={isRequired} />
     </Label>
-  );
+  ) : null;
 };
 
 const LoadingLabel = ({ className, text }: LabelProps) => {

client/src/features/ProjectPageV2/ProjectPageContainer/ProjectPageContainer.tsx

@@ -44,6 +44,7 @@ export default function ProjectPageContainer() {
     useGetNamespacesByNamespaceProjectsAndSlugQuery({
       namespace: namespace ?? "",
       slug: slug ?? "",
+      withDocumentation: true,
     });
 
   const navigate = useNavigate();

client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.module.scss

@@ -0,0 +1,3 @@
+.modalBody {
+  max-height: 75vh;
+}