Get Upload page ready for Mythic to finish

Author: Oksamies

packages/cyberstorm-forms/src/forms/UploadPackageForm.module.css

@@ -13,3 +13,30 @@
   flex-direction: row;
   gap: var(--gap--16);
 }
+
+.submit > :last-child {
+  flex-grow: 1;
+}
+
+.teamContentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--12);
+}
+
+.createTeamModalLink {
+  color: #39e9aa;
+  font-weight: var(--font-weight-medium);
+  background: transparent;
+}
+
+.createTeamSentence {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space--8);
+  color: var(--text-tertiary, #9c9cc4);
+  font-weight: var(--font-weight-semibold);
+
+  font-size: 0.875rem;
+  line-height: 1.7;
+}

packages/cyberstorm-forms/src/forms/UploadPackageForm.tsx

@@ -47,28 +47,26 @@ export function UploadPackageForm(props: UploadPackageFormProps) {
     successMessage: "Package submitted",
   });
 
-  // Parse categories to the right format for form
-  function communityCategoriesParse(
+  // Parse communities to the right format for form
+  function communitiesParse(
     selected: {
       label: string;
       value: string;
-    }[],
-    onChange: (selected: { [key: string]: string[] }) => void
+    }[]
   ) {
-    const communityCategories: { [key: string]: string[] } = {};
-    selected.map((x) => (communityCategories[x.value] = [x.value]));
-    onChange(communityCategories);
+    return selected.map((x) => x.value);
   }
 
-  // Parse communities to the right format for form
-  function communitiesParse(
+  // Parse categories to the right format for form
+  function communityCategoriesParse(
     selected: {
       label: string;
       value: string;
-    }[],
-    onChange: (selected: string[]) => void
+    }[]
   ) {
-    onChange(selected.map((x) => x.value));
+    const communityCategories: { [key: string]: string[] } = {};
+    selected.map((x) => (communityCategories[x.value] = [x.value]));
+    return communityCategories;
   }
 
   return (
@@ -87,41 +85,41 @@ export function UploadPackageForm(props: UploadPackageFormProps) {
         <div className={styles.line} />
         <SettingItem
           title="Team"
-          description="No teams available?"
-          additionalLeftColumnContent={
-            <Dialog.Root
-              title="Create Team"
-              trigger={
-                <Button.Root colorScheme="primary" paddingSize="large">
-                  <Button.ButtonLabel>Create team</Button.ButtonLabel>
-                  <Button.ButtonIcon>
-                    <FontAwesomeIcon icon={faPlus} />
-                  </Button.ButtonIcon>
-                </Button.Root>
-              }
-            >
-              <CreateTeamForm />
-            </Dialog.Root>
-          }
+          description="Select the team you want your package to be associated with."
           content={
-            <FormSelectSearch
-              name="team"
-              schema={uploadPackageFormSchema}
-              options={props.teams.map((t) => t.name)}
-              placeholder="Choose a team..."
-            />
+            <div className={styles.teamContentWrapper}>
+              <FormSelectSearch
+                name="team"
+                schema={uploadPackageFormSchema}
+                options={props.teams.map((t) => t.name)}
+                placeholder="Choose a team..."
+              />
+              <div className={styles.createTeamSentence}>
+                <span>No teams available?</span>
+                <Dialog.Root
+                  title="Create Team"
+                  trigger={
+                    <button className={styles.createTeamModalLink}>
+                      Create Team
+                    </button>
+                  }
+                >
+                  <CreateTeamForm />
+                </Dialog.Root>
+              </div>
+            </div>
           }
         />
         <SettingItem
           title="Communities"
-          description="Select communities you want your package to be listed under. Current community is selected by default."
+          description="Select communities you want your package to be listed under."
           content={
             <FormMultiSelectSearch
               name="communities"
               schema={uploadPackageFormSchema}
               options={options}
               placeholder="Choose community..."
-              onChangeParse={communitiesParse}
+              fieldFormFormatParser={communitiesParse}
             />
           }
         />
@@ -134,7 +132,7 @@ export function UploadPackageForm(props: UploadPackageFormProps) {
               schema={uploadPackageFormSchema}
               options={options}
               placeholder="Choose categories..."
-              onChangeParse={communityCategoriesParse}
+              fieldFormFormatParser={communityCategoriesParse}
             />
           }
         />

packages/thunderstore-api/src/fetch/packageUpload.ts

@@ -7,7 +7,7 @@ export type PackageUploadApiArgs = {
   team: string;
   community_categories: { [key: string]: string[] };
   communities: string[];
-  has_nsfw_content: boolean;
+  has_nsfw_content?: boolean;
 };
 
 export function packageUpload(
@@ -17,12 +17,18 @@ export function packageUpload(
   const path = "api/experimental/submission/submit/";
 
   // TODO: Add these datas in form
-  const todoData = { ...data, upload_uuid: "123", author_name: "root" };
+  const todoData = {
+    ...data,
+    upload_uuid: "123",
+    author_name: "root",
+  };
 
   return apiFetch2({
     config,
     path,
-    method: "POST",
-    body: JSON.stringify(todoData),
+    request: {
+      method: "POST",
+      body: JSON.stringify(todoData),
+    },
   });
 }

packages/ts-api-react-forms/src/schema.ts

@@ -13,5 +13,5 @@ export const uploadPackageFormSchema = z.object({
   team: z.string(),
   community_categories: z.record(z.array(z.string())),
   communities: z.array(z.string()).nonempty(),
-  has_nsfw_content: z.boolean(),
+  has_nsfw_content: z.boolean().default(false),
 });