OAuth and Developer Apps QA C-2816 C-2815 C-2794 C-2793 C-2795 C-2797 (…

…#3681)

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

apps/audius-client/packages/common/src/api/developerApps.ts

@@ -4,12 +4,13 @@ import { createApi } from 'audius-query'
 import { ID } from 'models/Identifiers'
 import { encodeHashId } from 'utils/hashIds'
 
-const descriptionMaxLength = 128
+export const DEVELOPER_APP_DESCRIPTION_MAX_LENGTH = 128
+export const DEVELOPER_APP_NAME_MAX_LENGTH = 50
 
 export const developerAppSchema = z.object({
   userId: z.number(),
-  name: z.string(),
-  description: z.string().max(descriptionMaxLength).optional()
+  name: z.string().max(DEVELOPER_APP_NAME_MAX_LENGTH),
+  description: z.string().max(DEVELOPER_APP_DESCRIPTION_MAX_LENGTH).optional()
 })
 
 export type DeveloperApp = {

apps/audius-client/packages/web/src/components/public-site/Footer.tsx

@@ -6,7 +6,7 @@ import {
 } from '@audius/stems'
 import cn from 'classnames'
 
-import horizontalLogo from 'assets/img/publicSite/Horizontal-Logo-Full-Color-Deprecated@2x.png'
+import horizontalLogo from 'assets/img/Horizontal-Logo-Full-Color.png'
 import {
   AUDIUS_HOME_LINK,
   AUDIUS_TWITTER_LINK,

apps/audius-client/packages/web/src/components/public-site/NavBanner.tsx

@@ -8,7 +8,7 @@ import {
 } from '@audius/stems'
 import cn from 'classnames'
 
-import HorizontalLogo from 'assets/img/publicSite/Horizontal-Logo-Full-Color-Deprecated@2x.png'
+import HorizontalLogo from 'assets/img/Horizontal-Logo-Full-Color.png'
 import {
   AUDIUS_LISTENING_LINK,
   AUDIUS_HOT_AND_NEW,

apps/audius-client/packages/web/src/components/public-site/NavOverlay.tsx

@@ -14,8 +14,8 @@ import {
 import cn from 'classnames'
 import ReactDOM from 'react-dom'
 
+import HorizontalLogo from 'assets/img/Horizontal-Logo-Full-Color.png'
 import HeroBackground from 'assets/img/publicSite/Hero-BG@2x.jpg'
-import HorizontalLogo from 'assets/img/publicSite/Horizontal-Logo-Full-Color-Deprecated@2x.png'
 import {
   AUDIUS_BLOG_LINK,
   AUDIUS_DISCORD_LINK,

apps/audius-client/packages/web/src/pages/oauth-login-page/OAuthLoginPage.module.css

@@ -12,7 +12,7 @@
 }
 
 .titleContainer {
-  margin-top: var(--unit-8);
+  margin-top: var(--unit-4);
   text-align: center;
 }
 
@@ -21,6 +21,9 @@
   font-size: var(--font-l);
   font-weight: var(--font-bold);
   line-height: 140%;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .loadingStateContainer {

apps/audius-client/packages/web/src/pages/oauth-login-page/OAuthLoginPage.tsx

@@ -30,7 +30,7 @@ import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 
-import HorizontalLogo from 'assets/img/publicSite/Horizontal-Logo-Full-Color-Deprecated@2x.png'
+import HorizontalLogo from 'assets/img/Horizontal-Logo-Full-Color.png'
 import { make, useRecord } from 'common/store/analytics/actions'
 import Input from 'components/data-entry/Input'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'

apps/audius-client/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/AppDetailsPage.module.css

@@ -51,6 +51,8 @@
   font-size: var(--font-l);
   font-weight: var(--font-bold);
   line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .descriptionLabel {
@@ -66,6 +68,7 @@
   font-size: var(--font-m);
   font-weight: var(--font-medium);
   line-height: 1.3;
+  word-wrap: break-word;
 }
 
 .keyRoot {

apps/audius-client/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.module.css

@@ -14,7 +14,19 @@
   stroke: var(--white);
 }
 
-.footer {
+.actionsContainer {
   display: flex;
   gap: var(--unit-2);
 }
+
+.errorContainer {
+  text-align: center;
+}
+
+.errorText {
+  text-align: center;
+  font-weight: var(--font-bold);
+  color: var(--accent-red);
+  font-size: var(--font-m);
+  line-height: 120%;
+}

apps/audius-client/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/CreateNewAppPage.tsx

@@ -1,11 +1,13 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import {
   Status,
   accountSelectors,
   developerAppSchema,
   useAddDeveloperApp,
-  Name
+  Name,
+  DEVELOPER_APP_DESCRIPTION_MAX_LENGTH,
+  DEVELOPER_APP_NAME_MAX_LENGTH
 } from '@audius/common'
 import { Button, ButtonType } from '@audius/stems'
 import { Form, Formik } from 'formik'
@@ -30,7 +32,8 @@ const messages = {
   descriptionLabel: 'Short Description',
   cancel: 'Cancel',
   create: 'Create Key',
-  creating: 'Creating Key'
+  creating: 'Creating Key',
+  miscError: 'Sorry, something went wrong. Please try again later.'
 }
 
 type CreateNewAppPageProps = CreateAppPageProps
@@ -41,6 +44,7 @@ export const CreateNewAppPage = (props: CreateNewAppPageProps) => {
   const record = useRecord()
 
   const [addDeveloperApp, result] = useAddDeveloperApp()
+  const [submitError, setSubmitError] = useState<string | null>(null)
 
   const { status, data, errorMessage } = result
 
@@ -58,6 +62,7 @@ export const CreateNewAppPage = (props: CreateNewAppPageProps) => {
 
   useEffect(() => {
     if (status === Status.ERROR) {
+      setSubmitError(messages.miscError)
       record(
         make(Name.DEVELOPER_APP_CREATE_ERROR, {
           error: errorMessage
@@ -68,6 +73,7 @@ export const CreateNewAppPage = (props: CreateNewAppPageProps) => {
 
   const handleSubmit = useCallback(
     (values: DeveloperAppValues) => {
+      setSubmitError(null)
       record(
         make(Name.DEVELOPER_APP_CREATE_SUBMIT, {
           name: values.name,
@@ -85,8 +91,7 @@ export const CreateNewAppPage = (props: CreateNewAppPageProps) => {
     description: ''
   }
 
-  const isSubmitting = status !== Status.IDLE
-
+  const isSubmitting = status !== Status.IDLE && status !== Status.ERROR
   return (
     <Formik
       initialValues={initialValues}
@@ -99,15 +104,19 @@ export const CreateNewAppPage = (props: CreateNewAppPageProps) => {
             name='name'
             variant={InputV2Variant.ELEVATED_PLACEHOLDER}
             label={messages.appNameLabel}
+            disabled={isSubmitting}
+            maxLength={DEVELOPER_APP_NAME_MAX_LENGTH}
           />
           <TextAreaField
             name='description'
             placeholder={messages.descriptionLabel}
             showMaxLength
-            maxLength={developerAppSchema.shape.description.unwrap().maxLength!}
+            maxLength={DEVELOPER_APP_DESCRIPTION_MAX_LENGTH}
+            disabled={isSubmitting}
           />
-          <div className={styles.footer}>
+          <div className={styles.actionsContainer}>
             <Button
+              buttonType='button'
               text={messages.cancel}
               fullWidth
               type={ButtonType.COMMON_ALT}
@@ -126,6 +135,11 @@ export const CreateNewAppPage = (props: CreateNewAppPageProps) => {
               disabled={isSubmitting}
             />
           </div>
+          {submitError == null ? null : (
+            <div className={styles.errorContainer}>
+              <span className={styles.errorText}>{messages.miscError}</span>
+            </div>
+          )}
         </Form>
       )}
     </Formik>

apps/audius-client/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/DeveloperAppListItem.module.css

@@ -30,6 +30,8 @@
   font-size: var(--font-m);
   font-weight: var(--font-medium);
   color: var(--neutral);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .listItemActions {

apps/audius-client/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.module.css

@@ -34,6 +34,16 @@
 
 .spinner {
   margin: 0 auto;
-  width: 80px;
-  height: 80px;
+  width: 40px;
+  height: 40px;
+}
+
+.divider {
+  margin: var(--unit-2) 0;
+}
+
+.appList {
+  row-gap: 8px;
+  display: flex;
+  flex-direction: column;
 }

apps/audius-client/packages/web/src/pages/settings-page/components/desktop/DeveloperApps/YourAppsPage.tsx

@@ -69,13 +69,13 @@ export const YourAppsPage = (props: YourAppsPageProps) => {
           <h4 className={styles.appsHeaderText}>{messages.yourAppsTitle}</h4>
           {createAppButton}
         </div>
-        <Divider />
+        <Divider className={styles.divider} />
         {status !== Status.SUCCESS ? (
           <LoadingSpinner className={styles.spinner} />
         ) : data?.apps.length === 0 ? (
           <p className={styles.noApps}>{messages.noApps}</p>
         ) : (
-          <ol>
+          <ol className={styles.appList}>
             {data?.apps.map((app, index) => (
               <DeveloperAppListItem
                 key={app.apiKey}

apps/audius-client/packages/web/src/pages/sign-on/components/mobile/InitialPage.tsx

@@ -13,7 +13,7 @@ import cn from 'classnames'
 import { Spring } from 'react-spring/renderprops'
 
 import djBackgroundImage from 'assets/img/2-DJ-4-3.jpg'
-import audiusLogoHorizontal from 'assets/img/Horizontal-Logo-Full-Color-Deprecated.png'
+import audiusLogoHorizontal from 'assets/img/Horizontal-Logo-Full-Color.png'
 import signupCtaImage from 'assets/img/signUpCTA.png'
 import { RouterContext } from 'components/animated-switch/RouterContextProvider'
 import Input from 'components/data-entry/Input'