fix: three small dashboard fixes (#232, #935, #299) (#942)

* fix(categories): submit the category edit modal on Enter (#232)

Pressing Enter in the category edit modal did nothing, so creating or
editing a category always required reaching for the OK button.

Enter now submits, except on elements that handle it themselves
(textarea, button, link, select), and it respects the same validity
condition that disables the OK button.

* fix(views): rebuild visualizations when switching dashboard views (#935)

The visualization cards were keyed by their position in the list only, so
switching to another view let Vue reuse the instance that sat at the same
index in the previous view. Visualizations that keep local state — the
Top Bucket Data picker holds its selected bucket, field and fetched
events in `data`, populated once in `mounted` — kept showing the previous
view's selection and events.

Keying on the view id as well forces a fresh instance per view.

* fix(header): keep the navbar sticky on desktop too (#299)

The navbar was only pinned on Android, so tall pages (the timeline, a
long activity view) scrolled the navigation out of reach everywhere else
and required scrolling back up to change views.

The padding that reserves space for the fixed navbar was already in
place, it was just gated on the platform.

* address greptile review feedback (greploop iteration 1)

- Offset the sticky settings sidebar by the fixed navbar's height, via a
  new --aw-navbar-height custom property shared with the navbar padding,
  so it no longer sticks underneath the navbar on desktop.
- Replace the source-text assertion on the visualization key with a mount
  test that switches view_id and asserts a fresh child instance is
  created; verified it fails without the key change.

Author: 0xbrayo

src/components/CategoryEditModal.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 // The category edit modal
-b-modal(id="edit" ref="edit" title="Edit category" @show="resetModal" @hidden="hidden" @ok="handleOk" :ok-disabled="editing.rule.type === 'regex' && !validPattern")
+b-modal(id="edit" ref="edit" title="Edit category" @show="resetModal" @hidden="hidden" @ok="handleOk" @keydown.native.enter="handleEnter" :ok-disabled="editing.rule.type === 'regex' && !validPattern")
   div.my-1
     b-input-group.my-1(prepend="Name")
       b-form-input(v-model="editing.name")
@@ -133,6 +133,22 @@ export default {
       }
       return true;
     },
+    handleEnter(event) {
+      // Enter submits the modal, same as pressing OK (#232).
+      // Skipped for elements where Enter already has a meaning of its own,
+      // so we don't swallow their default behavior.
+      const tag = event.target && event.target.tagName;
+      if (tag === 'TEXTAREA' || tag === 'BUTTON' || tag === 'A' || tag === 'SELECT') {
+        return;
+      }
+      // Mirrors the :ok-disabled condition on the modal
+      if (this.editing.rule.type === 'regex' && !this.validPattern) {
+        return;
+      }
+      event.preventDefault();
+      this.handleSubmit();
+      this.$emit('ok');
+    },
     handleOk(event) {
       // Prevent modal from closing
       event.preventDefault();

src/components/Header.vue

@@ -99,7 +99,7 @@ div(:class="{'fixed-top-padding': fixedTopMenu}")
 
 <style lang="scss" scoped>
 .fixed-top-padding {
-  padding-bottom: 3.5em;
+  padding-bottom: var(--aw-navbar-height);
 }
 </style>
 
@@ -138,7 +138,10 @@ export default {
   data() {
     return {
       activityViews: null,
-      fixedTopMenu: this.$isAndroid,
+      // Sticky on every platform: tall pages (the timeline, a long activity
+      // view) otherwise scroll the navigation out of reach.
+      // See https://github.com/ActivityWatch/aw-webui/issues/299
+      fixedTopMenu: true,
       researchEdition: typeof AW_RESEARCH_EDITION !== 'undefined' && AW_RESEARCH_EDITION,
     };
   },

src/style/style.scss

@@ -1,5 +1,12 @@
 @import "globals";
 
+:root {
+  // Height of the fixed navbar. Anything that positions itself against the
+  // top of the viewport (the padding that reserves the navbar's space in
+  // Header.vue, the sticky settings sidebar) offsets by this.
+  --aw-navbar-height: 3.5rem;
+}
+
 body,
 html,
 body,

src/views/activity/ActivityView.vue

@@ -9,7 +9,10 @@ div(v-if="viewMissing")
 div(v-else-if="view")
   draggable.row(v-model="elements" handle=".handle")
     // TODO: Handle large/variable sized visualizations better
-    div.col-md-6.col-lg-4.p-3(v-for="el, index in elements", :key="index", :class="{'col-md-12': isVisLarge(el), 'col-lg-12': isVisLarge(el)}")
+    //- Key on the view id as well as the position, so that switching views
+      rebuilds the visualizations instead of reusing the instance that sat at
+      the same index in the previous view (which kept its stale local state).
+    div.col-md-6.col-lg-4.p-3(v-for="el, index in elements", :key="view.id + '-' + index", :class="{'col-md-12': isVisLarge(el), 'col-lg-12': isVisLarge(el)}")
       aw-selectable-vis(:id="index" :type="el.type" :props="el.props" :view-id="view.id" @onTypeChange="onTypeChange" @onRemove="onRemove" :editable="editing")
 
     div.col-md-6.col-lg-4.p-3(v-if="editing")

src/views/settings/Settings.vue

@@ -154,7 +154,8 @@ export default {
 
 .settings-nav {
   position: sticky;
-  top: 1rem;
+  // Clear the fixed navbar, which overlaps the top of the viewport
+  top: calc(var(--aw-navbar-height) + 1rem);
   align-self: start;
 }
 

test/unit/ActivityView.test.js

@@ -1,5 +1,17 @@
+import { shallowMount } from '@vue/test-utils';
 import ActivityView from '~/views/activity/ActivityView.vue';
 
+const mockViews = [
+  { id: 'default', name: 'Default', elements: [{ type: 'top_apps', props: {} }] },
+  { id: 'second', name: 'Second', elements: [{ type: 'top_bucket_data', props: {} }] },
+];
+
+jest.mock('~/stores/views', () => ({
+  useViewsStore: () => ({
+    viewsForHost: () => mockViews,
+  }),
+}));
+
 describe('ActivityView isVisLarge', () => {
   test('treats wide visualizations as full-width cards', () => {
     expect(ActivityView.methods.isVisLarge({ type: 'sunburst_clock' })).toBe(true);
@@ -8,3 +20,65 @@ describe('ActivityView isVisLarge', () => {
     expect(ActivityView.methods.isVisLarge({ type: 'top_apps' })).toBe(false);
   });
 });
+
+// Visualizations keep local state — the Top Bucket Data picker holds its
+// selected bucket, field and fetched events in `data` and fills them in
+// `mounted`. Every view renders the same list at the same positions, so if a
+// card is keyed by its index alone Vue reuses the instance from the previous
+// view and the stale state comes along with it.
+// See https://github.com/ActivityWatch/aw-webui/issues/935
+describe('ActivityView view switching', () => {
+  const passthroughStub = { template: '<div><slot /></div>' };
+
+  // Records a line per aw-selectable-vis instance created, so we can tell a
+  // reused instance (no new record) from a fresh one.
+  let created;
+
+  const visStub = {
+    name: 'aw-selectable-vis',
+    props: ['id', 'type', 'props', 'viewId', 'editable'],
+    created() {
+      created.push(`${this.viewId}:${this.id}:${this.type}`);
+    },
+    render: h => h('div'),
+  };
+
+  function mountView() {
+    return shallowMount(ActivityView, {
+      propsData: { view_id: 'default' },
+      mocks: { $route: { params: {}, path: '/activity/view/default' }, $t: key => key },
+      stubs: {
+        draggable: { template: '<div><slot /></div>' },
+        'aw-selectable-vis': visStub,
+        // Globally registered in main.js, so not resolvable from a bare mount
+        'b-button': passthroughStub,
+        'b-modal': passthroughStub,
+        icon: passthroughStub,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    created = [];
+  });
+
+  test('creates a fresh visualization instance when switching views', async () => {
+    const wrapper = mountView();
+    expect(created).toEqual(['default:0:top_apps']);
+
+    await wrapper.setProps({ view_id: 'second' });
+
+    // Without the view id in the key this stays at one entry: Vue patches the
+    // props of the instance already sitting at index 0 rather than rebuilding.
+    expect(created).toEqual(['default:0:top_apps', 'second:0:top_bucket_data']);
+    wrapper.destroy();
+  });
+
+  test('does not rebuild visualizations while staying on the same view', async () => {
+    const wrapper = mountView();
+    await wrapper.setProps({ view_id: 'default' });
+
+    expect(created).toEqual(['default:0:top_apps']);
+    wrapper.destroy();
+  });
+});

test/unit/CategoryEditModal.test.js

@@ -0,0 +1,49 @@
+import CategoryEditModal from '~/components/CategoryEditModal.vue';
+
+// Enter inside the category edit modal should submit it, same as pressing OK.
+// See https://github.com/ActivityWatch/aw-webui/issues/232
+describe('CategoryEditModal handleEnter', () => {
+  function ctx({ tagName = 'INPUT', ruleType = 'regex', validPattern = true } = {}) {
+    const event = { target: { tagName }, preventDefault: jest.fn() };
+    const vm = {
+      editing: { rule: { type: ruleType } },
+      validPattern,
+      handleSubmit: jest.fn(),
+      $emit: jest.fn(),
+    };
+    return { vm, event };
+  }
+
+  const handleEnter = (vm, event) => CategoryEditModal.methods.handleEnter.call(vm, event);
+
+  test('submits when Enter is pressed in a text input', () => {
+    const { vm, event } = ctx();
+    handleEnter(vm, event);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(vm.handleSubmit).toHaveBeenCalled();
+    expect(vm.$emit).toHaveBeenCalledWith('ok');
+  });
+
+  test.each(['TEXTAREA', 'BUTTON', 'A', 'SELECT'])(
+    'leaves Enter alone on <%s>, which handles it itself',
+    tagName => {
+      const { vm, event } = ctx({ tagName });
+      handleEnter(vm, event);
+      expect(event.preventDefault).not.toHaveBeenCalled();
+      expect(vm.handleSubmit).not.toHaveBeenCalled();
+    }
+  );
+
+  test('does not submit an invalid regex, mirroring the disabled OK button', () => {
+    const { vm, event } = ctx({ validPattern: false });
+    handleEnter(vm, event);
+    expect(vm.handleSubmit).not.toHaveBeenCalled();
+    expect(vm.$emit).not.toHaveBeenCalled();
+  });
+
+  test('submits a rule with no pattern to validate', () => {
+    const { vm, event } = ctx({ ruleType: 'none', validPattern: false });
+    handleEnter(vm, event);
+    expect(vm.handleSubmit).toHaveBeenCalled();
+  });
+});