Merge Develop 1.8.3 #1300

Develop

Author: bilalesi

src/__mocks__/handlers/DataTableContainer/handlers.ts

@@ -263,3 +263,62 @@ export const sparqlViewSingleResult = rest.post(
     return res(ctx.status(200), ctx.json(mockResponse));
   }
 );
+
+export const getMockStudioResource = (givenName: string, self: string) => ({
+  familyName: {
+    type: 'literal',
+    value: 'Archer',
+  },
+  givenName: {
+    type: 'literal',
+    value: givenName,
+  },
+  id: {
+    type: 'uri',
+    value: self,
+  },
+  self: {
+    type: 'uri',
+    value: self,
+  },
+});
+
+export const sparqlViewResultHandler = (
+  studioRows: ReturnType<typeof getMockStudioResource>[]
+) => {
+  return rest.post(
+    deltaPath('/views/bbp/agents/graph/sparql'),
+    (req, res, ctx) => {
+      const mockResponse = {
+        head: {
+          vars: ['self', 'givenName', 'familyName', 'id'],
+        },
+        results: {
+          bindings: [...studioRows],
+        },
+      };
+
+      return res(ctx.status(200), ctx.json(mockResponse));
+    }
+  );
+};
+
+export const fetchResourceForDownload = rest.get(
+  deltaPath(
+    `/resources/bbp/agents/_/persons%2Fc3358e61-7650-4954-99b7-f7572cbf5d5g`
+  ),
+  (req, res, ctx) => {
+    const self = req.url.pathname.slice(req.url.pathname.lastIndexOf('/') + 1);
+    const mockResponse = {
+      '@context': [
+        'https://bluebrain.github.io/nexus/contexts/metadata.json',
+        'https://bluebrainnexus.io/workflowStep/table-context',
+      ],
+      '@id': `https://bbp.epfl.ch/neurosciencegraph/data/${self}`,
+      '@type': 'Resource',
+      _self: `https://localhost:3000/resources/bbp/agents/_/${self}`,
+    };
+
+    return res(ctx.status(200), ctx.json(mockResponse));
+  }
+);

src/pages/HomePage/HomePage.tsx

@@ -9,7 +9,6 @@ const Home: React.FunctionComponent = () => {
   const oidc = useSelector((state: RootState) => state.oidc);
   const userAuthenticated = oidc && !!oidc.user?.id_token;
   if (!userAuthenticated) {
-    console.log('@@not authenticated');
     return <IdentityPage />;
   }
 

src/pages/MyDataPage/MyDataPage.tsx

@@ -0,0 +1,11 @@
+import { MyData } from '../../shared/canvas';
+
+const MyDataPage = () => {
+  return (
+    <div className="my-data-view view-container" style={{ padding: '0 1em' }}>
+      <MyData />
+    </div>
+  );
+};
+
+export default MyDataPage;

src/pages/OrganizationProjectsPage/OrganizationProjectsPage.tsx

@@ -48,6 +48,9 @@ const SHOULD_INCLUDE_DEPRECATED = true;
 type TOrganizationOptions = {
   orgLabel: string;
 };
+type TProjectResponseCommonExtended = ProjectResponseCommon & {
+  _markedForDeletion: boolean;
+};
 interface TPageOptions {
   sort: TSort;
 }
@@ -75,6 +78,7 @@ type TProjectItem = {
   updatedAt: Date;
   organization: string;
   nexus: NexusClient;
+  toDelete: boolean;
 };
 const fetchOrganizationDetails = async ({
   nexus,
@@ -151,6 +155,7 @@ const ProjectItem = ({
   access,
   organization,
   nexus,
+  toDelete,
 }: TProjectItem) => {
   const { data } = useQuery({
     queryKey: ['datesets', { orgLabel: organization, projectLabel: title }],
@@ -166,7 +171,21 @@ const ProjectItem = ({
         <div className="org">
           <Link to={to}>
             <h3>
-              {title}{' '}
+              {toDelete && (
+                <span style={{ verticalAlign: 'top', margin: '0 3px' }}>
+                  <LoadingOutlined
+                    style={{
+                      fontSize: 12,
+                      color: '#dc7943',
+                      verticalAlign: 'middle',
+                    }}
+                  />
+                </span>
+              )}
+              {title}
+              {toDelete && (
+                <span className="deletion-tag">Project being deleted</span>
+              )}
               {deprected && (
                 <span className="depreacted-tag">
                   <DeprecatedIcon /> deprecated
@@ -181,15 +200,15 @@ const ProjectItem = ({
             <div>Datasets</div>
             <div>{(datasets && formatNumber(datasets)) ?? '0'}</div>
           </div>
-          <div className="statistics_item" />
-          <div className="statistics_item">
-            <div>Created</div>
-            <div>{timeago(createdAt)}</div>
-          </div>
           <div className="statistics_item">
             <div>Last update</div>
             <div>{timeago(updatedAt)}</div>
           </div>
+          <div className="statistics_item">
+            <div>Created</div>
+            <div>{timeago(createdAt)}</div>
+          </div>
+          <div className="statistics_item" />
         </div>
         <div className="redirection">
           <Link to={to}>
@@ -267,10 +286,9 @@ const OrganizationProjectsPage: React.FC<{}> = ({}) => {
   });
   const total =
     data && data.pages ? ((data.pages[0] as ProjectList)?._total as number) : 0;
-  const dataSource: ProjectResponseCommon[] =
-    data && data.pages
-      ? data.pages.map(page => (page as ProjectList)._results).flat()
-      : [];
+  const dataSource: TProjectResponseCommonExtended[] = (data && data.pages
+    ? data.pages.map(page => (page as ProjectList)._results).flat()
+    : []) as TProjectResponseCommonExtended[];
   if (!query.trim().length) {
     totalProjectsRef.current = total;
   }
@@ -323,6 +341,7 @@ const OrganizationProjectsPage: React.FC<{}> = ({}) => {
           onCreateClick={() => updateCreateModelVisibility(true)}
           permissions={['projects/create']}
           path={[`/${orgLabel}`]}
+          supTitle="Organization"
         />
         <div className="route-body">
           <div className="route-body-container">
@@ -372,13 +391,14 @@ const OrganizationProjectsPage: React.FC<{}> = ({}) => {
                       itemLayout="horizontal"
                       loadMore={LoadMore}
                       dataSource={dataSource}
-                      renderItem={(item: ProjectResponseCommon) => {
+                      renderItem={(item: TProjectResponseCommonExtended) => {
                         const to = `/orgs/${item._organizationLabel}/${item._label}`;
                         return (
                           <ProjectItem
                             {...{
                               to,
                               nexus,
+                              toDelete: item._markedForDeletion,
                               title: item._label,
                               organization: item._organizationLabel,
                               deprected: item._deprecated,

src/pages/ProjectPage/ProjectPage.tsx

@@ -338,6 +338,7 @@ const ProjectView: React.FunctionComponent = () => {
                     description: project.description || '',
                     base: project.base,
                     vocab: project.vocab,
+                    _deprecated: project._deprecated,
                   }}
                   apiMappings={project.apiMappings}
                   mode="edit"

src/pages/ProjectPage/styles.less

@@ -1,6 +1,7 @@
 @import '../../shared/lib.less';
 
 .project-view {
+  margin-top: 60px;
   .view-container {
     max-width: 100%;
   }

src/pages/ProjectsPage/ProjectsPage.tsx

@@ -104,7 +104,7 @@ const ProjectItem = ({
         <div className="org">
           <Link to={to}>
             <h3>
-              {title}{' '}
+              {title} <span className="organization-tag">{orgLabel}</span>
               {deprected && (
                 <span className="depreacted-tag">
                   <DeprecatedIcon /> deprecated
@@ -119,15 +119,15 @@ const ProjectItem = ({
             <div>Datasets</div>
             <div>{(datasets && formatNumber(datasets)) || '0'}</div>
           </div>
-          <div className="statistics_item" />
-          <div className="statistics_item">
-            <div>Created</div>
-            <div>{timeago(createdAt)}</div>
-          </div>
           <div className="statistics_item">
             <div>Last update</div>
             <div>{timeago(updatedAt)}</div>
           </div>
+          <div className="statistics_item">
+            <div>Created</div>
+            <div>{timeago(createdAt)}</div>
+          </div>
+          <div className="statistics_item" />
         </div>
         <div className="redirection">
           <Link to={to}>

src/shared/App.less

@@ -6,7 +6,7 @@
 .view-container {
   padding: 2em 1rem;
   // max-width: @maxConstrainedItemWidth;
-  margin: 0 auto;
+  margin: 52px auto 0;
   display: flex;
   background: #f5f5f5 !important;
   &.-unconstrained-width {

src/shared/RouteHeader/RouteHeader.tsx

@@ -15,6 +15,7 @@ type TProps = {
   onCreateClick?(): void;
   permissions?: string[];
   path?: string[];
+  supTitle?: string;
 };
 
 const RouteHeader = ({
@@ -27,6 +28,7 @@ const RouteHeader = ({
   onCreateClick,
   permissions = [],
   path = ['/'],
+  supTitle,
 }: TProps) => {
   const { layoutSettings } = useSelector((state: RootState) => state.config);
   return (
@@ -36,6 +38,7 @@ const RouteHeader = ({
     >
       <img src={bg} alt={alt} style={{ ...imgCss }} />
       <div className="title">
+        {supTitle && <h4>{supTitle}</h4>}
         <h2>{title}</h2>
         <p>{extra}</p>
       </div>

src/shared/RouteHeader/styles.less

@@ -18,15 +18,20 @@
 
   .title {
     padding-left: 14%;
-
+    h4 {
+      text-transform: uppercase;
+      color: #ffffff;
+      font-weight: 200;
+      font-size: 16px;
+    }
     h2 {
       position: relative;
       font-family: 'Titillium Web';
       z-index: 10;
       font-style: normal;
       font-weight: 700;
       font-size: 70px;
-      line-height: 100%;
+      line-height: 74px;
       color: #ffffff;
       margin-bottom: 10px;
     }