[C-2926] Implement selected values for upload contextual menu fields (#…

…3848)
AudiusProject · Aug 10, 2023 · 4c0b25f · 4c0b25f
1 parent 5773578
commit 4c0b25f
Show file tree

Hide file tree

Showing 32 changed files with 636 additions and 561 deletions.
diff --git a/packages/web/src/components/Icon/Icon.tsx b/packages/web/src/components/Icon/Icon.tsx
@@ -42,7 +42,7 @@ export const Icon = (props: IconProps) => {
   const style = color
     ? {
         ...styleProp,
-        '--icon-color': toCSSVariableName(color)
+        '--icon-color': `var(${toCSSVariableName(color)})`
       }
     : styleProp
 

diff --git a/packages/web/src/components/data-entry/ContextualMenu.module.css b/packages/web/src/components/data-entry/ContextualMenu.module.css
@@ -1,5 +1,5 @@
 .root {
-  gap: var(--unit-2);
+  gap: var(--unit-4);
   padding: var(--unit-4) var(--unit-6);
   flex-direction: column;
 }
@@ -28,6 +28,7 @@
 .value {
   display: inline-flex;
   flex-shrink: 1;
+  gap: var(--unit-2);
 }
 
 .selectedValue {

diff --git a/packages/web/src/components/data-entry/ContextualMenu.tsx b/packages/web/src/components/data-entry/ContextualMenu.tsx
@@ -54,16 +54,18 @@ const MenuForm = (props: MenuFormProps) => {
       <ModalHeader>
         <ModalTitle title={label} icon={icon} />
       </ModalHeader>
-      <Form>
-        <ModalContent>{menuFields}</ModalContent>
-        <ModalFooter>
-          <Button
-            type={ButtonType.PRIMARY}
-            text={messages.save}
-            buttonType='submit'
-          />
-        </ModalFooter>
-      </Form>
+      <ModalContent>
+        <Form>
+          {menuFields}
+          <ModalFooter>
+            <Button
+              type={ButtonType.PRIMARY}
+              text={messages.save}
+              buttonType='submit'
+            />
+          </ModalFooter>
+        </Form>
+      </ModalContent>
     </Modal>
   )
 }
@@ -89,58 +91,41 @@ export const SelectedValue = (props: SelectedValueProps) => {
   )
 }
 
-type ContextualMenuProps<Value, FormValues extends FormikValues> = {
+type SelectedValuesProps = {
+  children: ReactNode
+}
+
+export const SelectedValues = (props: SelectedValuesProps) => {
+  const { children } = props
+  return <span className={styles.value}>{children}</span>
+}
+
+type ContextualMenuProps<FormValues extends FormikValues> = {
   label: string
   description: string
   icon: ReactElement
-  renderValue?: (value: Value) => JSX.Element | null
+  renderValue: () => JSX.Element | null
   menuFields: ReactNode
-  value: Value
   error?: boolean
   errorMessage?: string
 } & FormikConfig<FormValues>
 
-export const ContextualMenu = <
-  Value,
-  FormValues extends FormikValues = FormikValues
->(
-  props: ContextualMenuProps<Value, FormValues>
+export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
+  props: ContextualMenuProps<FormValues>
 ) => {
   const {
     label,
     description,
     icon,
     menuFields,
-    renderValue: renderValueProp,
+    renderValue,
     onSubmit,
-    value,
     error,
     errorMessage,
     ...formikProps
   } = props
   const [isMenuOpen, toggleMenu] = useToggle(false)
 
-  const defaultRenderValue = useCallback((value: Value) => {
-    const values =
-      typeof value === 'string' && value
-        ? [value]
-        : Array.isArray(value) && value.length !== 0
-        ? value
-        : false
-
-    if (!values) return null
-
-    return (
-      <div className={styles.value}>
-        {values?.map((value) => (
-          <SelectedValue key={value} label={value} />
-        ))}
-      </div>
-    )
-  }, [])
-
-  const renderValue = renderValueProp ?? defaultRenderValue
-
   const preview = (
     <Tile onClick={toggleMenu} className={styles.root} elevation='flat'>
       <div className={styles.header}>
@@ -151,12 +136,12 @@ export const ContextualMenu = <
             </Text>
           </div>
           <div>
-            <Icon icon={IconCaretRight} />
+            <Icon icon={IconCaretRight} color='neutralLight4' />
           </div>
         </div>
         <Text>{description}</Text>
       </div>
-      {renderValue(value)}
+      {renderValue()}
       {error ? <HelperText error>{errorMessage}</HelperText> : null}
     </Tile>
   )

diff --git a/packages/web/src/components/form-fields/TextField.tsx b/packages/web/src/components/form-fields/TextField.tsx
@@ -1,6 +1,10 @@
 import { useField } from 'formik'
 
-import { InputV2, InputV2Props } from 'components/data-entry/InputV2'
+import {
+  InputV2,
+  InputV2Props,
+  InputV2Variant
+} from 'components/data-entry/InputV2'
 
 type TextFieldProps = InputV2Props & {
   name: string
@@ -14,6 +18,7 @@ export const TextField = (props: TextFieldProps) => {
 
   return (
     <InputV2
+      variant={InputV2Variant.ELEVATED_PLACEHOLDER}
       {...field}
       error={hasError}
       helperText={hasError ? error : undefined}

diff --git a/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.tsx b/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.tsx
@@ -15,7 +15,6 @@ import { z } from 'zod'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import { make, useRecord } from 'common/store/analytics/actions'
-import { InputV2Variant } from 'components/data-entry/InputV2'
 import { TextAreaField, TextField } from 'components/form-fields'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { useSelector } from 'utils/reducer'
@@ -101,7 +100,6 @@ export const CreateNewAppPage = (props: CreateNewAppPageProps) => {
         <Form className={styles.content}>
           <TextField
             name='name'
-            variant={InputV2Variant.ELEVATED_PLACEHOLDER}
             label={messages.appNameLabel}
             disabled={isSubmitting}
             maxLength={DEVELOPER_APP_NAME_MAX_LENGTH}

diff --git a/packages/web/src/pages/upload-page/components/EditPageNew.module.css b/packages/web/src/pages/upload-page/components/EditPageNew.module.css
@@ -12,6 +12,12 @@
   padding: var(--unit-4);
 }
 
+.advancedOptions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--unit-2);
+}
+
 .continue {
   margin-top: var(--unit-6);
   text-align: right;

diff --git a/packages/web/src/pages/upload-page/components/EditPageNew.tsx b/packages/web/src/pages/upload-page/components/EditPageNew.tsx
@@ -25,13 +25,17 @@ import layoutStyles from 'components/layout/layout.module.css'
 import { Text } from 'components/typography'
 import PreviewButton from 'components/upload/PreviewButton'
 
+import { AccessAndSaleField } from '../fields/AccessAndSaleField'
+import { AttributionField } from '../fields/AttributionField'
 import { MultiTrackSidebar } from '../fields/MultiTrackSidebar'
+import { ReleaseDateField } from '../fields/ReleaseDateField'
+import { RemixSettingsField } from '../fields/RemixSettingsField'
+import { SourceFilesField } from '../fields/SourceFilesField'
 import { TrackMetadataFields } from '../fields/TrackMetadataFields'
 import { defaultHiddenFields } from '../fields/availability/HiddenAvailabilityFields'
-import { TrackEditFormValues } from '../forms/types'
+import { TrackEditFormValues } from '../types'
 
 import styles from './EditPageNew.module.css'
-import { TrackModalArray } from './TrackModalArray'
 import { TrackForUpload } from './types'
 
 const messages = {
@@ -172,7 +176,8 @@ export const EditPageNew = (props: EditPageProps) => {
           allowAttribution: null,
           commercialUse: null,
           derivativeWorks: null
-        }
+        },
+        stems: []
       }))
     }),
     [tracks]
@@ -212,8 +217,14 @@ const TrackEditForm = (props: FormikProps<TrackEditFormValues>) => {
         <div className={styles.formContainer}>
           {isMultiTrack ? <MultiTrackHeader /> : null}
           <div className={styles.trackEditForm}>
-            <TrackMetadataFields playing={false} />
-            <TrackModalArray />
+            <TrackMetadataFields />
+            <div className={styles.additionalFields}>
+              <ReleaseDateField />
+              <RemixSettingsField />
+              <SourceFilesField />
+              <AccessAndSaleField />
+              <AttributionField />
+            </div>
             <PreviewButton playing={false} onClick={() => {}} />
           </div>
           {isMultiTrack ? <MultiTrackFooter /> : null}

diff --git a/packages/web/src/pages/upload-page/components/TrackModalArray.module.css b/packages/web/src/pages/upload-page/components/TrackModalArray.module.css
diff --git a/packages/web/src/pages/upload-page/components/TrackModalArray.tsx b/packages/web/src/pages/upload-page/components/TrackModalArray.tsx
diff --git a/...age/forms/SourceFilesModalForm.module.css → ...page/fields/AccessAndSaleField.module.css b/...age/forms/SourceFilesModalForm.module.css → ...page/fields/AccessAndSaleField.module.css
@@ -9,24 +9,37 @@
   line-height: 20px;
 }
 
+.preview {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--unit-2);
+}
+
 .titleIcon {
   height: 22px;
   width: 22px;
 }
 
-.preview {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+.isRemix {
+  margin-bottom: var(--unit-6);
+}
+
+.value {
+  display: inline-flex;
+  flex-shrink: 1;
   gap: var(--unit-2);
 }
 
-.fields {
+.nftOwner {
   display: flex;
   flex-direction: column;
-  gap: var(--unit-6);
+  gap: var(--unit-2);
 }
 
-.fields :global(.ant-divider) {
-  margin: 0;
+.nftArtwork {
+  height: 20px;
+  width: 20px;
+  border: 1px solid var(--neutral-light-9);
+  border-radius: 2px;
 }