feat(adminPanel): RN-1301: Enable column resizing (#5663)

* enable column resizing * Remove unused props * Include tooltip when text is not fully visible * Remove tooltip types * Fixes * Update to handle padding of content * Make the icon only clickable * Fix page index issue
beyondessential · May 27, 2024 · 5ce0438 · 5ce0438
1 parent dc75651
commit 5ce0438
Show file tree

Hide file tree

Showing 34 changed files with 372 additions and 365 deletions.
diff --git a/packages/admin-panel/src/common.jsx b/packages/admin-panel/src/common.jsx
@@ -149,7 +149,6 @@ export const DATA_ELEMENT_FIELDS = [
   {
     Header: 'Permission Groups',
     source: 'permission_groups',
-    type: 'tooltip',
     editConfig: {
       optionsEndpoint: 'permissionGroups',
       optionLabelKey: 'name',

diff --git a/packages/admin-panel/src/routes/entities/entities.js b/packages/admin-panel/src/routes/entities/entities.js
@@ -19,7 +19,6 @@ export const FIELDS = {
   name: {
     Header: 'Name',
     source: 'name',
-    type: 'tooltip',
   },
   type: {
     Header: 'Type',

diff --git a/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js b/packages/admin-panel/src/routes/externalData/externalDatabaseConnections.js
@@ -14,7 +14,6 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
-    type: 'tooltip',
   },
   {
     Header: 'Name',
@@ -54,7 +53,8 @@ const COLUMNS = [
   {
     Header: 'Test',
     type: 'testDatabaseConnection',
-    colWidth: '6.5rem',
+    width: 90,
+    disableResizing: true,
   },
   {
     Header: 'Delete',

diff --git a/packages/admin-panel/src/routes/projects/projects.js b/packages/admin-panel/src/routes/projects/projects.js
@@ -14,12 +14,10 @@ const DEFAULT_FIELDS = [
   {
     Header: 'Description',
     source: 'description',
-    type: 'tooltip',
   },
   {
     Header: 'Dashboard',
     source: 'dashboard_group_name',
-    type: 'tooltip',
     editConfig: {
       optionsEndpoint: 'dashboards',
       optionLabelKey: 'name',

diff --git a/packages/admin-panel/src/routes/surveys/questions.js b/packages/admin-panel/src/routes/surveys/questions.js
@@ -18,30 +18,25 @@ const QUESTION_FIELDS = [
   {
     Header: 'Name',
     source: 'name',
-    type: 'tooltip',
   },
   {
     Header: 'Question',
     source: 'text',
-    type: 'tooltip',
   },
   {
     Header: 'Legacy options',
     source: 'options',
-    type: 'tooltip',
     editConfig: {
       type: 'jsonArray',
     },
   },
   {
     Header: 'Detail',
     source: 'detail',
-    type: 'tooltip',
   },
   {
     Header: 'Hook',
     source: 'hook',
-    type: 'tooltip',
   },
   {
     Header: 'Option set ID',

diff --git a/packages/admin-panel/src/routes/surveys/surveyResponses.js b/packages/admin-panel/src/routes/surveys/surveyResponses.js
@@ -22,14 +22,12 @@ const surveyName = {
   Header: 'Survey',
   source: 'survey.name',
   editable: false,
-  type: 'tooltip',
 };
 
 const surveyId = {
   Header: 'Survey ID',
   source: 'survey.id',
   editable: false,
-  type: 'tooltip',
   show: false,
 };
 
@@ -42,7 +40,6 @@ const assessorName = {
 const date = {
   Header: 'Date of survey',
   source: 'end_time',
-  type: 'tooltip',
   accessor: row => moment(row.end_time).local().format('ddd, MMM Do YYYY, HH:mm:ss ZZ'),
   filterable: false,
   editable: false,
@@ -51,7 +48,6 @@ const date = {
 const dateOfData = {
   Header: 'Date of data',
   source: 'data_time',
-  type: 'tooltip',
   accessor: row => moment.parseZone(row.data_time).format('ddd, MMM Do YYYY, HH:mm:ss'),
   filterable: false,
   editConfig: {
@@ -63,7 +59,6 @@ const dateOfData = {
 const approvalStatus = {
   Header: 'Approval status',
   source: 'approval_status',
-  type: 'tooltip',
 };
 
 const entityName = {
@@ -121,12 +116,10 @@ export const ANSWER_COLUMNS = [
     Header: 'Question',
     source: 'question.text',
     editable: false,
-    type: 'tooltip',
   },
   {
     Header: 'Answer',
     source: 'text',
-    type: 'tooltip',
   },
 ];
 

diff --git a/packages/admin-panel/src/routes/surveys/surveys.js b/packages/admin-panel/src/routes/surveys/surveys.js
@@ -37,7 +37,6 @@ const SURVEY_FIELDS = {
   name: {
     Header: 'Name',
     source: 'name',
-    type: 'tooltip',
     editConfig: {
       maxLength: 50,
       secondaryLabel: 'Max 50 characters',
@@ -244,7 +243,6 @@ const QUESTION_FIELDS = [
   {
     Header: 'Code',
     source: 'question.code',
-    type: 'tooltip',
     editable: false,
   },
   {
@@ -254,27 +252,22 @@ const QUESTION_FIELDS = [
   {
     Header: 'Name',
     source: 'question.name',
-    type: 'tooltip',
   },
   {
     Header: 'Question',
     source: 'question.text',
-    type: 'tooltip',
   },
   {
     Header: 'Detail',
     source: 'question.detail',
-    type: 'tooltip',
   },
   {
     Header: 'Question label',
     source: 'question_label',
-    type: 'tooltip',
   },
   {
     Header: 'Detail label',
     source: 'detail_label',
-    type: 'tooltip',
   },
 ];
 

diff --git a/packages/admin-panel/src/routes/surveys/syncGroups.js b/packages/admin-panel/src/routes/surveys/syncGroups.js
@@ -68,7 +68,7 @@ const COLUMNS = [
     source: 'sync_status',
     filterable: false,
     disableSortBy: true,
-    colWidth: '12rem',
+    width: 200,
     actionConfig: {
       syncStatusEndpoint: 'dataServiceSyncGroups/{id}',
       latestSyncLogEndpoint: 'dataServiceSyncGroups/{id}/logs?limit=1',

diff --git a/packages/admin-panel/src/routes/users/accessRequests.js b/packages/admin-panel/src/routes/users/accessRequests.js
@@ -11,7 +11,6 @@ const USER_FIELDS = [
   {
     Header: 'Email address',
     source: 'user_account.email',
-    type: 'tooltip',
   },
   {
     Header: 'First name',
@@ -50,7 +49,6 @@ const ACCESS_REQUEST_FIELDS = [
   {
     Header: 'Message',
     source: 'message',
-    type: 'tooltip',
     editable: false,
   },
   {
@@ -98,7 +96,6 @@ const USER_COLUMNS = [
           Header: 'Message',
           source: 'message',
           bulkAccessor: rows => rows.map(row => (row.message ? row.message : 'blank')).join(', '),
-          type: 'tooltip',
           editable: false,
         },
         {

diff --git a/packages/admin-panel/src/routes/users/users.jsx b/packages/admin-panel/src/routes/users/users.jsx
@@ -38,7 +38,6 @@ const EDIT_FIELDS = [
   {
     Header: 'Email address',
     source: 'email',
-    type: 'tooltip',
   },
   {
     Header: 'Phone number',
@@ -51,12 +50,10 @@ const EDIT_FIELDS = [
   {
     Header: 'Employer',
     source: 'employer',
-    type: 'tooltip',
   },
   {
     Header: 'Verified',
     source: 'verified_email',
-    type: 'tooltip',
     editConfig: {
       options: [
         {
@@ -94,12 +91,10 @@ const COLUMNS = [
   {
     Header: 'Email Address',
     source: 'email',
-    type: 'tooltip',
   },
   {
     Header: 'Employer',
     source: 'employer',
-    type: 'tooltip',
   },
   {
     Header: 'Verified',

diff --git a/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx b/packages/admin-panel/src/routes/visualisations/dashboardItems.jsx
@@ -15,12 +15,10 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
-    type: 'tooltip',
   },
   {
     Header: 'Report code',
     source: 'report_code',
-    type: 'tooltip',
   },
   {
     Header: 'Config',

diff --git a/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js b/packages/admin-panel/src/routes/visualisations/dashboardMailingLists.js
@@ -110,7 +110,6 @@ const ENTRY_FIELDS = [
   {
     Header: 'Email',
     source: 'dashboard_mailing_list_entry.email',
-    type: 'tooltip',
   },
   {
     Header: 'Subscribed',

diff --git a/packages/admin-panel/src/routes/visualisations/dashboards.js b/packages/admin-panel/src/routes/visualisations/dashboards.js
@@ -13,7 +13,6 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
-    type: 'tooltip',
   },
   {
     Header: 'Name',

diff --git a/packages/admin-panel/src/routes/visualisations/dataTables.js b/packages/admin-panel/src/routes/visualisations/dataTables.js
@@ -16,7 +16,6 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
-    type: 'tooltip',
   },
   {
     Header: 'Description',
@@ -35,7 +34,6 @@ const FIELDS = [
   {
     Header: 'Permission groups',
     source: 'permission_groups',
-    type: 'tooltip',
     Filter: ArrayFilter,
     Cell: ({ value }) => prettyArray(value),
     editConfig: {

diff --git a/packages/admin-panel/src/routes/visualisations/legacyReports.js b/packages/admin-panel/src/routes/visualisations/legacyReports.js
@@ -9,12 +9,10 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
-    type: 'tooltip',
   },
   {
     Header: 'Data builder',
     source: 'data_builder',
-    type: 'tooltip',
   },
   {
     Header: 'Data builder config',

diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js b/packages/admin-panel/src/routes/visualisations/mapOverlayGroupRelations.js
@@ -11,7 +11,7 @@ const FIELDS = [
   {
     Header: 'Map overlay group code',
     source: 'map_overlay_group.code',
-    type: 'tooltip',
+
     editConfig: {
       optionsEndpoint: 'mapOverlayGroups',
       optionLabelKey: 'map_overlay_group.code',
@@ -22,7 +22,7 @@ const FIELDS = [
   {
     Header: 'Child ID',
     source: 'child_id',
-    type: 'tooltip',
+
     editConfig: {
       optionsEndpoint: 'mapOverlays',
       optionLabelKey: 'mapOverlay.id',
@@ -35,7 +35,7 @@ const FIELDS = [
     Header: 'Child type',
     width: 160,
     source: 'child_type',
-    type: 'tooltip',
+
     editConfig: {
       options: [
         {
@@ -52,7 +52,6 @@ const FIELDS = [
   {
     Header: 'Sort order',
     source: 'sort_order',
-    type: 'tooltip',
   },
 ];
 

diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js b/packages/admin-panel/src/routes/visualisations/mapOverlayGroups.js
@@ -16,12 +16,10 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
-    type: 'tooltip',
   },
   {
     Header: 'Name',
     source: 'name',
-    type: 'tooltip',
   },
 ];
 
@@ -42,7 +40,7 @@ export const RELATION_FIELDS = [
   {
     Header: 'Child ID',
     source: 'child_id',
-    type: 'tooltip',
+
     editConfig: {
       optionsEndpoint: 'mapOverlays',
       optionLabelKey: 'mapOverlay.id',
@@ -53,7 +51,7 @@ export const RELATION_FIELDS = [
   {
     Header: 'Child type',
     source: 'child_type',
-    type: 'tooltip',
+
     editConfig: {
       options: [
         {
@@ -70,7 +68,6 @@ export const RELATION_FIELDS = [
   {
     Header: 'Sort order',
     source: 'sort_order',
-    type: 'tooltip',
   },
 ];
 

diff --git a/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx b/packages/admin-panel/src/routes/visualisations/mapOverlays.jsx
@@ -18,13 +18,11 @@ const FIELDS = [
   {
     Header: 'Code',
     source: 'code',
-    type: 'tooltip',
   },
   {
     Header: 'Name',
     source: 'name',
     width: 140,
-    type: 'tooltip',
   },
   {
     Header: 'Permission group',

diff --git a/packages/admin-panel/src/routes/visualisations/socialFeed.jsx b/packages/admin-panel/src/routes/visualisations/socialFeed.jsx
@@ -36,7 +36,7 @@ const FIELDS = [
   {
     Header: 'Creation date',
     source: 'creation_date',
-    type: 'tooltip',
+
     accessor: row => moment(row.creation_date).local().toString(),
     editConfig: {
       type: 'datetime-local',