DEV: Fix flaky table builder system spec (#25272)

Why this change?

The `Table Builder when editing a table when cancelling table creation should close the modal if there are no changes made` system
test in `spec/system/table_builder_spec.rb` was flaky. It turns out that
when the modal is opened, we have to load some JS/CSS files. While that
is happening, the modal is actually not functional and clicking stuff
in the footer can actually result in an error. In this case, the
`interceptCloseModal` calls the private `_hasChanges` function which
then calls `this.spreadsheet.getHeaders()`. When stuff is still loading,
`this.spreadsheet` has not been set. As a result we get the following
error:

```
Cannot read properties of null (reading 'getHeaders')
```

What does this change do?

Why stuff is loading, we will now hide the footer in the modal.
This commit is contained in:
Alan Guo Xiang Tan 2024-01-16 10:48:49 +08:00 committed by GitHub
parent c33a8d658b
commit 7b907ec50a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 49 deletions

View File

@ -328,58 +328,61 @@ export default class SpreadsheetEditor extends Component {
</:body> </:body>
<:footer> <:footer>
<div class="primary-actions"> {{#unless this.loading}}
<DButton <div class="primary-actions">
@label={{this.modalAttributes.insertTable.title}} <DButton
@icon={{this.modalAttributes.insertTable.icon}} @label={{this.modalAttributes.insertTable.title}}
@action={{this.insertTable}} @icon={{this.modalAttributes.insertTable.icon}}
class="btn-insert-table" @action={{this.insertTable}}
/> class="btn-insert-table"
/>
<DModalCancel @close={{this.interceptCloseModal}} /> <DModalCancel @close={{this.interceptCloseModal}} />
</div> </div>
<div class="secondary-actions"> <div class="secondary-actions">
{{#if this.isEditingTable}} {{#if this.isEditingTable}}
<div class="edit-reason"> <div class="edit-reason">
<DButton <DButton
@icon="info-circle" @icon="info-circle"
@title="table_builder.edit.modal.trigger_reason" @title="table_builder.edit.modal.trigger_reason"
@action={{this.showEditReasonField}} @action={{this.showEditReasonField}}
class="btn-edit-reason" class="btn-edit-reason"
/>
{{#if this.showEditReason}}
<TextField
@value={{this.editReason}}
@placeholderKey="table_builder.edit.modal.reason"
/> />
{{/if}} {{#if this.showEditReason}}
</div> <TextField
{{/if}} @value={{this.editReason}}
<DTooltip @placeholderKey="table_builder.edit.modal.reason"
@icon="question" />
@triggers="click" {{/if}}
@arrow={{false}} </div>
class="btn btn-icon no-text" {{/if}}
> <DTooltip
<ul> @icon="question"
<h4>{{i18n "table_builder.modal.help.title"}}</h4> @triggers="click"
<li> @arrow={{false}}
<kbd> class="btn btn-icon no-text"
{{i18n "table_builder.modal.help.enter_key"}} >
</kbd> <ul>
{{i18n "table_builder.modal.help.new_row"}} <h4>{{i18n "table_builder.modal.help.title"}}</h4>
</li> <li>
<li> <kbd>
<kbd> {{i18n "table_builder.modal.help.enter_key"}}
{{i18n "table_builder.modal.help.tab_key"}} </kbd>
</kbd> {{i18n "table_builder.modal.help.new_row"}}
{{i18n "table_builder.modal.help.new_col"}} </li>
</li> <li>
<li>{{i18n "table_builder.modal.help.options"}}</li> <kbd>
</ul> {{i18n "table_builder.modal.help.tab_key"}}
</DTooltip> </kbd>
</div> {{i18n "table_builder.modal.help.new_col"}}
</li>
<li>{{i18n "table_builder.modal.help.options"}}</li>
</ul>
</DTooltip>
</div>
{{/unless}}
</:footer> </:footer>
</DModal> </DModal>
</template> </template>