TG-510: nexus-add-tags-text-input-in-an-advanced-mode-sections-on-each-app

src/app/blender/page.tsx

@@ -13,6 +13,7 @@ import { useContext, useState } from 'react';
 import SendButton from '@components/buttons/SendButton';
 import type { CreditSubformData } from '@components/forms/CreditSubform';
 import CreditSubform from '@components/forms/CreditSubform';
+import LabelSubform from '@components/forms/LabelSubform';
 import NumberField from '@components/forms/fields/NumberField';
 import NumberSlider from '@components/forms/fields/SliderField';
 import BlenderForm from '@components/forms/workloads/BlenderForm';
@@ -51,6 +52,12 @@ const schema = (maxAmount: bigint, minAmount: bigint, ignoreBalance: boolean) =>
         (value) => BigInt(value) > minAmount,
       ),
     type: y.mixed<WorkloadType>().oneOf([WorkloadType.BLENDER]),
+    labels: y.array().of(
+      y.object().shape({
+        key: y.string().required(),
+        value: y.string().required(),
+      }),
+    ),
     details: y.object().shape({
       version: y.string().required(),
       outputFormat: y.mixed<BlenderOutputFormat>().oneOf(Object.values(BlenderOutputFormat)).required(),
@@ -72,6 +79,7 @@ export default function BlenderPage() {
     defaultValues: {
       type: WorkloadType.BLENDER,
       credit: formatWei(1200n).toString(),
+      labels: [],
       details: {
         version: BlenderVersion.v341,
         outputFormat: BlenderOutputFormat.PNG,
@@ -157,6 +165,7 @@ export default function BlenderPage() {
                       defaultValue={4096}
                     />
                   </Grid>
+                  <LabelSubform />
                 </>
               )}
             </Grid>

src/app/sandbox/page.tsx

@@ -17,6 +17,7 @@ import { useContext, useState } from 'react';
 import SendButton from '@components/buttons/SendButton';
 import type { CreditSubformData } from '@components/forms/CreditSubform';
 import CreditSubform from '@components/forms/CreditSubform';
+import LabelSubform from '@components/forms/LabelSubform';
 import CustomLink from '@components/routing/Link';
 import Card from '@components/ui/containers/Card/Card';
 import WorkflowEditor from '@components/ui/containers/WorkflowEditor/WorkflowEditor';
@@ -52,11 +53,25 @@ const schema = (maxAmount: bigint, minAmount: bigint, ignoreBalance: boolean) =>
         (value) => BigInt(value) > minAmount,
       ),
     type: y.mixed<WorkloadType>().oneOf(Object.values(WorkloadType)).required(),
+    labels: y.array().of(
+      y.object().shape({
+        key: y.string().required(),
+        value: y.string().required(),
+      }),
+    ),
   });
 };
 
-function isJson(content: Content): content is { json: Job } {
-  return (content as { json: Job }).json !== undefined;
+function isJson(content: Content): content is {
+  json: Job;
+} {
+  return (
+    (
+      content as {
+        json: Job;
+      }
+    ).json !== undefined
+  );
 }
 
 const SandboxPage: NextPage = () => {
@@ -66,6 +81,7 @@ const SandboxPage: NextPage = () => {
   const searchParams = useSearchParams();
   const workflowId = searchParams.get('workflowId');
   const [content, setContent] = useState<Content>({ text: '' });
+  const [simpleMode, setSimpleMode] = useState<boolean>(true);
 
   const { data } = useGetWorkflowQuery({
     variables: { workflowId: workflowId! },
@@ -87,6 +103,7 @@ const SandboxPage: NextPage = () => {
     defaultValues: {
       type: WorkloadType.SANDBOX,
       credit: formatWei(5000n).toString(),
+      labels: [],
       jobName: `${WorkloadType.SANDBOX} - ${randomWords({ exactly: 3, maxLength: 4 })?.join(' ') ?? ''}`,
     },
     resolver: yupResolver(schema(balance_wCredit, minAmount ?? 0n, isWeb2(authMethod))),
@@ -127,15 +144,31 @@ const SandboxPage: NextPage = () => {
                 .
               </p>
             </div>
+            <WorkflowEditor
+              cacheKey={workflowId ? `sandbox-${workflowId}` : 'sandbox'}
+              defaultContent={data?.getWorkflow ? data.getWorkflow.content : JSON.stringify(defaultJob)}
+              onContentChange={(newContent, contentErrors) => {
+                setContent(newContent);
+                if (contentErrors) setJsonErrors(contentErrors);
+              }}
+            />
+            {simpleMode && (
+              <div className="mt-4 text-primary font-bold hover:cursor-pointer" onClick={() => setSimpleMode(false)}>
+                Show Advanced Mode
+              </div>
+            )}
+            {!simpleMode && (
+              <div className="mt-4">
+                <LabelSubform />
+                <div
+                  className="mt-4 text-primary font-bold hover:cursor-pointer col-start-1"
+                  onClick={() => setSimpleMode(true)}
+                >
+                  Hide Advanced Mode
+                </div>
+              </div>
+            )}
           </Card>
-          <WorkflowEditor
-            cacheKey={workflowId ? `sandbox-${workflowId}` : 'sandbox'}
-            defaultContent={data?.getWorkflow ? data.getWorkflow.content : JSON.stringify(defaultJob)}
-            onContentChange={(newContent, contentErrors) => {
-              setContent(newContent);
-              if (contentErrors) setJsonErrors(contentErrors);
-            }}
-          />
 
           <CreditSubform
             defaultDuration={20}
@@ -156,23 +189,6 @@ const SandboxPage: NextPage = () => {
             }
           />
           <SendButton>Submit</SendButton>
-          {/*{(!data ||*/}
-          {/*  (isWeb2(authMethod) && data?.getWorkflow?.userId === authMethod.sub) ||*/}
-          {/*  (isWeb3(authMethod) && data?.getWorkflow?.userId === authMethod.sub)) && (*/}
-          {/*  <LoadingButton*/}
-          {/*    loading={loading && saveLoading}*/}
-          {/*    onClick={async () => {*/}
-          {/*      await save({*/}
-          {/*        variables: {*/}
-          {/*          content: isJson(store.content) ? JSON.stringify(store.content.json) : store.content.text,*/}
-          {/*          workflowId,*/}
-          {/*        },*/}
-          {/*      });*/}
-          {/*    }}*/}
-          {/*  >*/}
-          {/*    Save*/}
-          {/*  </LoadingButton>*/}
-          {/*)}*/}
         </div>
       </form>
     </FormProvider>

src/app/texttoimage/page.tsx

@@ -47,6 +47,12 @@ const schema = (maxAmount: bigint, minAmount: bigint, ignoreBalance: boolean) =>
         (value) => BigInt(value) > minAmount,
       ),
     type: y.mixed<WorkloadType>().oneOf([WorkloadType.TEXTTOIMAGE]),
+    labels: y.array().of(
+      y.object().shape({
+        key: y.string().required(),
+        value: y.string().required(),
+      }),
+    ),
     details: y.object().shape({
       tti: y.string().required('Oops! Looks like you forgot to write a prompt before submitting your request.'),
     }),
@@ -62,6 +68,7 @@ const TextToImagePage: NextPage = () => {
     defaultValues: {
       type: WorkloadType.TEXTTOIMAGE,
       credit: formatWei(1000n).toString(),
+      labels: [],
       jobName: `${WorkloadType.TEXTTOIMAGE} - ${randomWords({ exactly: 3, maxLength: 4 })?.join(' ') ?? ''}`,
       details: {
         nTasks: 4,

src/app/unity/page.tsx

@@ -48,6 +48,12 @@ const schema = (maxAmount: bigint, minAmount: bigint, ignoreBalance: boolean) =>
         (value) => BigInt(value) > minAmount,
       ),
     type: y.mixed<WorkloadType>().oneOf([WorkloadType.URS]),
+    labels: y.array().of(
+      y.object().shape({
+        key: y.string().required(),
+        value: y.string().required(),
+      }),
+    ),
     details: y.object().shape({
       archiveLink: y.string().required(),
       binaryPath: y.string().required(),
@@ -72,6 +78,7 @@ const UnityPage: NextPage = () => {
     defaultValues: {
       type: WorkloadType.URS,
       credit: formatWei(275n).toString(),
+      labels: [],
       jobName: `${WorkloadType.URS} - ${randomWords({ exactly: 3, maxLength: 4 })?.join(' ') ?? ''}`,
       details: {
         nTasks: 1,

src/app/upscaling/page.tsx

@@ -47,6 +47,12 @@ const schema = (maxAmount: bigint, minAmount: bigint, ignoreBalance: boolean) =>
         (value) => BigInt(value) > minAmount,
       ),
     type: y.mixed<WorkloadType>().oneOf([WorkloadType.UPSCALING]),
+    labels: y.array().of(
+      y.object().shape({
+        key: y.string().required(),
+        value: y.string().required(),
+      }),
+    ),
     details: y.object().shape({
       isAnime: y.boolean().required(),
       isVideo: y.boolean().required(),
@@ -66,6 +72,7 @@ const NewPage: NextPage = () => {
       type: WorkloadType.UPSCALING,
       jobName: `${WorkloadType.UPSCALING} - ${randomWords({ exactly: 3, maxLength: 4 })?.join(' ') ?? ''}`,
       credit: formatWei(4000n).toString(),
+      labels: [],
       details: {
         nTasks: 1,
         gpuPerTask: 1,

src/components/forms/LabelSubform.tsx

@@ -0,0 +1,86 @@
+// Copyright 2023 Deepsquare Association
+// This file is part of Foobar.
+// Foobar is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+// Foobar is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License along with Foobar. If not, see <https://www.gnu.org/licenses/>.
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useState } from 'react';
+import TextField from '@components/forms/fields/TextField';
+import type { WorkloadFormData } from '@lib/types/WorkloadFormData';
+import { AddCircle, RemoveCircle } from '@mui/icons-material';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import MuiTextField from '@mui/material/TextField';
+
+const LabelSubform = () => {
+  const { control, register } = useFormContext<WorkloadFormData>();
+  const { fields, append, remove } = useFieldArray({ control, name: 'labels' });
+  const [extraKey, setExtraKey] = useState<string>('');
+  const [extraValue, setExtraValue] = useState<string>('');
+
+  return (
+    <Grid item xs={2}>
+      <div className="flex flex-col">
+        <h2 className="m-0 font-medium">Labels</h2>
+
+        <div className="flex flex-col">
+          {fields.map((field, index) => {
+            return (
+              <div key={`labels.${index}`} className="flex">
+                <TextField
+                  className="mr-5"
+                  control={control}
+                  disabled
+                  label="Key"
+                  {...register(`labels.${index}.key`)}
+                />
+                <TextField
+                  className="mr-4"
+                  control={control}
+                  disabled
+                  label="Value"
+                  {...register(`labels.${index}.value`)}
+                />
+                <IconButton
+                  onClick={() => {
+                    remove(index);
+                  }}
+                >
+                  <RemoveCircle />
+                </IconButton>
+              </div>
+            );
+          })}
+        </div>
+        <div key="add-vars" className="flex">
+          <MuiTextField
+            className="mr-5"
+            name="key"
+            placeholder="Key"
+            value={extraKey}
+            onChange={(event) => setExtraKey(event.target.value)}
+          />
+          <MuiTextField
+            className="mr-4"
+            name="value"
+            placeholder="Value"
+            value={extraValue}
+            onChange={(event) => setExtraValue(event.target.value)}
+          />
+          <IconButton
+            onClick={() => {
+              if (extraKey === '' || extraValue === '') return;
+              append({ key: extraKey, value: extraValue });
+              setExtraKey('');
+              setExtraValue('');
+            }}
+          >
+            <AddCircle />
+          </IconButton>
+        </div>
+      </div>
+    </Grid>
+  );
+};
+
+export default LabelSubform;

src/components/forms/workloads/TextToImageForm.tsx

@@ -5,6 +5,7 @@
 // You should have received a copy of the GNU General Public License along with Nexus. If not, see <https://www.gnu.org/licenses/>.
 import { Controller, useFormContext } from 'react-hook-form';
 import { useState } from 'react';
+import LabelSubform from '@components/forms/LabelSubform';
 import StorageSubform from '@components/forms/StorageSubform';
 import SelectorField from '@components/forms/fields/SelectorField';
 import TextField from '@components/forms/fields/TextField';
@@ -90,6 +91,7 @@ function TextToImageForm() {
                 />
               </div>
             </Grid>
+            <LabelSubform />
             <Grid className="pt-4" item xs={2}>
               <div
                 className="mt-4 text-primary font-bold hover:cursor-pointer col-start-1"

src/components/forms/workloads/URSForm.tsx

@@ -4,12 +4,15 @@
 // Nexus is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with Nexus. If not, see <https://www.gnu.org/licenses/>.
 import { useFormContext } from 'react-hook-form';
+import { useState } from 'react';
+import LabelSubform from '@components/forms/LabelSubform';
 import TextField from '@components/forms/fields/TextField';
 import type { WorkloadFormData } from '@lib/types/WorkloadFormData';
 import Grid from '@mui/material/Grid';
 
 function URSForm() {
   const { control } = useFormContext<WorkloadFormData>();
+  const [simpleMode, setSimpleMode] = useState<boolean>(true);
 
   return (
     <>
@@ -27,6 +30,26 @@ function URSForm() {
           <TextField name="details.additionalArgs" multiline minRows={3} control={control} />
         </Grid>
       </Grid>
+      {simpleMode && (
+        <Grid className="pt-4" item xs={2}>
+          <div className="mt-4 text-primary font-bold hover:cursor-pointer" onClick={() => setSimpleMode(false)}>
+            Show Advanced Mode
+          </div>
+        </Grid>
+      )}
+      {!simpleMode && (
+        <>
+          <LabelSubform />
+          <Grid className="pt-4" item xs={2}>
+            <div
+              className="mt-4 text-primary font-bold hover:cursor-pointer col-start-1"
+              onClick={() => setSimpleMode(true)}
+            >
+              Hide Advanced Mode
+            </div>
+          </Grid>
+        </>
+      )}
     </>
   );
 }