Fix 12 failing Cypress E2E tests in cypress-run (20.x, chrome) CI job

.github/workflows/run_cypress.yml

@@ -42,15 +42,15 @@ jobs:
           docker run -d --name wheel --network wheel-e2e-net \
             -p 8089:8089 \
             -e WHEEL_USE_HTTP=1 \
-            -e WHEEL_LOGLEVEL=ERROR \
+            -e WHEEL_LOG_LEVEL=ERROR \
             wheel_e2e_test
           docker cp test/wheel_config/. wheel:/root/.wheel/
           docker run -d --name wheel_auth --network wheel-e2e-net \
             -p 8090:8089 \
             -e WHEEL_USE_HTTP=1 \
             -e WHEEL_ANONYMOUS_LOGIN=YES \
             -e WHEEL_ANONYMOUS_PASSWORD=WheelTest123! \
-            -e WHEEL_LOGLEVEL=ERROR \
+            -e WHEEL_LOG_LEVEL=ERROR \
             wheel_e2e_test
           docker cp test/wheel_config_auth/. wheel_auth:/root/.wheel/
           docker run -d --name mock --network wheel-e2e-net \

TEST_GUIDE.md

@@ -375,7 +375,7 @@ Chromeクラッシュ対策: /dev/shm を 512MB に拡張
 | `WHEEL_TEST_REMOTE_PASSWORD` | リモートホストパスワード | `passw0rd` |
 | `WHEEL_CONFIG_DIR` | WHEEL設定ディレクトリパス | (setup.shが自動生成) |
 | `NODE_ENV` | Node環境 | `test` |
-| `WHEEL_LOGLEVEL` | ログレベル | `OFF` |
+| `WHEEL_LOG_LEVEL` | ログレベル | `OFF` |
 
 ### E2Eテスト
 

client/src/components/Workflow.vue

@@ -34,15 +34,24 @@
           </template>
         </v-tooltip>
         <v-spacer />
-        <v-btn
-          rounded
-          variant="outlined"
-          :ripple="false"
-          :style="{backgroundColor : stateColor}"
-          data-cy="workflow-project_state-btn"
+        <v-tooltip
+          :disabled="failedTaskPaths.length === 0"
+          location="bottom"
         >
-          status: {{ projectState }}{{ isReadOnly }}
-        </v-btn>
+          <template #activator="{ props }">
+            <v-btn
+              v-bind="props"
+              rounded
+              variant="outlined"
+              :ripple="false"
+              :style="{backgroundColor : stateColor}"
+              data-cy="workflow-project_state-btn"
+            >
+              status: {{ projectState }}{{ isReadOnly }}
+            </v-btn>
+          </template>
+          <span>Failed tasks:<br>{{ failedTaskPaths.join('\n') }}</span>
+        </v-tooltip>
         <v-spacer />
         <v-btn
           shaped
@@ -129,6 +138,7 @@
                 variant="outlined"
                 icon="mdi-restore"
                 :disabled="! cleanProjectAllowed"
+                data-cy="workflow-cleanup_project-btn"
                 v-bind="props"
                 @click="openProjectOperationComfirmationDialog('cleanProject')"
               />
@@ -159,7 +169,7 @@
           >
             <template #activator="{ props }">
               <v-btn
-                v-if="readOnly"
+                v-if="forceEditAllowed"
                 icon="mdi-pencil-lock-outline"
                 rounded="0"
                 variant="outlined"
@@ -596,6 +606,9 @@ export default {
       return this.readOnly ? " - read-only" : "";
     },
     stateColor() {
+      if (this.projectState === "stopped" && this.failedTaskPaths.length > 0) {
+        return "#E60000";
+      }
       return state2color(this.projectState);
     },
     readOnlyColor() {
@@ -605,7 +618,10 @@ export default {
       return this.selectedSourceFilenames[0].filename;
     },
     runProjectAllowed() {
-      return isAllowed(this.projectState, "runProject");
+      return isAllowed(this.projectState, "runProject") && !this.readOnly;
+    },
+    forceEditAllowed() {
+      return this.readOnly && ["stopped", "finished", "failed", "unknown"].includes(this.projectState);
     },
     pauseProjectAllowed() {
       return isAllowed(this.projectState, "pauseProject");
@@ -624,6 +640,9 @@ export default {
     },
     cleanProjectAllowed() {
       return isAllowed(this.projectState, "cleanProject");
+    },
+    failedTaskPaths() {
+      return this.projectJson?.failedTasks ?? [];
     }
   },
   mounted: function () {
@@ -916,6 +935,7 @@ export default {
     ...mapActions({
       showSnackbar: "showSnackbar",
       closeSnackbar: "closeSnackbar",
+      clearSnackbarQueue: "clearSnackbarQueue",
       commitSelectedComponent: "selectedComponent"
     }),
     ...mapMutations({
@@ -941,6 +961,7 @@ export default {
       }
       if (operation === "cleanProject") {
         this.firstViewDataAlived = false;
+        this.clearSnackbarQueue();
       }
       if (operation === "stopProject" || operation === "cleanProject") {
         this.commitWaitingWorkflow(true);
@@ -953,6 +974,12 @@ export default {
         if (operation === "cleanProject") {
           this.viewerDataDir = null;
         }
+        const label = operation.replace("Project", " project");
+        if (rt) {
+          this.showSnackbar({ message: `${label} accepted`, timeout: 3000 });
+        } else {
+          this.showSnackbar({ message: `${label} failed`, timeout: -1 });
+        }
       });
     },
     openProjectOperationComfirmationDialog(operation) {

client/src/components/common/NavigationDrawer.vue

@@ -17,7 +17,7 @@
         class="text-capitalize"
         text="Remotehost editor"
         data-cy="navigation-manage_remote_host-btn"
-        @click="$emit('open-remotehost-manager')"
+        @click="openRemotehostManager"
       />
       <v-btn
         prepend-icon="mdi-help-circle-outline"
@@ -27,6 +27,7 @@
         class="text-capitalize"
         text="User guide"
         data-cy="navigation-user_guide_editor-btn"
+        @click="drawer = false"
       />
     </v-list>
   </v-navigation-drawer>
@@ -64,6 +65,16 @@ export default {
         this.$emit("update:modelValue", value);
       }
     }
+  },
+  methods: {
+
+    /**
+     * Close the drawer and emit the open-remotehost-manager event.
+     */
+    openRemotehostManager() {
+      this.drawer = false;
+      this.$emit("open-remotehost-manager");
+    }
   }
 };
 </script>

client/src/components/common/applicationToolBar.vue

@@ -6,25 +6,26 @@
 <template>
   <v-app-bar>
     <template #prepend>
-      <a
-        :href="homeURL"
-        data-cy="tool_bar-wheel_logo-logo"
+      <v-tooltip
+        location="right"
+        text="Go to Home Page"
       >
-        <v-tooltip
-          location="right"
-          text="Go to Home Page"
-        >
-          <template #activator="{ props }">
+        <template #activator="{ props }">
+          <a
+            v-bind="props"
+            :href="homeURL"
+            data-cy="tool_bar-wheel_logo-logo"
+          >
             <v-img
-              v-bind="props"
+              eager
               height="72px"
               width="180px"
               :src="imgLogo"
               alt="wheel title logo"
             />
-          </template>
-        </v-tooltip>
-      </a>
+          </a>
+        </template>
+      </v-tooltip>
     </template>
     <v-app-bar-title
       class="text-lowercase text-decoration-none text-h5 white--text"

client/src/components/componentProperty.vue

@@ -14,50 +14,25 @@
     <v-toolbar
       color="background"
     >
-      <v-toolbar-title>
-        <v-form
-          v-model="validName"
-          @submit.prevent
-        >
-          <v-tooltip
-            :text="copySelectedComponent.name"
-            location="top"
-            :disabled="copySelectedComponent.name.length <= 10"
-          >
-            <template #activator="{ props }">
-              <v-text-field
-                v-model="copySelectedComponent.name"
-                v-bind="props"
-                label="name"
-                :readonly="readOnly"
-                variant="outlined"
-                class="pt-4"
-                density="compact"
-                :rules="[rules.isValidName, isUniqueName]"
-                data-cy="component_property-name-text_field"
-              />
-            </template>
-          </v-tooltip>
-        </v-form>
-      </v-toolbar-title>
       <v-toolbar-items>
-        <v-tooltip
-          location="bottom"
-          text="disable"
-        >
-          <template #activator="{ props}">
-            <v-switch
-              v-model="copySelectedComponent.disable"
-              :readonly="readOnly"
-              hide-details
-              color="error"
-              label="disable"
-              v-bind="props"
-              data-cy="component_property-disable-switch"
-              class="ml-2"
-            />
-          </template>
-        </v-tooltip>
+        <div class="d-flex align-center ml-2">
+          <span
+            class="text-caption"
+            :class="!copySelectedComponent.disable ? 'text-primary font-weight-bold' : 'text-disabled'"
+          >enable</span>
+          <v-switch
+            v-model="copySelectedComponent.disable"
+            :readonly="readOnly"
+            hide-details
+            :color="copySelectedComponent.disable ? 'error' : 'primary'"
+            data-cy="component_property-disable-switch"
+            class="mx-1"
+          />
+          <span
+            class="text-caption"
+            :class="copySelectedComponent.disable ? 'text-error font-weight-bold' : 'text-disabled'"
+          >disable</span>
+        </div>
         <v-tooltip
           location="bottom"
           text="close"
@@ -73,6 +48,30 @@
         </v-tooltip>
       </v-toolbar-items>
     </v-toolbar>
+    <v-form
+      v-model="validName"
+      @submit.prevent
+    >
+      <v-tooltip
+        :text="copySelectedComponent.name"
+        location="top"
+        :disabled="copySelectedComponent.name.length <= 10"
+      >
+        <template #activator="{ props }">
+          <v-text-field
+            v-model="copySelectedComponent.name"
+            v-bind="props"
+            label="name"
+            :readonly="readOnly"
+            variant="outlined"
+            class="px-4 pt-3"
+            density="compact"
+            :rules="[rules.isValidName, isUniqueName]"
+            data-cy="component_property-name-text_field"
+          />
+        </template>
+      </v-tooltip>
+    </v-form>
     <v-form
       v-model="valid"
       @submit.prevent

client/src/components/rapid/unsavedFilesDialog.vue

@@ -11,7 +11,7 @@
   >
     <v-card>
       <v-card-title class="text-h5">
-        Discard following changes and exit text editor?
+        Do you want to keep or discard the changes you made?
       </v-card-title>
       <v-card-text>
         <v-data-table
@@ -28,19 +28,19 @@
         <v-btn
           class="text-capitalize"
           prepend-icon="mdi-content-save"
-          text="keep changes"
+          text="Keep changes and exit"
           @click="keepChanges"
         />
         <v-btn
           class="text-capitalize"
           prepend-icon="mdi-alert-circle-outline"
-          text="discard all changes"
+          text="Discard changes and exit"
           @click="discardChanges"
         />
         <v-btn
           class="text-capitalize"
           prepend-icon="mdi-close"
-          text="cancel"
+          text="Continue editing"
           @click="closeDialog"
         />
       </v-card-actions>

client/src/lib/constants.json

@@ -6,9 +6,9 @@
   "plugColor": "#338033",
   "elsePlugColor": "#9944bb",
   "filePlugColor": "#5673BF",
-  "fileLinkCopyColor": "#E07B39",
-  "fileLinkRemoteSymlinkColor": "#CC5500",
-  "fileLinkCrossBoundaryColor": "#2AABBB",
+  "fileLinkCopyColor": "#FFB300",
+  "fileLinkRemoteSymlinkColor": "#55DDFF",
+  "fileLinkCrossBoundaryColor": "#FF5555",
   "textHeight": 32,
   "borderWidth": 1.5,
   "textLengthLimit": 100,

client/src/store/index.js

@@ -204,6 +204,16 @@ export default new Vuex.Store({
         context.dispatch("showSnackbar");
       }
     },
+
+    /**
+     * Clear all pending snackbar messages from the queue and dismiss any currently visible toast.
+     * @param {object} context - Vuex action context
+     */
+    clearSnackbarQueue: (context)=>{
+      context.state.snackbarQueue.splice(0);
+      context.commit("snackbarMessage", "");
+      context.commit("openSnackbar", false);
+    },
     showDialog: (context, payload)=>{
       //ignore if dialog is already opend
       //we have to use dialog queue for this case