Refactor mutation to return errors instead of raising runtime Error

webapp/app/helpers/field-error.ts

@@ -0,0 +1,11 @@
+import {helper} from '@ember/component/helper';
+
+interface Error {
+  field: String;
+}
+
+const fieldError = ([errors, fieldName]: [[Error], string]): boolean => {
+  return !!(errors && errors.find(({field}) => field === fieldName)) || false;
+};
+
+export default helper(fieldError);

webapp/app/pods/components/conflicts-list/item/component.ts

@@ -4,12 +4,13 @@ import Component from '@glimmer/component';
 import parsedKeyProperty from 'accent-webapp/computed-macros/parsed-key';
 import {dropTask} from 'ember-concurrency-decorators';
 import {tracked} from '@glimmer/tracking';
+import {MutationResponse} from 'accent-webapp/services/apollo-mutate';
 
 interface Args {
   permissions: Record<string, true>;
   project: any;
   conflict: any;
-  onCorrect: (conflict: any, textInput: string) => Promise<void>;
+  onCorrect: (conflict: any, textInput: string) => Promise<MutationResponse>;
   onCopyTranslation: (
     text: string,
     sourceLanguageSlug: string,
@@ -80,11 +81,15 @@ export default class ConflictItem extends Component<Args> {
   async correct() {
     this.onLoading();
 
-    try {
-      await this.args.onCorrect(this.args.conflict, this.textInput);
-      this.onCorrectSuccess();
-    } catch (error) {
+    const response = await this.args.onCorrect(
+      this.args.conflict,
+      this.textInput
+    );
+
+    if (response.errors) {
       this.onError();
+    } else {
+      this.onCorrectSuccess();
     }
   }
 

webapp/app/pods/components/dashboard-revisions/item/component.ts

@@ -59,6 +59,10 @@ export default class DashboardRevisionsItem extends Component<Args> {
     return translationsCount - conflictsCount;
   }
 
+  get languageName() {
+    return this.args.revision.name || this.args.revision.language.name;
+  }
+
   @action
   toggleShowActions() {
     this.showActions = !this.showActions;

webapp/app/pods/components/dashboard-revisions/item/template.hbs

@@ -10,15 +10,15 @@
           @models={{array @project.id @revision.id}}
           local-class="language-name"
         >
-          {{@revision.language.name}}
+          {{this.languageName}}
           <span local-class="language-reviewedPercentage">
             {{this.correctedKeysPercentage}}
             %
           </span>
         </LinkTo>
       {{else}}
         <span local-class="language-name">
-          {{@revision.language.name}}
+          {{this.languageName}}
           <span local-class="language-reviewedPercentage">
             {{this.correctedKeysPercentage}}
             %

webapp/app/pods/components/project-settings/collaborators/create-form/component.ts

@@ -50,6 +50,8 @@ export default class CreateForm extends Component<Args> {
 
   @dropTask
   *submitTask() {
+    if (!this.email || !this.role) return;
+
     this.isCreating = true;
 
     yield this.args.onCreate({email: this.email, role: this.role});

webapp/app/pods/components/project-settings/integrations/component.ts

@@ -21,10 +21,10 @@ export default class Integrations extends Component<Args> {
 
   @action
   async create(args: any) {
-    const {errors} = await this.args.onCreateIntegration(args);
+    const response = await this.args.onCreateIntegration(args);
 
-    this.showCreateForm = errors && errors.length > 0;
+    this.showCreateForm = response.errors?.length > 0;
 
-    return {errors};
+    return response;
   }
 }

webapp/app/pods/components/project-settings/integrations/form/component.ts

@@ -63,7 +63,7 @@ export default class IntegrationsForm extends Component<Args> {
   token: string;
 
   @tracked
-  defaultRef: string;
+  defaultRef: string = 'main';
 
   services = ['SLACK', 'GITHUB', 'DISCORD'];
 
@@ -107,10 +107,10 @@ export default class IntegrationsForm extends Component<Args> {
         service: this.services[0],
         events: [],
         data: {
-          url: '',
-          repository: '',
-          token: '',
-          defaultRef: '',
+          url: this.url,
+          repository: this.repository,
+          token: this.token,
+          defaultRef: this.defaultRef,
         },
       };
     }
@@ -176,9 +176,8 @@ export default class IntegrationsForm extends Component<Args> {
     });
 
     this.isSubmiting = false;
+    this.errors = response.errors;
 
-    if (response.errors && response.errors.length > 0) {
-      this.errors = response.errors;
-    }
+    return response;
   }
 }

webapp/app/pods/components/project-settings/integrations/form/discord/component.ts

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
-import fieldError from 'accent-webapp/computed-macros/field-error';
 
 interface Args {
   repository: any;
@@ -18,8 +17,6 @@ interface Args {
 }
 
 export default class Discord extends Component<Args> {
-  urlError = fieldError(this.args.errors, this.args.url);
-
   @action
   changeUrl(event: Event) {
     const target = event.target as HTMLInputElement;

webapp/app/pods/components/project-settings/integrations/form/discord/template.hbs

@@ -1,5 +1,5 @@
 <ProjectSettings::Integrations::Form::DataControlText
-  @error={{this.urlError}}
+  @error={{field-error @errors "data.url"}}
   @label={{t "components.project_settings.integrations.data.url"}}
   @placeholder={{"https://discordapp.com/api/webhooks/aaaa/bbbb/cccc"}}
   @value={{@url}}

webapp/app/pods/components/project-settings/integrations/form/github/component.ts

@@ -1,7 +1,6 @@
 import fmt from 'simple-fmt';
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
-import fieldError from 'accent-webapp/computed-macros/field-error';
 import config from 'accent-webapp/config/environment';
 
 interface Args {
@@ -20,10 +19,6 @@ interface Args {
 }
 
 export default class GitHub extends Component<Args> {
-  tokenError = fieldError(this.args.errors, this.args.token);
-  repositoryError = fieldError(this.args.errors, this.args.repository);
-  defaultRefError = fieldError(this.args.errors, this.args.defaultRef);
-
   get webhookUrl() {
     if (!this.args.project.accessToken) return;
     const host = window.location.origin;

webapp/app/pods/components/project-settings/integrations/form/github/template.hbs

@@ -1,13 +1,13 @@
 <ProjectSettings::Integrations::Form::DataControlText
-  @error={{this.repositoryError}}
+  @error={{field-error @errors "data.repository"}}
   @label={{t "components.project_settings.integrations.data.repository"}}
   @placeholder="mirego/accent"
   @value={{@repository}}
   @onChange={{this.changeRepository}}
 />
 
 <ProjectSettings::Integrations::Form::DataControlText
-  @error={{this.tokenError}}
+  @error={{field-error @errors "data.token"}}
   @label={{t "components.project_settings.integrations.data.token"}}
   @placeholder="aaaa-bbbb-cccc"
   @value={{@token}}
@@ -17,9 +17,8 @@
 />
 
 <ProjectSettings::Integrations::Form::DataControlText
-  @error={{this.defaultRefError}}
+  @error={{field-error @errors "data.defaultRef"}}
   @label={{t "components.project_settings.integrations.data.default_ref"}}
-  @placeholder="master"
   @value={{@defaultRef}}
   @onChange={{this.changeDefaultRef}}
 />

webapp/app/pods/components/project-settings/integrations/form/slack/component.ts

@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
-import fieldError from 'accent-webapp/computed-macros/field-error';
 
 interface Args {
   repository: any;
@@ -18,8 +17,6 @@ interface Args {
 }
 
 export default class Slack extends Component<Args> {
-  urlError = fieldError(this.args.errors, this.args.url);
-
   @action
   changeUrl(event: Event) {
     const target = event.target as HTMLInputElement;

webapp/app/pods/components/project-settings/integrations/form/slack/template.hbs

@@ -1,5 +1,5 @@
 <ProjectSettings::Integrations::Form::DataControlText
-  @error={{this.urlError}}
+  @error={{field-error @errors "data.url"}}
   @label={{t "components.project_settings.integrations.data.url"}}
   @placeholder={{"https://hooks.slack.com/services/aaaa/bbbb/cccc"}}
   @value={{@url}}

webapp/app/pods/components/project-settings/integrations/form/styles.scss

@@ -27,7 +27,23 @@
   text-align: right;
 }
 
+.readonly-service {
+  display: flex;
+  align-items: center;
+  margin-top: 3px;
+
+  .logo {
+    margin-right: 8px;
+  }
+}
+
 .logo {
   width: 20px;
+  height: 20px;
   margin-right: 10px;
 }
+
+.logo-label {
+  font-weight: bold;
+  font-size: 13px;
+}

webapp/app/pods/components/project-settings/integrations/form/template.hbs

@@ -6,16 +6,23 @@
   local-class="project-settings-integrations-form"
 >
   {{#if this.integration}}
-    <div local-class="form">
-      {{inline-svg this.logoService local-class="logo"}}
-      <AccSelect
-        @searchEnabled={{false}}
-        @selected={{this.serviceValue}}
-        @renderInPlace={{true}}
-        @options={{this.mappedServices}}
-        @onchange={{fn this.setService}}
-      />
-    </div>
+    {{#if this.integration.id}}
+      <div local-class="form readonly-service">
+        {{inline-svg this.logoService local-class="logo"}}
+        <span local-class="logo-label">{{this.serviceValue.label}}</span>
+      </div>
+    {{else}}
+      <div local-class="form">
+        {{inline-svg this.logoService local-class="logo"}}
+        <AccSelect
+          @searchEnabled={{false}}
+          @selected={{this.serviceValue}}
+          @renderInPlace={{true}}
+          @options={{this.mappedServices}}
+          @onchange={{fn this.setService}}
+        />
+      </div>
+    {{/if}}
 
     <div local-class="data">
       {{component
@@ -52,4 +59,3 @@
     </div>
   {{/if}}
 </div>
-

webapp/app/pods/components/project-settings/integrations/list/item/component.ts

@@ -1,7 +1,5 @@
-import {inject as service} from '@ember/service';
 import {action} from '@ember/object';
 import Component from '@glimmer/component';
-import IntlService from 'ember-intl/services/intl';
 import {tracked} from '@glimmer/tracking';
 
 const LOGOS = {
@@ -19,9 +17,6 @@ interface Args {
 }
 
 export default class IntegrationsListItem extends Component<Args> {
-  @service('intl')
-  intl: IntlService;
-
   @tracked
   errors = [];
 
@@ -37,10 +32,8 @@ export default class IntegrationsListItem extends Component<Args> {
     return LOGOS[service];
   }
 
-  get mappedService() {
-    return this.intl.t(
-      `general.integration_services.${this.args.integration.service}`
-    );
+  get mappedServiceTranslationKey() {
+    return `general.integration_services.${this.args.integration.service}`;
   }
 
   @action
@@ -51,19 +44,23 @@ export default class IntegrationsListItem extends Component<Args> {
 
   @action
   async update(args: any) {
-    const {errors} = await this.args.onUpdate(args);
+    const response = await this.args.onUpdate(args);
+
+    this.errors = response.errors;
+    this.isEditing = response.errors?.length;
 
-    this.errors = errors;
-    this.isEditing = errors && errors.length > 0;
+    return response;
   }
 
   @action
   async delete() {
     this.isDeleting = true;
 
-    const {errors} = await this.args.onDelete({id: this.args.integration.id});
+    const response = await this.args.onDelete({id: this.args.integration.id});
+
+    this.errors = response.errors;
+    this.isDeleting = response.errors?.length;
 
-    this.errors = errors;
-    this.isDeleting = errors && errors.length > 0;
+    return response;
   }
 }

webapp/app/pods/components/project-settings/integrations/list/item/template.hbs

@@ -12,7 +12,7 @@
       <div local-class="details-info">
         {{inline-svg this.logoService local-class="details-logo"}}
         <span local-class="details-service">
-          {{this.mappedService}}
+          {{t this.mappedServiceTranslationKey}}
         </span>
 
         <span local-class="details-preview">

webapp/app/pods/components/revision-export-options/component.ts

@@ -90,8 +90,16 @@ export default class RevisionExportOptions extends Component<Args> {
     if (!this.args.revisions) return [];
 
     return this.args.revisions.map(
-      ({id, language}: {id: string; language: any}) => ({
-        label: language.name,
+      ({
+        id,
+        name,
+        language,
+      }: {
+        id: string;
+        name: string | null;
+        language: any;
+      }) => ({
+        label: name || language.name,
         value: id,
       })
     );