Extensions App - App Info Pages (#2293)

* chhore(): some pages * chore(): updates * chore(): updates * chore(): create more pages * chore(). update style * chore(): style updates - license page * chore(): image gallery initial * chore(): update image gallery * chore(): contact page, badge, add new color + icon * chore(): add new colors * chore(): add description page + style updates * chore(): * chore(): styles * chore(): to get different images * chore(): size * chore(): * chore(): color rename + address design review feedback * chore():
AKASHAorg · May 30, 2024 · 1291985 · 1291985
1 parent f253997
commit 1291985
Show file tree

Hide file tree

Showing 27 changed files with 1,480 additions and 68 deletions.
diff --git a/extensions/apps/extensions/src/components/app-routes/index.tsx b/extensions/apps/extensions/src/components/app-routes/index.tsx
@@ -8,6 +8,17 @@ import {
 } from '@tanstack/react-router';
 import { CreateRouter, RouterContext } from '@akashaorg/typings/lib/ui';
 import { ExplorePage, ExtensionsHubPage, InfoPage, InstalledExtensions } from '../pages';
+import {
+  DevInfoPage,
+  CollaboratorsPage,
+  VersionInfoPage,
+  VersionHistoryPage,
+  AuditLogPage,
+  PermissionsPage,
+  LicensePage,
+  ContactSupportPage,
+  AppDescriptionPage,
+} from '../pages/sub-pages';
 import ErrorComponent from './error-component';
 import routes, { EXTENSIONS, INSTALLED, HOME } from '../../routes';
 
@@ -50,12 +61,103 @@ const infoRoute = createRoute({
   },
 });
 
+const devInfoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/developer/$devDid',
+  component: () => {
+    const { devDid } = devInfoRoute.useParams();
+    return <DevInfoPage devDid={devDid} />;
+  },
+});
+
+const collaboratorsInfoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/collaborators',
+  component: () => {
+    const { appId } = infoRoute.useParams();
+    return <CollaboratorsPage appId={appId} />;
+  },
+});
+
+const versionInfoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/versions',
+  component: () => {
+    const { appId } = infoRoute.useParams();
+    return <VersionInfoPage appId={appId} />;
+  },
+});
+
+const versionHistoryRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/version-history',
+  component: () => {
+    const { appId } = versionHistoryRoute.useParams();
+    return <VersionHistoryPage appId={appId} />;
+  },
+});
+
+const auditLogRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/audit-log',
+  component: () => {
+    const { appId } = auditLogRoute.useParams();
+    return <AuditLogPage appId={appId} />;
+  },
+});
+
+const permissionInfoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/permissions',
+  component: () => {
+    const { appId } = permissionInfoRoute.useParams();
+    return <PermissionsPage appId={appId} />;
+  },
+});
+
+const appLicenseInfoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/license',
+  component: () => {
+    const { appId } = appLicenseInfoRoute.useParams();
+    return <LicensePage appId={appId} />;
+  },
+});
+
+const supportInfoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/contact',
+  component: () => {
+    const { appId } = supportInfoRoute.useParams();
+    return <ContactSupportPage appId={appId} />;
+  },
+});
+
+const appDescriptionRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/info/$appId/description',
+  component: () => {
+    const { appId } = appDescriptionRoute.useParams();
+    return <AppDescriptionPage appId={appId} />;
+  },
+});
+
 const routeTree = rootRoute.addChildren([
   defaultRoute,
   exploreRoute,
   extensionsHubRoute,
   installedExtensionsRoute,
   infoRoute,
+  devInfoRoute.addChildren([
+    collaboratorsInfoRoute,
+    versionInfoRoute,
+    versionHistoryRoute,
+    auditLogRoute,
+    permissionInfoRoute,
+    appLicenseInfoRoute,
+    supportInfoRoute,
+    appDescriptionRoute,
+  ]),
 ]);
 
 export const router = ({ baseRouteName, apolloClient }: CreateRouter) =>

diff --git a/extensions/apps/extensions/src/components/pages/info-page.tsx b/extensions/apps/extensions/src/components/pages/info-page.tsx
@@ -1,13 +1,195 @@
 import * as React from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import ErrorLoader from '@akashaorg/design-system-core/lib/components/ErrorLoader';
+import {
+  FlagIcon,
+  ShareIcon,
+} from '@akashaorg/design-system-core/lib/components/Icon/hero-icons-outline';
+import Stack from '@akashaorg/design-system-core/lib/components/Stack';
+import AppInfo from '@akashaorg/design-system-components/lib/components/AppInfo';
 import { useTranslation } from 'react-i18next';
-import Text from '@akashaorg/design-system-core/lib/components/Text';
+import { hasOwn, transformSource, useAkashaStore } from '@akashaorg/ui-awf-hooks';
+import { useGetAppReleaseByIdQuery } from '@akashaorg/ui-awf-hooks/lib/generated/apollo';
+import { Developer } from '@akashaorg/typings/lib/ui';
+
+export const mockProfile: Developer = {
+  avatar: {
+    default: {
+      src: 'https://avatar.iran.liara.run/public',
+      height: 320,
+      width: 320,
+    },
+  },
+  profileId: 'did:pkh:eip155:5:0x36c703c4d2fa2437dc883e2e0884e57404e11234',
+  name: 'Tetrarcha',
+};
+
+const developers = [
+  {
+    profileId: mockProfile.profileId,
+    name: mockProfile.name,
+    avatar: mockProfile.avatar,
+  },
+];
 
 type InfoPageProps = {
   appId: string;
 };
 
-export const InfoPage: React.FC<InfoPageProps> = () => {
+export const InfoPage: React.FC<InfoPageProps> = ({ appId }) => {
+  const navigate = useNavigate();
   const { t } = useTranslation('app-extensions');
+  const {
+    data: { authenticatedDID },
+  } = useAkashaStore();
+  const isLoggedIn = !!authenticatedDID;
+  const { data: appReleaseInfoReq, error } = useGetAppReleaseByIdQuery({
+    variables: { id: appId },
+    skip: !isLoggedIn || true,
+  });
+
+  const appReleaseInfo =
+    appReleaseInfoReq?.node && hasOwn(appReleaseInfoReq?.node, 'applicationID')
+      ? appReleaseInfoReq.node
+      : null;
+
+  /* appReleaseInfo?.application?.contributors?.map(contributor => {
+    const avatarImg = contributor.akashaProfile?.avatar;
+    return {
+      profileId: contributor.akashaProfile.did.id,
+      name: contributor.akashaProfile.name,
+      avatar: avatarImg,
+    };
+  }); */
 
-  return <Text variant="h5">{t('Extension Info')}</Text>;
+  return (
+    <Stack>
+      {error && (
+        <ErrorLoader
+          type="script-error"
+          title={t('There was an error loading the app info')}
+          details={t('We cannot show this app right now')}
+        />
+      )}
+      {true && (
+        <AppInfo
+          integrationName={'Extension Name' /* appReleaseInfo?.application?.displayName */}
+          integrationType="plugin"
+          nsfw={false}
+          packageName={'TBD package name' /* appReleaseInfo?.application?.name */}
+          packageNameTitle={'Package name'}
+          developers={developers}
+          descriptionTitle={t('Description')}
+          readMore={t('Read more')}
+          descriptionBody={
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. /n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+            /* appReleaseInfo?.application?.description */
+          }
+          galleryTitle={t('Gallery')}
+          viewAllGalleryCTA={t('View all')}
+          developersTitle={t('Developer')}
+          permissionTitle={t('Extension Permission')}
+          collaboratorsTitle={t('Collaborators')}
+          generalInfoTitle={t('General Information')}
+          latestReleaseTitle={t('Latest Release')}
+          languageLabel={t('Languages')}
+          languages={['English', 'Spanish']}
+          version={t('Version 2.8.10') /* + ` ${appReleaseInfo?.version}` */}
+          versionInfo={t('Latest release')}
+          versionDate={t('December 2022')}
+          versionDescription={
+            'Only two lines of text will be displayed here then if you go to View info aaaa...' /* appReleaseInfo?.application?.description */
+          }
+          goToVersionInfoPageLabel={t('View info')}
+          documentationTitle={t('Documentation')}
+          documentationLink={'Link 1'}
+          licenseTitle={t('License')}
+          license={'License A' /* appReleaseInfo?.application?.license */}
+          contactSupportTitle={t('Contact Support')}
+          share={{ label: 'Share', icon: <ShareIcon /> }}
+          report={{
+            label: t('Flag'),
+            icon: <FlagIcon />,
+            onClick: () => {
+              /** handle flag */
+            },
+            color: { light: 'errorLight', dark: 'errorDark' },
+          }}
+          onInstall={() => {
+            /*TODO: connect new hooks when they are ready*/
+          }}
+          onUninstall={() => {
+            /*TODO: connect new hooks when they are ready*/
+          }}
+          onSelectDeveloper={() => {
+            navigate({
+              to: '/info/$appId/developer/$devDid',
+              params: {
+                appId,
+                devDid: '1',
+              },
+            });
+          }}
+          onCollaboratorsClick={() => {
+            navigate({
+              to: '/info/$appId/collaborators',
+              params: {
+                appId,
+              },
+            });
+          }}
+          onAppVersionClick={() => {
+            navigate({
+              to: '/info/$appId/versions',
+            });
+          }}
+          onLatestUpdateClick={() => {
+            navigate({
+              to: '/info/$appId/audit-log',
+              params: {
+                appId,
+              },
+            });
+          }}
+          onPermissionInfoClick={() => {
+            navigate({
+              to: '/info/$appId/permissions',
+              params: {
+                appId,
+              },
+            });
+          }}
+          onLicenseClick={() => {
+            navigate({
+              to: '/info/$appId/license',
+              params: {
+                appId,
+              },
+            });
+          }}
+          onContactSupportClick={() => {
+            navigate({
+              to: '/info/$appId/contact',
+              params: {
+                appId,
+              },
+            });
+          }}
+          onAppDescriptionClick={() => {
+            navigate({
+              to: '/info/$appId/description',
+              params: {
+                appId,
+              },
+            });
+          }}
+          status={
+            'not-installed'
+            // isInstalled ? 'installed' : 'not-installed'
+          }
+          transformSource={transformSource}
+        />
+      )}
+    </Stack>
+  );
 };
diff --git a/extensions/apps/extensions/src/components/pages/sub-pages/app-description-page.tsx b/extensions/apps/extensions/src/components/pages/sub-pages/app-description-page.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Text from '@akashaorg/design-system-core/lib/components/Text';
+import Card from '@akashaorg/design-system-core/lib/components/Card';
+import Stack from '@akashaorg/design-system-core/lib/components/Stack';
+import Divider from '@akashaorg/design-system-core/lib/components/Divider';
+import ExtensionHeader from '@akashaorg/design-system-components/lib/components/ExtensionHeader';
+
+type AppDescriptionPageProps = {
+  appId: string;
+};
+
+export const AppDescriptionPage: React.FC<AppDescriptionPageProps> = ({ appId }) => {
+  const { t } = useTranslation('app-extensions');
+  // @TODO get app description from the hook when available
+
+  const mockDescriptionData =
+    'This is a brief description of the extension, highlighting its main features and functionality. Explaining what it does and how it benefits the user in a couple of concise sentences.';
+
+  return (
+    <>
+      <Card padding="p-4">
+        <Stack spacing="gap-y-4">
+          <ExtensionHeader
+            appName={'Extension Name'}
+            packageName="Package name"
+            pageTitle={t('Description')}
+          />
+          <Divider />
+          {!!mockDescriptionData && (
+            <Stack spacing="gap-y-4">
+              <Text variant="body2">
+                {t('{{description}}', { description: mockDescriptionData })}
+              </Text>
+            </Stack>
+          )}
+        </Stack>
+      </Card>
+    </>
+  );
+};