chore(): UI fixes for edit form

AKASHAorg · Nov 22, 2024 · e840356 · e840356
1 parent 7688eff
commit e840356
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 34 deletions.
diff --git a/...ions/src/components/pages/extension-edit-published-page/edit-published-extension-page.tsx b/...ions/src/components/pages/extension-edit-published-page/edit-published-extension-page.tsx
@@ -1,11 +1,13 @@
 import React, { useContext, useMemo, useRef } from 'react';
 import Card from '@akashaorg/design-system-core/lib/components/Card';
-import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
-import appRoutes, { MY_EXTENSIONS } from '../../../routes';
 import { useTranslation } from 'react-i18next';
 import { transformSource, useRootComponentProps, useSaveImage } from '@akashaorg/ui-awf-hooks';
 import { useGetAppsByIdQuery, useUpdateAppMutation } from '@akashaorg/ui-awf-hooks/lib/generated';
 import Stack from '@akashaorg/design-system-core/lib/components/Stack';
+import Text from '@akashaorg/design-system-core/lib/components/Text';
+import Icon from '@akashaorg/design-system-core/lib/components/Icon';
+import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import ExtensionEditPublishedForm, {
   ExtensionEditPublishedFormValues,
 } from '@akashaorg/design-system-components/lib/components/ExtensionEditPublishedForm';
@@ -17,9 +19,6 @@ import { selectAppData } from '@akashaorg/ui-awf-hooks/lib/selectors/get-apps-by
 import { MAX_GALLERY_IMAGES } from '../../../constants';
 import { AtomContext, formDefaultData } from './main-page';
 import { useAtom } from 'jotai';
-import Text from '@akashaorg/design-system-core/lib/components/Text';
-import Icon from '@akashaorg/design-system-core/lib/components/Icon';
-import { ArrowPathIcon } from '@heroicons/react/24/outline';
 
 type EditPublishedExtensionPageProps = {
   extensionId: string;
@@ -121,12 +120,11 @@ export const EditPublishedExtensionPage: React.FC<EditPublishedExtensionPageProp
 
   const handleClickSubmit = formData => {
     const extData = {
+      logoImage: formData?.logoImage,
       coverImage: formData?.coverImage,
       description: formData?.description,
-      displayName: formData?.displayName,
       gallery: formData?.gallery,
       links: formData?.links,
-      logoImage: formData?.logoImage,
     };
     updateAppMutation({
       variables: {
@@ -173,13 +171,24 @@ export const EditPublishedExtensionPage: React.FC<EditPublishedExtensionPageProp
     showErrorNotification(t("The image wasn't uploaded correctly. Please try again!"));
   };
 
+  if (extensionDataError) {
+    return (
+      <ErrorLoader
+        type="script-error"
+        title={t('Error loading extension data')}
+        details={extensionDataError.message}
+      />
+    );
+  }
+
   if (extensionDataLoading) {
     return (
       <Card>
         <Stack align="center" justify="center" spacing="gap-2" customStyle="h-full md:h-[563px]">
           <Icon
             icon={<ArrowPathIcon />}
             color={{ light: 'secondaryLight', dark: 'secondaryDark' }}
+            size="lg"
           />
           <Text variant="body2" weight="bold">
             {t('Loading edit form')}
@@ -286,7 +295,7 @@ export const EditPublishedExtensionPage: React.FC<EditPublishedExtensionPageProp
         disabled: false,
         handleClick: () => {
           navigate({
-            to: appRoutes[MY_EXTENSIONS],
+            to: '/my-extensions',
           });
         },
       }}

diff --git a/...ensions/src/components/pages/extension-release-manager/extension-release-manager-page.tsx b/...ensions/src/components/pages/extension-release-manager/extension-release-manager-page.tsx
@@ -8,6 +8,7 @@ import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoade
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import InfoCard from '@akashaorg/design-system-core/lib/components/InfoCard';
 import Pill from '@akashaorg/design-system-core/lib/components/Pill';
+import Spinner from '@akashaorg/design-system-core/lib/components/Spinner';
 import DynamicInfiniteScroll from '@akashaorg/design-system-components/lib/components/DynamicInfiniteScroll';
 import { useAkashaStore, useDismissedCard, useRootComponentProps } from '@akashaorg/ui-awf-hooks';
 import { Extension, NotificationEvents, NotificationTypes } from '@akashaorg/typings/lib/ui';
@@ -183,6 +184,26 @@ export const ExtensionReleaseManagerPage: React.FC<ExtensionReleaseManagerPagePr
     publishedAppData ? handlePublishReleaseNav() : setShowModal(true);
   };
 
+  if (appsByIdError) {
+    return (
+      <ErrorLoader
+        type="script-error"
+        title={t('Error loading extension data')}
+        details={appsByIdError.message}
+      />
+    );
+  }
+
+  if (appsReleasesError) {
+    return (
+      <ErrorLoader
+        type="script-error"
+        title={t('Error loading extension data')}
+        details={appsReleasesError.message}
+      />
+    );
+  }
+
   if (!authenticatedDID) {
     return (
       <ErrorLoader
@@ -227,9 +248,16 @@ export const ExtensionReleaseManagerPage: React.FC<ExtensionReleaseManagerPagePr
           {t('Release Manager')}
         </Text>
         <Card padding={8} background={{ light: 'grey9', dark: 'grey2' }}>
-          <Stack customStyle="w-0 min-w-full" padding={0}>
-            <ExtensionElement extensionData={extensionData as Extension} />
-          </Stack>
+          {loadingAppsByIdQuery && (
+            <Stack align="center" justify="center" fullWidth customStyle="h-full">
+              <Spinner />
+            </Stack>
+          )}
+          {!loadingAppsByIdQuery && (
+            <Stack customStyle="w-0 min-w-full" padding={0}>
+              <ExtensionElement extensionData={extensionData as Extension} />
+            </Stack>
+          )}
         </Card>
         <Stack direction="row" justify="between">
           <Text variant="h6" weight="semibold">

diff --git a/libs/design-system-components/src/components/ExtensionEditPublishedForm/index.tsx b/libs/design-system-components/src/components/ExtensionEditPublishedForm/index.tsx
@@ -140,22 +140,24 @@ const ExtensionEditPublishedForm: React.FC<ExtensionEditPublishedFormProps> = pr
   return (
     <form onSubmit={onSave} className={tw(apply`h-full`)}>
       <Stack direction="column" spacing="gap-y-4">
-        <Stack padding="p-4">
+        <Stack padding="pt-4 px-4">
           <Header
             {...header}
             extensionType={displayOnlyValues.applicationType}
             nsfw={displayOnlyValues.nsfw}
+            showExtraInfo={true}
             onLogoImageChange={logoImage => {
               setValue('logoImage', logoImage, { shouldDirty: true });
             }}
             onCoverImageChange={coverImage => {
               setValue('coverImage', coverImage, { shouldDirty: true });
             }}
           />
+        </Stack>
+        <Stack padding="px-4">
           <Divider />
         </Stack>
-
-        <Stack padding="px-4 pb-16" spacing="gap-y-4">
+        <Stack padding="px-4">
           <Accordion
             accordionId={extensionInformationLabel}
             open={showAccordion}
@@ -165,11 +167,11 @@ const ExtensionEditPublishedForm: React.FC<ExtensionEditPublishedFormProps> = pr
               </Text>
             }
             contentNode={
-              <Stack>
+              <Stack spacing="gap-y-4">
                 <Text variant="footnotes2" color={{ light: 'grey4', dark: 'grey6' }}>
                   {extensionInformationDescriptionLabel}
                 </Text>
-                <Stack spacing="gap-y-4" padding={'pt-4'}>
+                <Stack spacing="gap-y-4">
                   <Stack spacing="gap-y-2">
                     <Text variant="h6" weight="bold">
                       {extensionIdLabel}
@@ -195,6 +197,8 @@ const ExtensionEditPublishedForm: React.FC<ExtensionEditPublishedFormProps> = pr
             }
             handleClick={handleToggleAccordion}
           />
+        </Stack>
+        <Stack padding="px-4 pb-16" spacing="gap-y-4">
           <Divider />
           <Controller
             control={control}
@@ -240,9 +244,7 @@ const ExtensionEditPublishedForm: React.FC<ExtensionEditPublishedFormProps> = pr
             }}
           />
         </Stack>
-
         <Divider />
-
         <Stack direction="row" justify="end" spacing="gap-x-2" customStyle="px-4 pb-4">
           <Button
             variant="text"

diff --git a/libs/design-system-components/src/components/ExtensionEditStep1Form/Header/index.tsx b/libs/design-system-components/src/components/ExtensionEditStep1Form/Header/index.tsx
@@ -307,24 +307,35 @@ export const Header: React.FC<HeaderProps> = ({
             onClick={() => setShowLogoGuidelineModal(true)}
           />
         </Stack>
-      </Stack>
-      {showExtraInfo && (
-        <Stack direction="row" spacing="gap-2" justify="end" align="center">
-          <Pill
-            type="info"
-            label={capitalize(extensionType?.toLowerCase())}
-            icon={<ExtensionIcon type={extensionType} />}
-          />
-          {nsfw && (
+        {showExtraInfo && (
+          <Stack
+            direction="row"
+            spacing="gap-2"
+            justify="end"
+            align="center"
+            customStyle="absolute right-0 -bottom-8"
+          >
             <Pill
               type="info"
-              label={'NSFW'}
-              background={{ light: 'errorFade', dark: 'errorDark' }}
-              color={{ light: 'errorDark', dark: 'white' }}
+              label={capitalize(extensionType?.toLowerCase())}
+              icon={<ExtensionIcon size={'sm'} type={extensionType} />}
+              background={{ light: 'tertiaryLight', dark: 'tertiaryDark' }}
+              color={{ light: 'secondaryLight', dark: 'secondaryDark' }}
+              customStyle="py-0.5"
             />
-          )}
-        </Stack>
-      )}
+            {nsfw && (
+              <Pill
+                type="info"
+                label={'NSFW'}
+                background={{ light: 'errorFade', dark: 'errorDark' }}
+                color={{ light: 'errorDark', dark: 'white' }}
+                customStyle="py-0.5"
+              />
+            )}
+          </Stack>
+        )}
+      </Stack>
+
       <ImageModal
         show={showEditImage}
         title={appImageType === 'logo-image' ? imageTitle.logoImage : imageTitle.coverImage}

diff --git a/libs/design-system-core/src/components/Pill/index.tsx b/libs/design-system-core/src/components/Pill/index.tsx
@@ -70,10 +70,12 @@ const Pill: React.FC<PillProps> = props => {
       <Stack
         align="center"
         justify="center"
+        direction="row"
+        spacing="gap-x-1"
         background={background}
         customStyle={`min-h-min min-w-min rounded-full py-1 px-2 ${borderStyle} ${customStyle}`}
       >
-        {icon && icon}
+        {icon}
         <Text
           variant="footnotes2"
           selectable={false}