Skip to content

Commit b5148cc

Browse files
johnsimonsjohnsimons
committed
Fix reset original body
A few small other fixes
1 parent e58bcad commit b5148cc

File tree

7 files changed

+60
-50
lines changed

7 files changed

+60
-50
lines changed

‎src/Frontend/src/components/CodeEditor.vue

+11-3
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,12 @@ const extensions = computed(() => {
5050

5151
<template>
5252
<div class="wrapper" :aria-label="ariaLabel">
53-
<div v-if="props.showCopyToClipboard" class="toolbar">
54-
<CopyToClipboard :value="code" />
53+
<div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" class="toolbar">
54+
<div><slot name="toolbarLeft"></slot></div>
55+
<div>
56+
<slot name="toolbarRight"></slot>
57+
<CopyToClipboard class="clipboard" v-if="props.showCopyToClipboard" :value="code" />
58+
</div>
5559
</div>
5660
<CodeMirror v-model="code" :extensions="extensions" :basic="props.showGutter" :minimal="!props.showGutter" :readonly="props.readOnly" :gutter="!props.readOnly" :wrap="true"></CodeMirror>
5761
</div>
@@ -71,6 +75,10 @@ const extensions = computed(() => {
7175
margin-bottom: 0.5rem;
7276
display: flex;
7377
flex-direction: row;
74-
justify-content: end;
78+
justify-content: space-between;
79+
align-items: center;
80+
}
81+
.clipboard {
82+
margin-left: 0.5rem;
7583
}
7684
</style>

‎src/Frontend/src/components/failedmessages/EditRetryDialog2.vue

+30-30
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import CodeEditor from "@/components/CodeEditor.vue";
99
import { useMessageStore } from "@/stores/MessageStore";
1010
import { storeToRefs } from "pinia";
1111
import LoadingSpinner from "@/components/LoadingSpinner.vue";
12+
import debounce from "lodash/debounce";
1213
1314
interface HeaderWithEditing extends Header {
1415
isLocked: boolean;
@@ -41,28 +42,31 @@ const localMessage = ref<LocalMessageState>({
4142
isBodyEmpty: false,
4243
isContentTypeSupported: false,
4344
bodyContentType: undefined,
44-
bodyUnavailable: true,
45+
bodyUnavailable: false,
4546
isEvent: false,
4647
retried: false,
4748
headers: [],
4849
messageBody: "",
4950
});
50-
let origMessageBody: string;
51-
5251
const showEditAndRetryConfirmation = ref(false);
5352
const showCancelConfirmation = ref(false);
5453
const showEditRetryGenericError = ref(false);
5554
const store = useMessageStore();
5655
const { state, headers, body, edit_and_retry_config } = storeToRefs(store);
5756
const id = computed(() => state.value.data.id ?? "");
58-
const messageBody = computed(() => body.value.data.value);
59-
60-
watch(messageBody, (newValue) => {
61-
if (newValue !== origMessageBody) {
62-
localMessage.value.isBodyChanged = true;
57+
const uneditedMessageBody = computed(() => body.value.data.value ?? "");
58+
const regExToPruneLineEndings = new RegExp(/[\n\r]*/, "g");
59+
const debounceBodyUpdate = debounce((value: string) => {
60+
localMessage.value.isBodyChanged = value.replaceAll(regExToPruneLineEndings, "") !== uneditedMessageBody.value.replaceAll(regExToPruneLineEndings, "");
61+
localMessage.value.isBodyEmpty = value === "";
62+
}, 1000);
63+
64+
watch(
65+
() => localMessage.value.messageBody,
66+
(newValue) => {
67+
debounceBodyUpdate(newValue);
6368
}
64-
localMessage.value.isBodyEmpty = newValue === "";
65-
});
69+
);
6670
6771
function close() {
6872
emit("cancel");
@@ -87,7 +91,7 @@ function confirmCancel() {
8791
}
8892
8993
function resetBodyChanges() {
90-
localMessage.value.messageBody = origMessageBody;
94+
localMessage.value.messageBody = uneditedMessageBody.value;
9195
localMessage.value.isBodyChanged = false;
9296
}
9397
@@ -113,7 +117,6 @@ function initializeMessageBodyAndHeaders() {
113117
return header?.value;
114118
}
115119
116-
origMessageBody = body.value.data.value ?? "";
117120
const local = <LocalMessageState>{
118121
isBodyChanged: false,
119122
isBodyEmpty: false,
@@ -211,15 +214,22 @@ onMounted(() => {
211214
</tr>
212215
</tbody>
213216
</table>
214-
<div role="tabpanel" v-if="panel === 2 && !localMessage.bodyUnavailable" style="height: calc(100% - 260px)">
215-
<div style="margin-top: 1.25rem">
216-
<LoadingSpinner v-if="body.loading" />
217-
<CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true"></CodeEditor>
217+
<template v-if="panel === 2">
218+
<div role="tabpanel" v-if="!localMessage.bodyUnavailable">
219+
<div style="margin-top: 1.25rem">
220+
<LoadingSpinner v-if="body.loading" />
221+
<CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true">
222+
<template #toolbarLeft>
223+
<span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
224+
</template>
225+
<template #toolbarRight>
226+
<button v-if="localMessage.isBodyChanged" type="button" class="btn btn-secondary btn-sm" @click="resetBodyChanges"><i class="fa fa-undo"></i> Reset changes</button>
227+
</template>
228+
</CodeEditor>
229+
</div>
218230
</div>
219-
<span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
220-
<span class="reset-body" v-if="localMessage.isBodyChanged"><i class="fa fa-undo" v-tippy="`Reset changes`"></i> <a @click="resetBodyChanges()" href="javascript:void(0)">Reset changes</a></span>
221-
<div class="alert alert-info" v-if="panel === 2 && localMessage.bodyUnavailable">{{ localMessage.bodyUnavailable }}</div>
222-
</div>
231+
<div role="tabpanel" class="alert alert-info" v-else>{{ localMessage.bodyUnavailable }}</div>
232+
</template>
223233
</div>
224234
</div>
225235
</div>
@@ -267,14 +277,6 @@ onMounted(() => {
267277
margin-right: 20px;
268278
}
269279
270-
.modal-msg-editor .reset-body {
271-
color: #00a3c4;
272-
font-weight: bold;
273-
text-align: left;
274-
margin-top: 15px;
275-
display: inline-block;
276-
}
277-
278280
.modal-msg-editor .reset-body a:hover {
279281
cursor: pointer;
280282
}
@@ -284,8 +286,6 @@ onMounted(() => {
284286
}
285287
286288
.modal-msg-editor .empty-error {
287-
float: right;
288-
margin-top: 15px;
289289
color: #ce4844;
290290
font-weight: bold;
291291
}

‎src/Frontend/src/components/messages2/EditAndRetryButton.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import { storeToRefs } from "pinia";
99
import { FailedMessageStatus } from "@/resources/FailedMessage";
1010
1111
const store = useMessageStore();
12-
const { state } = storeToRefs(store);
12+
const { state, edit_and_retry_config } = storeToRefs(store);
1313
const isConfirmDialogVisible = ref(false);
1414
1515
const failureStatus = computed(() => state.value.data.failure_status);
1616
const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
17-
const isVisible = computed(() => store.edit_and_retry_config.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
17+
const isVisible = computed(() => edit_and_retry_config.value.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
1818
const handleConfirm = async () => {
1919
isConfirmDialogVisible.value = false;
2020

‎src/Frontend/src/components/messages2/FlowDiagram/FlowDiagram.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ enum MessageType {
2323
}
2424
2525
const store = useMessageStore();
26-
const { state } = storeToRefs(store);
26+
const { state, conversationData } = storeToRefs(store);
2727
2828
async function getConversation(conversationId: string) {
2929
await store.loadConversation(conversationId);
3030
31-
return store.conversationData.data;
31+
return conversationData.value.data;
3232
}
3333
3434
class SagaInvocation {

‎src/Frontend/src/components/messages2/RetryMessageButton.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const isConfirmDialogVisible = ref(false);
1414
1515
const failureStatus = computed(() => state.value.data.failure_status);
1616
const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
17-
const isVisible = computed(() => store.edit_and_retry_config.enabled && state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
17+
const isVisible = computed(() => state.value.data.status !== MessageStatus.Successful && state.value.data.status !== MessageStatus.ResolvedSuccessfully);
1818
1919
const handleConfirm = async () => {
2020
isConfirmDialogVisible.value = false;

‎src/Frontend/src/stores/MessageStore.ts

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { acceptHMRUpdate, defineStore } from "pinia";
2-
import { reactive, ref } from "vue";
1+
import { acceptHMRUpdate, defineStore, storeToRefs } from "pinia";
2+
import { computed, reactive, ref } from "vue";
33
import Header from "@/resources/Header";
44
import type EndpointDetails from "@/resources/EndpointDetails";
55
import FailedMessage, { ExceptionDetails, FailedMessageStatus } from "@/resources/FailedMessage";
@@ -75,8 +75,12 @@ export const useMessageStore = defineStore("MessageStore", () => {
7575
const editRetryStore = useEditRetryStore();
7676
const configStore = useConfigurationStore();
7777

78-
editRetryStore.loadConfig();
79-
configStore.loadConfig();
78+
const { config: edit_and_retry_config } = storeToRefs(editRetryStore);
79+
const { configuration } = storeToRefs(configStore);
80+
const error_retention_period = computed(() => moment.duration(configuration.value?.data_retention?.error_retention_period).asHours());
81+
82+
// eslint-disable-next-line promise/catch-or-return,promise/prefer-await-to-then,promise/valid-params
83+
Promise.all([editRetryStore.loadConfig(), configStore.loadConfig()]).then();
8084

8185
function reset() {
8286
state.data = { failure_metadata: {}, failure_status: {}, dialog_status: {}, invoked_saga: {} };
@@ -126,7 +130,7 @@ export const useMessageStore = defineStore("MessageStore", () => {
126130
state.loading = false;
127131
}
128132

129-
const countdown = moment(state.data.failure_metadata.last_modified).add(error_retention_period, "hours");
133+
const countdown = moment(state.data.failure_metadata.last_modified).add(error_retention_period.value, "hours");
130134
state.data.failure_status.delete_soon = countdown < moment();
131135
state.data.failure_metadata.deleted_in = countdown.format();
132136
}
@@ -298,13 +302,11 @@ export const useMessageStore = defineStore("MessageStore", () => {
298302
return exportString;
299303
}
300304

301-
const error_retention_period = moment.duration(configStore.configuration?.data_retention?.error_retention_period).asHours();
302-
303305
return {
304306
headers,
305307
body,
306308
state,
307-
edit_and_retry_config: editRetryStore.config,
309+
edit_and_retry_config,
308310
reset,
309311
loadMessage,
310312
loadFailedMessage,

‎src/Frontend/src/stores/SequenceDiagramStore.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const Endpoint_Width = 260;
2727

2828
export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () => {
2929
const messageStore = useMessageStore();
30-
const { state } = storeToRefs(messageStore);
30+
const { state, conversationData } = storeToRefs(messageStore);
3131
const router = useRouter();
3232

3333
const startX = ref(Endpoint_Width / 2);
@@ -43,11 +43,11 @@ export const useSequenceDiagramStore = defineStore("SequenceDiagramStore", () =>
4343
const selectedId = computed(() => `${state.value.data.message_type ?? ""}(${state.value.data.id})`);
4444

4545
watch(
46-
() => messageStore.conversationData.data,
46+
() => conversationData,
4747
(conversationData) => {
48-
if (conversationData.length) {
48+
if (conversationData.value.data.length) {
4949
startX.value = Endpoint_Width / 2;
50-
const model = new ModelCreator(conversationData);
50+
const model = new ModelCreator(conversationData.value.data);
5151
endpoints.value = model.endpoints;
5252
handlers.value = model.handlers;
5353
routes.value = model.routes;

0 commit comments

Comments
 (0)