Add setting for log view word wrap default

Author: MetRonnie

changes.d/2078.feat.md

@@ -0,0 +1 @@
+Added setting for log view word wrap default.

src/components/cylc/ViewToolbar.vue

@@ -31,10 +31,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :data-cy="`control-${iControl.key}`"
       >
         <v-btn
+          @click="iControl.callback"
           v-bind="btnProps"
           :disabled="iControl.disabled"
-          :color="iControl.color"
-          @click="iControl.callback"
+          :aria-checked="iControl.value"
+          :color="iControl.value ? 'blue' : undefined"
+          role="switch"
         >
           <v-icon>{{ iControl.icon }}</v-icon>
           <v-tooltip>{{ iControl.title }}</v-tooltip>
@@ -107,7 +109,6 @@ export default {
       const ret = []
       let iGroup
       let iControl
-      let color // control color
       let callback // callback to fire when control is activated
       let disabled // true if control should not be enabled
       const values = this.getValues()
@@ -117,17 +118,13 @@ export default {
           iControls: []
         }
         for (const control of group.controls) {
-          color = null
           callback = null
           disabled = false
 
-          // set callback and color
+          // set callback
           switch (control.action) {
             case 'toggle':
               callback = (e) => this.toggle(control, e)
-              if (control.value) {
-                color = 'blue'
-              }
               break
             case 'callback':
               callback = (e) => this.call(control, e)
@@ -150,7 +147,6 @@ export default {
 
           iControl = {
             ...control,
-            color,
             callback,
             disabled
           }

src/composables/localStorage.js

@@ -30,3 +30,5 @@ export const useCyclePointsOrderDesc = () => useLocalStorage('cyclePointsOrderDe
 export const useJobTheme = () => useLocalStorage('jobTheme', 'default')
 
 export const useReducedAnimation = () => useLocalStorage('reducedAnimation', false)
+
+export const useLogWordWrapDefault = () => useLocalStorage('logWordWrap', false)

src/views/Log.vue

@@ -205,6 +205,7 @@ import ViewToolbar from '@/components/cylc/ViewToolbar.vue'
 import DeltasCallback from '@/services/callbacks'
 import { debounce } from 'lodash-es'
 import CopyBtn from '@/components/core/CopyBtn.vue'
+import { useLogWordWrapDefault } from '@/composables/localStorage'
 
 /**
  * Query used to retrieve data for the Log view.
@@ -356,7 +357,7 @@ export default {
     const timestamps = useInitialOptions('timestamps', { props, emit }, true)
 
     /** Wrap lines? */
-    const wordWrap = useInitialOptions('wordWrap', { props, emit }, false)
+    const wordWrap = useInitialOptions('wordWrap', { props, emit }, useLogWordWrapDefault().value)
 
     /** The log subscription results */
     const results = ref(new Results())

src/views/UserProfile.vue

@@ -210,6 +210,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
                   </template>
                 </v-select>
               </v-row>
+
+              <v-row no-gutters class="align-center wrap">
+                <v-col cols="3">
+                  <span>Log view word wrap</span>
+                </v-col>
+                <v-checkbox
+                  v-model="logWordWrap"
+                  data-cy="log-wrap"
+                />
+              </v-row>
             </v-container>
           </v-defaults-provider>
         </v-form>
@@ -221,7 +231,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <script>
 import { mapState } from 'vuex'
 import { mdiCog, mdiFormatFontSizeDecrease, mdiFormatFontSizeIncrease } from '@mdi/js'
-import { useCyclePointsOrderDesc, useJobTheme, useReducedAnimation } from '@/composables/localStorage'
+import { useCyclePointsOrderDesc, useJobTheme, useLogWordWrapDefault, useReducedAnimation } from '@/composables/localStorage'
 import { decreaseFontSize, getCurrentFontSize, increaseFontSize, resetFontSize } from '@/utils/font-size'
 import { allViews, useDefaultView } from '@/views/views.js'
 import Job from '@/components/cylc/Job.vue'
@@ -243,6 +253,7 @@ export default {
       cyclePointsOrderDesc: useCyclePointsOrderDesc(),
       jobTheme: useJobTheme(),
       reducedAnimation: useReducedAnimation(),
+      logWordWrap: useLogWordWrapDefault(),
       upperFirst,
     }
   },

tests/component/specs/viewToolbar.cy.js

@@ -77,6 +77,7 @@ describe('View Toolbar Component', () => {
       // the toggle should be blue because it's active (default true)
       .get('[data-cy=control-toggle] .v-btn')
       .should('have.class', 'text-blue')
+      .should('have.attr', 'aria-checked', 'true')
       // clicking the toggle should emit a "setOption" event with the
       // controls key (toggle) and new value (false)
       .click({ force: true })
@@ -87,7 +88,8 @@ describe('View Toolbar Component', () => {
       })
       // it should not be grey because it's inactive (false)
       .get('[data-cy=control-toggle] .v-btn')
-      .not('.text-blue')
+      .should('not.have.class', 'text-blue')
+      .should('have.attr', 'aria-checked', 'false')
       // click it again and it should become active again
       .click({ force: true })
       .get('@wrapper').then(({ wrapper }) => {
@@ -97,6 +99,7 @@ describe('View Toolbar Component', () => {
       })
       .get('[data-cy=control-toggle] .v-btn')
       .should('have.class', 'text-blue')
+      .should('have.attr', 'aria-checked', 'true')
 
     // test action=callback
     expect(callbacks).to.have.length(0)

tests/e2e/specs/graph.cy.js

@@ -48,7 +48,7 @@ function checkRememberToolbarSettings (selector, stateBefore, stateAfter) {
   cy
     .get(selector)
     .find('.v-btn')
-    .should(stateBefore, 'text-blue')
+    .should('have.attr', 'aria-checked', String(stateBefore))
     .click()
   // Navigate away
   cy.visit('/#/')
@@ -59,7 +59,7 @@ function checkRememberToolbarSettings (selector, stateBefore, stateAfter) {
   cy
     .get(selector)
     .find('.v-btn')
-    .should(stateAfter, 'text-blue')
+    .should('have.attr', 'aria-checked', String(stateAfter))
 }
 
 describe('Graph View', () => {
@@ -133,21 +133,21 @@ describe('Graph View', () => {
     cy.visit('/#/workspace/one')
     addView('Graph')
     waitForGraphLayout()
-    checkRememberToolbarSettings('[data-cy=control-autoRefresh]', 'have.class', 'not.have.class')
+    checkRememberToolbarSettings('[data-cy=control-autoRefresh]', true, false)
   })
 
   it('remembers transpose setting when switching between workflows', () => {
     cy.visit('/#/workspace/one')
     addView('Graph')
     waitForGraphLayout()
-    checkRememberToolbarSettings('[data-cy=control-transpose]', 'not.have.class', 'have.class')
+    checkRememberToolbarSettings('[data-cy=control-transpose]', false, true)
   })
 
   it('remembers cycle point grouping setting when switching between workflows', () => {
     cy.visit('/#/workspace/one')
     addView('Graph')
     waitForGraphLayout()
-    checkRememberToolbarSettings('[data-cy="control-groupCycle"]', 'not.have.class', 'have.class')
+    checkRememberToolbarSettings('[data-cy="control-groupCycle"]', false, true)
   })
 
   describe('Flow nums', () => {

tests/e2e/specs/userprofile.cy.js

@@ -30,10 +30,10 @@ describe('User Profile', () => {
   const defaultFontSize = 16 // px
   beforeEach(() => {
     cy.visit('/#/user-profile')
-    cy.title().should('eq', 'Cylc UI | User Profile')
   })
 
   it('Visits the user profile', () => {
+    cy.title().should('eq', 'Cylc UI | User Profile')
     cy.get('input#profile-username')
       .should('be.visible')
       .should('be.disabled')
@@ -158,4 +158,21 @@ describe('User Profile', () => {
       .click()
     checkCyclePointOrder(['1', '2'])
   })
+
+  it('Sets log view word wrap default setting', () => {
+    const checkLogWrap = (expected) => {
+      cy.visit('/#/log/one')
+        .get('[data-cy=control-wordWrap] button')
+        .should('have.attr', 'aria-checked', String(expected))
+    }
+
+    cy.get('[data-cy=log-wrap] input').as('checkbox')
+      .should('not.be.checked')
+    checkLogWrap(false)
+    cy.visit('/#/user-profile')
+      .get('@checkbox')
+      .click()
+      .should('be.checked')
+    checkLogWrap(true)
+  })
 })