My projects display more info

jsapp/js/projects/customViewRoute.tsx

@@ -37,7 +37,8 @@ function CustomViewRoute() {
   useEffect(() => {
     customView.setUp(
       viewUid,
-      `${ROOT_URL}/api/v2/project-views/${viewUid}/assets/?`
+      `${ROOT_URL}/api/v2/project-views/${viewUid}/assets/?`,
+      DEFAULT_VISIBLE_FIELDS
     );
   }, [viewUid]);
 
@@ -110,7 +111,7 @@ function CustomViewRoute() {
         assets={customView.assets}
         isLoading={!customView.isFirstLoadComplete}
         highlightedFields={getFilteredFieldsNames()}
-        visibleFields={toJS(customView.fields) || DEFAULT_VISIBLE_FIELDS}
+        visibleFields={toJS(customView.fields) || customView.defaultVisibleFields}
         orderableFields={DEFAULT_ORDERABLE_FIELDS}
         order={customView.order}
         onChangeOrderRequested={customView.setOrder.bind(customView)}

jsapp/js/projects/customViewStore.ts

@@ -48,6 +48,8 @@ class CustomViewStore {
   /** Whether the first page call was made after setup. */
   public isFirstLoadComplete = false;
   public isLoading = false;
+  /** This starts with some default value, but `setUp` overrides it. */
+  public defaultVisibleFields: ProjectFieldName[] = DEFAULT_VISIBLE_FIELDS;
   /**
    * Please pass url with query parameters included, or simply ending with `?`.
    * This is the API url we want to call for given view. We have it here, so
@@ -87,9 +89,14 @@ class CustomViewStore {
    *
    * Use this method whenever you change view.
    */
-  public setUp(viewUid: string, baseUrl: string) {
+  public setUp(
+    viewUid: string,
+    baseUrl: string,
+    defaultVisibleFields: ProjectFieldName[]
+  ) {
     this.viewUid = viewUid;
     this.baseUrl = baseUrl;
+    this.defaultVisibleFields = defaultVisibleFields;
     this.assets = [];
     this.isFirstLoadComplete = false;
     this.isLoading = false;
@@ -129,7 +136,7 @@ class CustomViewStore {
   public hideField(fieldName: ProjectFieldName) {
     let newFields = Array.isArray(this.fields)
       ? Array.from(this.fields)
-      : DEFAULT_VISIBLE_FIELDS;
+      : this.defaultVisibleFields;
     newFields = newFields.filter((item) => item !== fieldName);
     this.setFields(newFields);
   }

jsapp/js/projects/myProjectsRoute.tsx

@@ -9,7 +9,7 @@ import ProjectsFieldsSelector from './projectViews/projectsFieldsSelector';
 import {
   HOME_VIEW,
   HOME_ORDERABLE_FIELDS,
-  DEFAULT_VISIBLE_FIELDS,
+  HOME_DEFAULT_VISIBLE_FIELDS,
   HOME_EXCLUDED_FIELDS,
 } from './projectViews/constants';
 import ViewSwitcher from './projectViews/viewSwitcher';
@@ -33,7 +33,8 @@ function MyProjectsRoute() {
   useEffect(() => {
     customView.setUp(
       HOME_VIEW.uid,
-      `${ROOT_URL}/api/v2/assets/?q=${COMMON_QUERIES.s}`
+      `${ROOT_URL}/api/v2/assets/?q=${COMMON_QUERIES.s}`,
+      HOME_DEFAULT_VISIBLE_FIELDS
     );
   }, []);
 
@@ -54,7 +55,7 @@ function MyProjectsRoute() {
 
   /** Filters out excluded fields */
   const getTableVisibleFields = () => {
-    const outcome = toJS(customView.fields) || DEFAULT_VISIBLE_FIELDS;
+    const outcome = toJS(customView.fields) || customView.defaultVisibleFields;
     return outcome.filter(
       (fieldName) => !HOME_EXCLUDED_FIELDS.includes(fieldName)
     );

jsapp/js/projects/projectViews/constants.ts

@@ -174,7 +174,7 @@ export const PROJECT_FIELDS: ProjectFields = {
   },
   ownerUsername: {
     name: 'ownerUsername',
-    label: t('Owner username'),
+    label: t('Owner'),
     apiFilteringName: 'owner__username',
     apiOrderingName: 'owner__username',
     availableConditions: [
@@ -188,7 +188,7 @@ export const PROJECT_FIELDS: ProjectFields = {
   },
   ownerFullName: {
     name: 'ownerFullName',
-    label: t('Owner full name'),
+    label: t('Owner name'),
     apiFilteringName: 'owner__extra_details__data__name',
     apiOrderingName: 'owner__extra_details__data__name',
     availableConditions: [
@@ -336,6 +336,10 @@ export const HOME_ORDERABLE_FIELDS: ProjectFieldName[] = [
   'ownerUsername',
 ];
 
+/**
+ * The inital fields that are going to be displayed. We also use them with
+ * "reset" fields button.
+ */
 export const DEFAULT_VISIBLE_FIELDS: ProjectFieldName[] = [
   'countries',
   'dateModified',
@@ -346,6 +350,16 @@ export const DEFAULT_VISIBLE_FIELDS: ProjectFieldName[] = [
   'submissions',
 ];
 
+/** An override default list (instead of DEFAULT_VISIBLE_FIELDS) */
+export const HOME_DEFAULT_VISIBLE_FIELDS: ProjectFieldName[] = [
+  'dateModified',
+  'dateDeployed',
+  'name',
+  'ownerUsername',
+  'status',
+  'submissions',
+];
+
 /**
  * These are fields not available on the `/api/v2/assets/` endpoint - there is
  * no point in displaying them to the user.

jsapp/js/projects/projectsTable/projectsTable.module.scss

@@ -1,7 +1,5 @@
 @use 'scss/sizes';
 @use '~kobo-common/src/styles/colors';
-@use 'scss/variables';
-@use 'scss/libs/mdl';
 @use 'scss/z-indexes';
 
 $projects-table-min-width: 820px;
@@ -13,18 +11,6 @@ $projects-table-min-width: 820px;
   flex-direction: column;
   background-color: colors.$kobo-white;
   overflow: auto;
-
-  &.fullscreen {
-    position: fixed;
-    z-index: z-indexes.$z-fullscreen;
-    border: sizes.$x5 solid mdl.$root-background;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .header {

jsapp/js/projects/projectsTable/projectsTableHeader.module.scss

@@ -4,6 +4,7 @@
 @use 'scss/sizes';
 @use '~kobo-common/src/styles/colors';
 @use 'js/components/common/icon';
+@use './projectsTableRow.module';
 
 // This file contains all the styles that are being used exclusively in
 // `ProjectsTableHeader` component. Most of styles it is using are coming
@@ -30,10 +31,15 @@
 .trigger {
   @include mixins.centerRowFlex;
 
-  padding: sizes.$x2 sizes.$x18;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: projectsTableRow.$projects-table-row-padding;
+  // 10 px is a magic number that puts the caret icon in the same line as the
+  // content of the cells below
+  padding-left: projectsTableRow.$projects-table-row-padding + sizes.$x10;
 
   cursor: pointer;
-  line-height: sizes.$x30; // ??
+  line-height: projectsTableRow.$projects-table-row-height;
 
   :global {
     // Dropdown arrow

jsapp/js/projects/projectsTable/projectsTableRow.module.scss

@@ -6,21 +6,25 @@
 @use 'scss/z-indexes';
 
 $projects-table-hover-bg: colors.$kobo-gray-98;
+$projects-table-row-padding: sizes.$x8;
+// The shared height of a row: project rows are bigger due to padding, but
+// header rows use this size without paddings
+$projects-table-row-height: sizes.$x36;
 
 .row {
   display: flex;
   flex-direction: row;
   position: relative;
   align-items: stretch;
   cursor: pointer;
-  margin: 0 sizes.$x30;
+  margin: 0 sizes.$x8;
 
   user-select: none;
 }
 
 .cell {
   border-bottom: sizes.$x1 solid colors.$kobo-gray-92;
-  padding: sizes.$x18;
+  padding: $projects-table-row-padding;
   color: colors.$kobo-gray-40;
   flex: 1 0 auto;
   // ensures the table columns are same width for all rows
@@ -39,20 +43,23 @@ $projects-table-hover-bg: colors.$kobo-gray-98;
   }
 
   &[data-field='checkbox'] {
-    max-width: sizes.$x18 + sizes.$x20 + sizes.$x18;
-    width: sizes.$x18 + sizes.$x20 + sizes.$x18;
+    max-width: $projects-table-row-padding + sizes.$x20 + $projects-table-row-padding;
+    width: $projects-table-row-padding + sizes.$x20 + $projects-table-row-padding;
     @include mixins.centerRowFlex;
   }
 
   &[data-field='countries'],
   &[data-field='description'],
   &[data-field='ownerEmail'],
   &[data-field='ownerOrganization'],
-  &[data-field='status'],
-  &[data-field='submissions'] {
+  &[data-field='status'] {
     width: 13%;
   }
 
+  &[data-field='submissions'] {
+    width: 10%;
+  }
+
   &[data-field='countries'] {
     width: 15%;
 
@@ -63,13 +70,13 @@ $projects-table-hover-bg: colors.$kobo-gray-98;
 
   &[data-field='ownerFullName'],
   &[data-field='ownerUsername'] {
-    width: 12.5%;
+    width: 10%;
     font-weight: 600;
   }
 
   &[data-field='dateModified'],
   &[data-field='dateDeployed'] {
-    width: 18%;
+    width: 14%;
   }
 
   &[data-field='languages'] {
@@ -78,9 +85,8 @@ $projects-table-hover-bg: colors.$kobo-gray-98;
 
   &[data-field='name'] {
     color: colors.$kobo-dark-blue;
-    font-size: sizes.$x16;
     font-weight: 600;
-    width: 25%;
+    width: 30%;
 
     // Setup for underlining the Project Name on row hover.
     // This clarifies the size of the checkbox touch-target
@@ -97,7 +103,7 @@ $projects-table-hover-bg: colors.$kobo-gray-98;
 .row.rowTypeProject {
   .cell {
     @include mixins.textEllipsis;
-    line-height: sizes.$x36;
+    line-height: $projects-table-row-height;
 
     // performance hints for resizing
     contain: inline-size layout paint style;
@@ -126,8 +132,8 @@ $projects-table-hover-bg: colors.$kobo-gray-98;
       }
       // right: cover whitespace up to the project name link
       &::after {
-        right: 0 - sizes.$x18;
-        width: sizes.$x18;
+        right: 0 - $projects-table-row-padding;
+        width: $projects-table-row-padding;
       }
       // left: cover whitespace left of project table
       &::before {
@@ -203,7 +209,7 @@ $projects-table-hover-bg: colors.$kobo-gray-98;
     color: colors.$kobo-gray-40;
     border-top: 0;
     cursor: pointer;
-    height: sizes.$x36;
+    height: $projects-table-row-height;
     padding: 0; // dropdown does the padding
     background-color: colors.$kobo-white;