Skip to content

Commit 5b1c6b0

Browse files
johnsimonsjohnsimons
authored
Merge pull request #2365 from Particular/john/editandreplay
Fix reset original body
2 parents 72bb2a5 + 648cacf commit 5b1c6b0

File tree

7 files changed

+60
-49
lines changed

7 files changed

+60
-49
lines changed

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,12 @@ const extensions = computed(() => {
5151

5252
<template>
5353
<div class="wrapper" :aria-label="ariaLabel" :class="css">
54-
<div v-if="props.showCopyToClipboard" class="toolbar">
55-
<CopyToClipboard :value="code" />
54+
<div v-if="props.showCopyToClipboard || $slots.toolbarLeft || $slots.toolbarRight" class="toolbar">
55+
<div><slot name="toolbarLeft"></slot></div>
56+
<div>
57+
<slot name="toolbarRight"></slot>
58+
<CopyToClipboard class="clipboard" v-if="props.showCopyToClipboard" :value="code" />
59+
</div>
5660
</div>
5761
<CodeMirror v-model="code" :extensions="extensions" :basic="props.showGutter" :minimal="!props.showGutter" :readonly="props.readOnly" :gutter="!props.readOnly" :wrap="true"></CodeMirror>
5862
</div>
@@ -76,6 +80,10 @@ const extensions = computed(() => {
7680
margin-bottom: 0.5rem;
7781
display: flex;
7882
flex-direction: row;
79-
justify-content: end;
83+
justify-content: space-between;
84+
align-items: center;
85+
}
86+
.clipboard {
87+
margin-left: 0.5rem;
8088
}
8189
</style>

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

Lines changed: 30 additions & 29 deletions
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,32 @@ 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);
57+
const uneditedMessageBody = computed(() => body.value.data.value ?? "");
58+
const regExToPruneLineEndings = new RegExp(/[\n\r]*/, "g");
59+
const debounceBodyUpdate = debounce((value: string) => {
60+
const newValue = value.replaceAll(regExToPruneLineEndings, "");
61+
localMessage.value.isBodyChanged = newValue !== uneditedMessageBody.value.replaceAll(regExToPruneLineEndings, "");
62+
localMessage.value.isBodyEmpty = newValue === "";
63+
}, 100);
5964
60-
watch(messageBody, (newValue) => {
61-
if (newValue !== origMessageBody) {
62-
localMessage.value.isBodyChanged = true;
65+
watch(
66+
() => localMessage.value.messageBody,
67+
(newValue) => {
68+
debounceBodyUpdate(newValue);
6369
}
64-
localMessage.value.isBodyEmpty = newValue === "";
65-
});
70+
);
6671
6772
function close() {
6873
emit("cancel");
@@ -87,7 +92,7 @@ function confirmCancel() {
8792
}
8893
8994
function resetBodyChanges() {
90-
localMessage.value.messageBody = origMessageBody;
95+
localMessage.value.messageBody = uneditedMessageBody.value;
9196
localMessage.value.isBodyChanged = false;
9297
}
9398
@@ -113,7 +118,6 @@ function initializeMessageBodyAndHeaders() {
113118
return header?.value;
114119
}
115120
116-
origMessageBody = body.value.data.value ?? "";
117121
const local = <LocalMessageState>{
118122
isBodyChanged: false,
119123
isBodyEmpty: false,
@@ -211,15 +215,22 @@ onMounted(() => {
211215
</tr>
212216
</tbody>
213217
</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>
218+
<template v-if="panel === 2">
219+
<div role="tabpanel" v-if="!localMessage.bodyUnavailable">
220+
<div style="margin-top: 1.25rem">
221+
<LoadingSpinner v-if="body.loading" />
222+
<CodeEditor v-else aria-label="message body" :read-only="!localMessage.isContentTypeSupported" v-model="localMessage.messageBody" :language="localMessage.language" :show-gutter="true">
223+
<template #toolbarLeft>
224+
<span class="empty-error" v-if="localMessage.isBodyEmpty"><i class="fa fa-exclamation-triangle"></i> Message body cannot be empty</span>
225+
</template>
226+
<template #toolbarRight>
227+
<button v-if="localMessage.isBodyChanged" type="button" class="btn btn-secondary btn-sm" @click="resetBodyChanges"><i class="fa fa-undo"></i> Reset changes</button>
228+
</template>
229+
</CodeEditor>
230+
</div>
218231
</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>
232+
<div role="tabpanel" class="alert alert-info" v-else>{{ localMessage.bodyUnavailable }}</div>
233+
</template>
223234
</div>
224235
</div>
225236
</div>
@@ -267,14 +278,6 @@ onMounted(() => {
267278
margin-right: 20px;
268279
}
269280
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-
278281
.modal-msg-editor .reset-body a:hover {
279282
cursor: pointer;
280283
}
@@ -284,8 +287,6 @@ onMounted(() => {
284287
}
285288
286289
.modal-msg-editor .empty-error {
287-
float: right;
288-
margin-top: 15px;
289290
color: #ce4844;
290291
font-weight: bold;
291292
}

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

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 10 additions & 8 deletions
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‎

Lines changed: 4 additions & 4 deletions
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)