AJ-954 - Add capability to edit a cell in Data table view in Azure

src/libs/ajax/WorkspaceDataService.ts

@@ -2,6 +2,7 @@ import _ from 'lodash/fp';
 import { authOpts, fetchWDS, jsonBody } from 'src/libs/ajax/ajax-common';
 import {
   RecordQueryResponse,
+  RecordResponseBody,
   RecordTypeSchema,
   SearchRequest,
   TsvUploadResponse,
@@ -132,6 +133,19 @@ export const WorkspaceData = (signal) => ({
     );
     return res.json();
   },
+  updateRecord: async (
+    root: string,
+    instanceId: string,
+    recordType: string,
+    recordId: string,
+    record: { [attribute: string]: any }
+  ): Promise<RecordResponseBody> => {
+    const res = await fetchWDS(root)(
+      `${instanceId}/records/v0.2/${recordType}/${recordId}`,
+      _.mergeAll([authOpts(), jsonBody(record), { signal, method: 'PATCH' }])
+    );
+    return res.json();
+  },
   getVersion: async (root: string): Promise<WDSVersionResponse> => {
     const res = await fetchWDS(root)('version', _.merge(authOpts(), { signal }));
     return res.json();

src/libs/ajax/data-table-providers/DataTableProvider.ts

@@ -61,6 +61,13 @@ export type UploadParameters = {
   recordType: string;
 };
 
+export type RecordEditParameters = {
+  instance: string;
+  recordName: string;
+  recordId: string;
+  record: { [attribute: string]: any };
+};
+
 export type InvalidTsvOptions = {
   fileImportModeMatches: boolean;
   filePresent: boolean;
@@ -117,6 +124,7 @@ export interface DataTableFeatures {
   supportsTypeRenaming: boolean;
   supportsEntityRenaming: boolean;
   supportsEntityUpdating: boolean;
+  supportEntityUpdatingTypes?: string[];
   supportsAttributeRenaming: boolean;
   supportsAttributeDeleting: boolean;
   supportsAttributeClearing: boolean;

src/libs/ajax/data-table-providers/WdsDataTableProvider.test.ts

@@ -172,11 +172,26 @@ describe('WdsDataTableProvider', () => {
     return Promise.resolve({ message: 'Upload Succeeded', recordsModified: 1 });
   };
 
+  const updateRecordMockImpl: WorkspaceDataContract['updateRecord'] = (
+    _root: string,
+    _instanceId: string,
+    _recordType: string,
+    _recordId: string,
+    _record: { [attribute: string]: any }
+  ) => {
+    const expected: RecordAttributes = {
+      something: 123,
+      testAttr: 'string_value',
+    };
+    return Promise.resolve({ id: 'record1', type: 'test', attributes: expected });
+  };
+
   const listAppsV2MockImpl = (_workspaceId: string): Promise<ListAppItem[]> => {
     return Promise.resolve(testProxyUrlResponse);
   };
 
   let getRecords: jest.MockedFunction<WorkspaceDataContract['getRecords']>;
+  let updateRecord: jest.MockedFunction<WorkspaceDataContract['updateRecord']>;
   let getCapabilities: jest.MockedFunction<WorkspaceDataContract['getCapabilities']>;
   let deleteTable: jest.MockedFunction<WorkspaceDataContract['deleteTable']>;
   let downloadTsv: jest.MockedFunction<WorkspaceDataContract['downloadTsv']>;
@@ -185,6 +200,7 @@ describe('WdsDataTableProvider', () => {
 
   beforeEach(() => {
     getRecords = jest.fn().mockImplementation(getRecordsMockImpl);
+    updateRecord = jest.fn().mockImplementation(updateRecordMockImpl);
     getCapabilities = jest.fn().mockImplementation(getCapabilitiesMockImpl);
     deleteTable = jest.fn().mockImplementation(deleteTableMockImpl);
     downloadTsv = jest.fn().mockImplementation(downloadTsvMockImpl);
@@ -196,6 +212,7 @@ describe('WdsDataTableProvider', () => {
         ({
           WorkspaceData: {
             getRecords,
+            updateRecord,
             getCapabilities,
             deleteTable,
             downloadTsv,
@@ -691,6 +708,29 @@ describe('WdsDataTableProvider', () => {
   });
 });
 
+describe('updateRecord', () => {
+  it('restructures a WDS response', async () => {
+    // Arrange
+    const provider = new TestableWdsProvider();
+
+    const expected: RecordAttributes = {
+      something: 123,
+      testAttr: 'string_value',
+    };
+
+    // Act
+    const actual = await provider.updateRecord({
+      instance: uuid,
+      recordName: 'test',
+      recordId: 'record1',
+      record: expected,
+    });
+
+    // Assert
+    expect(actual.attributes).toStrictEqual(expected);
+  });
+});
+
 describe('transformMetadata', () => {
   it('restructures a WDS response', () => {
     // Arrange

src/libs/ajax/data-table-providers/WdsDataTableProvider.ts

@@ -7,6 +7,7 @@ import {
   EntityMetadata,
   EntityQueryOptions,
   EntityQueryResponse,
+  RecordEditParameters,
   TSVFeatures,
   TsvUploadButtonDisabledOptions,
   TsvUploadButtonTooltipOptions,
@@ -58,6 +59,12 @@ export interface TsvUploadResponse {
   recordsModified: number;
 }
 
+export interface RecordResponseBody {
+  id: string;
+  type: string;
+  attributes: object;
+}
+
 export const wdsToEntityServiceMetadata = (wdsSchema: RecordTypeSchema[]): EntityMetadata => {
   const keyedSchema: Record<string, RecordTypeSchema> = _.keyBy((x) => x.name, wdsSchema);
   return _.mapValues((typeDef) => {
@@ -156,7 +163,8 @@ export class WdsDataTableProvider implements DataTableProvider {
       supportsTypeDeletion: true,
       supportsTypeRenaming: false,
       supportsEntityRenaming: false,
-      supportsEntityUpdating: false, // TODO: enable as part of AJ-594
+      supportsEntityUpdating: true,
+      supportEntityUpdatingTypes: ['string', 'number', 'boolean', 'json'], // remove this as part of AJ-<need to create ticket> for other types
       supportsAttributeRenaming: false, // TODO: enable as part of AJ-1278, requires `edit.renameAttribute` capability
       supportsAttributeDeleting: this.isCapabilityEnabled('edit.deleteAttribute'),
       supportsAttributeClearing: false,
@@ -323,4 +331,16 @@ export class WdsDataTableProvider implements DataTableProvider {
       uploadParams.file
     );
   };
+
+  updateRecord = (recordEditParams: RecordEditParameters): Promise<RecordResponseBody> => {
+    if (!this.proxyUrl) return Promise.reject('Proxy Url not loaded');
+
+    return Ajax().WorkspaceData.updateRecord(
+      this.proxyUrl,
+      recordEditParams.instance,
+      recordEditParams.recordName,
+      recordEditParams.recordId,
+      recordEditParams.record
+    );
+  };
 }

src/workspace-data/data-table/entity-service/AttributeInput.js

@@ -1,14 +1,12 @@
-import ReactJson from '@microlink/react-json-view';
-import { Switch } from '@terra-ui-packages/components';
 import _ from 'lodash/fp';
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { div, fieldset, h, label, legend, span } from 'react-hyperscript-helpers';
 import { IdContainer, LabeledCheckbox, Link, RadioButton, Select } from 'src/components/common';
 import { icon } from 'src/components/icons';
-import { NumberInput, TextInput } from 'src/components/input';
 import TooltipTrigger from 'src/components/TooltipTrigger';
 import * as Utils from 'src/libs/utils';
 
+import { renderInputForAttributeType } from '../shared/AttributeInput';
 import { convertAttributeValue, getAttributeType } from './attribute-utils';
 
 export const AttributeTypeInput = ({
@@ -83,71 +81,6 @@ export const AttributeTypeInput = ({
   ]);
 };
 
-const renderInputForAttributeType = _.curry((attributeType, props) => {
-  return Utils.switchCase(
-    attributeType,
-    [
-      'string',
-      () => {
-        const { value = '', ...otherProps } = props;
-        return h(TextInput, {
-          autoFocus: true,
-          placeholder: 'Enter a value',
-          value,
-          ...otherProps,
-        });
-      },
-    ],
-    [
-      'reference',
-      () => {
-        const { value, onChange, ...otherProps } = props;
-        return h(TextInput, {
-          autoFocus: true,
-          placeholder: `Enter a ${value.entityType}_id`,
-          value: value.entityName,
-          onChange: (v) => onChange({ ...value, entityName: v }),
-          ...otherProps,
-        });
-      },
-    ],
-    [
-      'number',
-      () => {
-        const { value = 0, ...otherProps } = props;
-        return h(NumberInput, { autoFocus: true, isClearable: false, value, ...otherProps });
-      },
-    ],
-    [
-      'boolean',
-      () => {
-        const { value = false, ...otherProps } = props;
-        return div({ style: { flexGrow: 1, display: 'flex', alignItems: 'center', height: '2.25rem' } }, [
-          h(Switch, { checked: value, ...otherProps }),
-        ]);
-      },
-    ],
-    [
-      'json',
-      () => {
-        const { value, onChange, ...otherProps } = props;
-        return h(ReactJson, {
-          ...otherProps,
-          style: { ...otherProps.style, whiteSpace: 'pre-wrap' },
-          src: value,
-          displayObjectSize: false,
-          displayDataTypes: false,
-          enableClipboard: false,
-          name: false,
-          onAdd: _.flow(_.get('updated_src'), onChange),
-          onDelete: _.flow(_.get('updated_src'), onChange),
-          onEdit: _.flow(_.get('updated_src'), onChange),
-        });
-      },
-    ]
-  );
-});
-
 const defaultValueForAttributeType = (attributeType, referenceEntityType) => {
   return Utils.switchCase(
     attributeType,

src/workspace-data/data-table/shared/AttributeInput.ts

@@ -0,0 +1,72 @@
+import ReactJson from '@microlink/react-json-view';
+import { Switch } from '@terra-ui-packages/components';
+import _ from 'lodash/fp';
+import { div, h } from 'react-hyperscript-helpers';
+import { NumberInput, TextInput } from 'src/components/input';
+import * as Utils from 'src/libs/utils';
+
+// can be pulled into shared
+export const renderInputForAttributeType = _.curry((attributeType, props) => {
+  return Utils.switchCase(
+    attributeType,
+    [
+      'string',
+      () => {
+        const { value = '', ...otherProps } = props;
+        return h(TextInput, {
+          autoFocus: true,
+          placeholder: 'Enter a value',
+          value,
+          ...otherProps,
+        });
+      },
+    ],
+    [
+      'reference',
+      () => {
+        const { value, onChange, ...otherProps } = props;
+        return h(TextInput, {
+          autoFocus: true,
+          placeholder: `Enter a ${value.entityType}_id`,
+          value: value.entityName,
+          onChange: (v) => onChange({ ...value, entityName: v }),
+          ...otherProps,
+        });
+      },
+    ],
+    [
+      'number',
+      () => {
+        const { value = 0, ...otherProps } = props;
+        return h(NumberInput, { autoFocus: true, isClearable: false, value, ...otherProps });
+      },
+    ],
+    [
+      'boolean',
+      () => {
+        const { value = false, ...otherProps } = props;
+        return div({ style: { flexGrow: 1, display: 'flex', alignItems: 'center', height: '2.25rem' } }, [
+          h(Switch, { checked: value, ...otherProps }),
+        ]);
+      },
+    ],
+    [
+      'json',
+      () => {
+        const { value, onChange, ...otherProps } = props;
+        return h(ReactJson, {
+          ...otherProps,
+          style: { ...otherProps.style, whiteSpace: 'pre-wrap' },
+          src: value,
+          displayObjectSize: false,
+          displayDataTypes: false,
+          enableClipboard: false,
+          name: false,
+          onAdd: _.flow(_.get('updated_src'), onChange),
+          onDelete: _.flow(_.get('updated_src'), onChange),
+          onEdit: _.flow(_.get('updated_src'), onChange),
+        });
+      },
+    ]
+  );
+});