Start update directory entry

source/SIL.AppBuilder.Portal.Frontend/src/data/containers/resources/project/public.tsx

@@ -9,13 +9,7 @@ export function withPublicProject<T>(idGetter: (props: T) => string) {
         const id = idGetter(props);
 
         const options = buildOptions({
-          include: [
-            'organization.owner',
-            'group',
-            'owner',
-            'products.product-definition.type',
-            'products.product-builds.product-artifacts',
-          ],
+          include: ['organization.owner', 'group', 'owner', 'products.product-definition.type'],
           fields: {
             // owner: 'name,email',
           },

source/SIL.AppBuilder.Portal.Frontend/src/translations/locales/en-us.json

@@ -154,6 +154,9 @@
     },
     "files": {
       "title": "Product Files"
+    },
+    "deleteUserAccount": {
+      "title": "Delete User Account"
     }
   },
   "profile": {

source/SIL.AppBuilder.Portal.Frontend/src/ui/routes/paths.ts

@@ -13,3 +13,4 @@ export const requestOrgAccessSuccessPath = '/request-access-for-organization/suc
 export const requestOrgAccessPath = '/request-access-for-organization';
 export const downloadsPath = '/downloads';
 export const productsPath = '/products';
+export const userAccountDeletePath = '/user-account-delete';

source/SIL.AppBuilder.Portal.Frontend/src/ui/routes/project-directory/show/details/products.tsx

@@ -1,40 +1,83 @@
 import * as React from 'react';
-import { compose } from 'recompose';
-import { withData as withOrbit } from 'react-orbitjs';
+import { useOrbit } from 'react-orbitjs';
+import { compareVia, isEmpty } from '@lib/collection';
 
-import { ProjectResource, ProductResource } from '@data';
+import { useTranslations } from '@lib/i18n';
+
+import { ProjectResource, ProductResource, attributesFor } from '@data';
 
 import { withTranslations, i18nProps } from '@lib/i18n';
 import ProductArtifact from '@ui/components/product-artifact';
 
 interface IOwnProps {
   project: ProjectResource;
-  products: ProductResource[];
 }
 
 type IProps = IOwnProps & i18nProps;
 
-class Products extends React.Component {
-  render() {
-    const { products } = this.props;
+export default function Products({ project }: IProps) {
+  const { t } = useTranslations();
+  const { dataStore } = useOrbit();
 
-    return (
-      <div data-test-products>
-        {products.map((product, i) => {
-          return <ProductArtifact key={product.id} product={product} />;
-        })}
+  const products = dataStore.cache.query((q) => q.findRelatedRecords(project, 'products'));
+  let productList;
+  if (isEmpty(products)) {
+    productList = (
+      <div
+        className='flex align-items-center justify-content-center
+      m-b-lg p-t-md p-b-md round-border-8 thin-border'
+      >
+        <span data-test-products-empty-text>{t('project.products.empty')}</span>
       </div>
     );
+  } else {
+    const sortedProducts = products.sort(
+      compareVia((product) => attributesFor(product).dateCreated, false)
+    );
+    productList = sortedProducts.map((product) => <div>{product.id}</div>);
   }
+  return <div className='m-b-lg'>{productList}</div>;
 }
 
-export default compose(
-  withTranslations,
-  withOrbit((passedProps: IProps) => {
-    const { project } = passedProps;
+// class Products extends React.Component {
+//   render() {
+//     const { products } = this.props;
+//     const { t } = useTranslations();
+
+//     let productList;
+
+//     if (isEmpty(products)) {
+//       productList = (
+//         <div
+//           className='flex align-items-center justify-content-center
+//         m-b-lg p-t-md p-b-md round-border-8 thin-border'
+//         >
+//           <span data-test-products-empty-text>{t('project.products.empty')}</span>
+//         </div>
+//       );
+//     } else {
+//       const sortedProducts = products.sort(
+//         compareVia((product) => attributesFor(product).dateCreated, false)
+//       );
+//       productList = sortedProducts.map((product) => <div></div>);
+//     }
+//     return (
+//       <div data-test-products>
+//         {products.map((product, i) => {
+//           return <ProductArtifact key={product.id} product={product} />;
+//         })}
+//       </div>
+//     );
+//   }
+// }
+
+// export default compose(
+//   withTranslations,
+//   withOrbit((passedProps: IProps) => {
+//     const { project } = passedProps;
 
-    return {
-      products: (q) => q.findRelatedRecords(project, 'products'),
-    };
-  })
-)(Products);
+//     return {
+//       products: (q) => q.findRelatedRecords(project, 'products'),
+//     };
+//   })
+// )(Products);

source/SIL.AppBuilder.Portal.Frontend/src/ui/routes/root.tsx

@@ -21,6 +21,7 @@ import OpenSourceRoute from '@ui/routes/open-source';
 import ErrorRootRoute from '@ui/routes/errors';
 import DownloadsRootRoute from '@ui/routes/downloads';
 import ProductsRoute from '@ui/routes/products';
+import UserAccountDeleteRoute from '@ui/routes/user-account-delete';
 
 import AuthenticatedLayout from '~/ui/components/layout';
 
@@ -61,6 +62,7 @@ export default function RootPage() {
           <Route path={paths.invitationsPath} component={InvitationsRoute} />
           <Route path={paths.openSourcePath} component={OpenSourceRoute} />
           <Route path={paths.downloadsPath} component={DownloadsRootRoute} />
+          <Route path={paths.userAccountDeletePath} component={UserAccountDeleteRoute} />
           <Route exact path={paths.requestOrgAccessPath} component={RequestOrgAccessRoute} />
           <Route
             path={paths.requestOrgAccessSuccessPath}