Implement auto-recover functionality [B: 1403] (#483)

Author: droberts-ctrlo

.github/workflows/tests.yml

@@ -178,7 +178,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [18.x, 20.x, 22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -187,6 +187,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
+          cache: 'npm'
+      - run: npx update-browserslist-db@latest
       - run: yarn
       - run: yarn jest --passWithNoTests

jest.config.js

@@ -94,6 +94,9 @@ const config = {
     "^validation$": "<rootDir>/src/frontend/js/lib/validation",
     "^logging$": "<rootDir>/src/frontend/js/lib/logging",
     "^util/(.*)$": "<rootDir>/src/frontend/js/lib/util/$1",
+    "^components/(.*)$": "<rootDir>/src/frontend/components/$1",
+    "^set-field-values$": "<rootDir>/src/frontend/js/lib/set-field-values",
+    "^guid$": "<rootDir>/src/frontend/js/lib/guid",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

lib/GADS.pm

@@ -4761,7 +4761,8 @@ sub _process_edit
         {
             # The "source" parameter is user input, make sure still valid
             my $source_curval = $layout->column(param('source'), permission => 'read');
-            try { $record->write(dry_run => 1, parent_curval => $source_curval) };
+            my %options = (dry_run => 1, parent_curval => $source_curval);
+            try { $record->write(%options) };
             if (my $e = $@->wasFatal)
             {
                 push @validation_errors, $e->reason eq 'PANIC' ? 'An unexpected error occurred' : $e->message;
@@ -4885,6 +4886,9 @@ sub _process_edit
         $params->{content_block_custom_classes} = 'content-block--footer';
     }
 
+    $params->{clone_from} = $clone_from
+        if $clone_from;
+
     $params->{modal_field_ids} = encode_json $layout->column($modal)->curval_field_ids
         if $modal;
 

lib/GADS/API.pm

@@ -1448,6 +1448,17 @@ any ['get', 'post'] => '/api/users' => require_any_role [qw/useradmin superadmin
     return encode_json $return;
 };
 
+get '/api/get_key' => require_login sub {
+    my $user = logged_in_user;
+
+    my $key = $user->encryption_key;
+
+    return to_json {
+        error => 0,
+        key   => $key
+    }
+};
+
 sub _success
 {   my $msg = shift;
     send_as JSON => {

lib/GADS/Role/Presentation/Column/Curcommon.pm

@@ -1,5 +1,6 @@
 package GADS::Role::Presentation::Column::Curcommon;
 
+use JSON qw(encode_json);
 use Moo::Role;
 
 sub after_presentation
@@ -12,6 +13,7 @@ sub after_presentation
     $return->{data_filter_fields} = $self->data_filter_fields;
     $return->{typeahead_use_id}   = 1;
     $return->{limit_rows}         = $self->limit_rows;
+    $return->{modal_field_ids}    = encode_json $self->curval_field_ids;
     # Expensive to build, so avoid if possible. Only needed for an edit, and no
     # point if they are filtered from record values as they will be rebuilt
     # anyway

lib/GADS/Schema/Result/User.pm

@@ -16,6 +16,8 @@ use GADS::Config;
 use GADS::Email;
 use HTML::Entities qw/encode_entities/;
 use Log::Report;
+use MIME::Base64 qw/encode_base64url/;
+use Digest::SHA  qw/hmac_sha256 sha256/;
 use Moo;
 
 extends 'DBIx::Class::Core';
@@ -1249,4 +1251,23 @@ sub export_hash
     };
 }
 
+has encryption_key => (
+    is      => 'lazy',
+);
+
+sub _build_encryption_key {
+    my $self = shift;
+    
+    my $header_json  = '{"typ":"JWT","alg":"HS256"}';
+    # This is a string because encode_json created the JSON string in an arbitrary order and we need the same key _every time_!
+    my $payload_json = '{"sub":"' . $self->id . '","user":"' . $self->username . '"}';
+    my $header_b64   = encode_base64url($header_json);
+    my $payload_b64  = encode_base64url($payload_json);
+    my $input        = "$header_b64.$payload_b64";
+    my $secret       = sha256($self->password);
+    my $sig          = encode_base64url(hmac_sha256($input, $secret));
+    
+    return encode_base64url(sha256("$input.$sig"));
+}
+
 1;

src/frontend/components/button/lib/cancel-button.ts

@@ -0,0 +1,15 @@
+import { clearSavedFormValues } from "./common";
+
+export default function createCancelButton(el: HTMLElement | JQuery<HTMLElement>) {
+    const $el = $(el);
+    if ($el[0].tagName !== 'BUTTON') return;
+    $el.data('cancel-button', "true");
+    $el.on('click', async () => {
+        const href = $el.data('href');
+        await clearSavedFormValues($el.closest('form'));        
+        if (href)
+            window.location.href = href;
+        else
+            window.history.back();
+    });
+}

src/frontend/components/button/lib/common.test.ts

@@ -0,0 +1,23 @@
+import "../../../testing/globals.definitions";
+import {layoutId, recordId, table_key} from "./common";
+
+describe("Common button tests",()=>{
+    it("should populate table_key",()=>{
+        expect(table_key()).toBe("linkspace-record-change-undefined-0"); // Undefined because $('body').data('layout-identifier') is not defined
+    });
+
+    it("should have a layoutId", ()=>{
+        $('body').data('layout-identifier', 'layoutId');
+        expect(layoutId()).toBe('layoutId');
+    });
+
+    it("should have a recordId", ()=>{
+        expect(isNaN(parseInt(location.pathname.split('/').pop() ?? ""))).toBe(true);
+        expect(recordId()).toBe(0);
+    });
+
+    it("should populate table_key fully",()=>{
+        $('body').data('layout-identifier', 'layoutId');
+        expect(table_key()).toBe("linkspace-record-change-layoutId-0");
+    });
+});

src/frontend/components/button/lib/common.ts

@@ -0,0 +1,52 @@
+import gadsStorage from "util/gadsStorage";
+
+/**
+ * Clear all saved form values for the current record
+ * @param $form The form to clear the data for
+ */
+export async function clearSavedFormValues($form: JQuery<HTMLElement>) {
+    if (!$form || $form.length === 0) return;
+    const layout = layoutId();
+    const record = recordId();
+    const ls = storage();
+    const item = await ls.getItem(table_key());
+
+    if (item) ls.removeItem(`linkspace-record-change-${layout}-${record}`);
+    await Promise.all($form.find(".linkspace-field").map(async (_, el) => {
+        const field_id = $(el).data("column-id");
+        const item = await gadsStorage.getItem(`linkspace-column-${field_id}-${layout}-${record}`);
+        if (item) gadsStorage.removeItem(`linkspace-column-${field_id}-${layout}-${record}`);
+    }));
+}
+
+/**
+ * Get the layout identifier from the body data
+ * @returns The layout identifier
+ */
+export function layoutId() {
+    return $('body').data('layout-identifier');
+}
+
+/**
+ * Get the record identifier from the body data
+ * @returns The record identifier
+ */
+export function recordId() {
+    return $('body').find('.form-edit').data('current-id') || 0;
+}
+
+/**
+ * Get the key for the table used for saving form values
+ * @returns The key for the table
+ */
+export function table_key() {
+    return `linkspace-record-change-${layoutId()}-${recordId()}`;
+}
+
+/**
+ * Get the storage object - this originally was used in debugging to allow for the storage object to be mocked
+ * @returns The storage object
+ */
+export function storage() {
+    return gadsStorage;
+}

src/frontend/components/button/lib/component.ts

@@ -105,6 +105,12 @@ class ButtonComponent extends Component {
                     createRemoveUnloadButton(el);
                 });
         });
+        map.set('btn-js-cancel', (el) => {
+            import(/* webpackChunkName: "cancel-button" */ './cancel-button')
+                .then(({default: createCancelButton}) => {
+                    createCancelButton(el);
+                });
+        });
         ButtonComponent.staticButtonsMap = map;
     }