fix(integration): add ability to edit common fields

close #1434

src/modules/settings/integrations/components/common/CommonFieldForm.tsx

@@ -0,0 +1,87 @@
+import Button from 'modules/common/components/Button';
+import FormControl from 'modules/common/components/form/Control';
+import FormGroup from 'modules/common/components/form/Group';
+import ControlLabel from 'modules/common/components/form/Label';
+import { ModalFooter } from 'modules/common/styles/main';
+import { __ } from 'modules/common/utils';
+import React from 'react';
+import SelectBrand from '../../containers/SelectBrand';
+
+type Props = {
+  integrationId: string;
+  name: string;
+  brandId: string;
+  onSubmit: (
+    id: string,
+    { name, brandId }: { name: string; brandId: string }
+  ) => void;
+  closeModal: () => void;
+};
+
+type State = {
+  name: string;
+  brandId: string;
+};
+
+class CommonFieldForm extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      name: props.name || '',
+      brandId: props.brandId || ''
+    };
+  }
+
+  render() {
+    const { integrationId, onSubmit, closeModal } = this.props;
+    const { name, brandId } = this.state;
+
+    const onBrandChange = e => {
+      this.setState({ brandId: e.target.value });
+    };
+
+    const onNameBlur = e => {
+      this.setState({ name: e.target.value });
+    };
+
+    const saveIntegration = e => {
+      e.preventDefault();
+
+      onSubmit(integrationId, { name, brandId });
+      closeModal();
+    };
+
+    return (
+      <>
+        <FormGroup>
+          <ControlLabel required={true}>{__('Name')}</ControlLabel>
+          <FormControl
+            required={true}
+            defaultValue={name}
+            onBlur={onNameBlur}
+            autoFocus={true}
+          />
+        </FormGroup>
+
+        <SelectBrand
+          isRequired={true}
+          defaultValue={brandId}
+          onChange={onBrandChange}
+        />
+        <ModalFooter>
+          <Button
+            onClick={saveIntegration}
+            type="submit"
+            btnStyle="success"
+            icon="checked-1"
+          >
+            {__('Save')}
+          </Button>
+        </ModalFooter>
+      </>
+    );
+  }
+}
+
+export default CommonFieldForm;

src/modules/settings/integrations/components/common/IntegrationList.tsx

@@ -9,18 +9,28 @@ type Props = {
   integrations: IIntegration[];
   removeIntegration: (integration: IIntegration, callback?: any) => void;
   archive: (id: string) => void;
+  editIntegration: (
+    id: string,
+    { name, brandId }: { name: string; brandId: string }
+  ) => void;
 };
 
 class IntegrationList extends React.Component<Props> {
   renderRows() {
-    const { integrations, removeIntegration, archive } = this.props;
+    const {
+      integrations,
+      removeIntegration,
+      archive,
+      editIntegration
+    } = this.props;
 
     return integrations.map(i => (
       <IntegrationListItem
         key={i._id}
         integration={i}
         removeIntegration={removeIntegration}
         archive={archive}
+        editIntegration={editIntegration}
       />
     ));
   }

src/modules/settings/integrations/components/common/IntegrationListItem.tsx

@@ -11,11 +11,16 @@ import { KIND_CHOICES } from 'modules/settings/integrations/constants';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { IIntegration } from '../../types';
+import CommonFieldForm from './CommonFieldForm';
 
 type Props = {
   integration: IIntegration;
   archive: (id: string) => void;
   removeIntegration: (integration: IIntegration) => void;
+  editIntegration: (
+    id: string,
+    { name, brandId }: { name: string; brandId: string }
+  ) => void;
 };
 
 class IntegrationListItem extends React.Component<Props> {
@@ -91,6 +96,42 @@ class IntegrationListItem extends React.Component<Props> {
     );
   }
 
+  renderEditAction() {
+    const { integration, editIntegration } = this.props;
+
+    if (integration.kind === KIND_CHOICES.MESSENGER) {
+      return null;
+    }
+
+    const editTrigger = (
+      <Button btnStyle="link">
+        <Tip text="Edit">
+          <Icon icon="edit" />
+        </Tip>
+      </Button>
+    );
+
+    const content = props => (
+      <CommonFieldForm
+        {...props}
+        onSubmit={editIntegration}
+        name={integration.name}
+        brandId={integration.brandId}
+        integrationId={integration._id}
+      />
+    );
+
+    return (
+      <ActionButtons>
+        <ModalTrigger
+          title="Edit integration"
+          trigger={editTrigger}
+          content={content}
+        />
+      </ActionButtons>
+    );
+  }
+
   renderMessengerActions(integration) {
     const kind = integration.kind;
 
@@ -163,6 +204,7 @@ class IntegrationListItem extends React.Component<Props> {
         <td>
           <ActionButtons>
             {this.renderMessengerActions(integration)}
+            {this.renderEditAction()}
             {this.renderArchiveAction()}
             {this.renderRemoveAction()}
           </ActionButtons>

src/modules/settings/integrations/containers/common/IntegrationList.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { compose, graphql } from 'react-apollo';
 import {
   ArchiveIntegrationResponse,
+  CommonFieldsEditResponse,
   IntegrationsQueryResponse,
   RemoveMutationResponse
 } from '../../types';
@@ -22,10 +23,16 @@ type FinalProps = {
   integrationsQuery: IntegrationsQueryResponse;
 } & Props &
   RemoveMutationResponse &
-  ArchiveIntegrationResponse;
+  ArchiveIntegrationResponse &
+  CommonFieldsEditResponse;
 
 const IntegrationListContainer = (props: FinalProps) => {
-  const { integrationsQuery, removeMutation, archiveIntegration } = props;
+  const {
+    integrationsQuery,
+    removeMutation,
+    archiveIntegration,
+    editCommonFields
+  } = props;
 
   if (integrationsQuery.loading) {
     return <Spinner objective={true} />;
@@ -70,18 +77,42 @@ const IntegrationListContainer = (props: FinalProps) => {
             Alert.success('Integration has been archived.');
           }
         })
-        .catch(error => {
+        .catch((error: Error) => {
           Alert.error(error.message);
         });
     });
   };
 
+  const editIntegration = (
+    id: string,
+    { name, brandId }: { name: string; brandId: string }
+  ) => {
+    if (!name && !brandId) {
+      Alert.error('Name and brand must be chosen');
+
+      return;
+    }
+
+    editCommonFields({ variables: { _id: id, name, brandId } })
+      .then(({ data }) => {
+        const result = data.integrationsEditCommonFields;
+
+        if (result && result._id) {
+          Alert.success('Integration has been edited.');
+        }
+      })
+      .catch((error: Error) => {
+        Alert.error(error.message);
+      });
+  };
+
   const updatedProps = {
     ...props,
     integrations,
     removeIntegration,
     loading: integrationsQuery.loading,
-    archive
+    archive,
+    editIntegration
   };
 
   return <IntegrationList {...updatedProps} />;
@@ -137,6 +168,13 @@ export default withProps<Props>(
         name: 'archiveIntegration',
         options: mutationOptions
       }
+    ),
+    graphql<Props, CommonFieldsEditResponse>(
+      gql(mutations.integrationsEditCommonFields),
+      {
+        name: 'editCommonFields',
+        options: mutationOptions
+      }
     )
   )(IntegrationListContainer)
 );

src/modules/settings/integrations/graphql/mutations.ts

@@ -76,6 +76,14 @@ const integrationsCreateExternalIntegration = `
   }
 `;
 
+const integrationsEditCommonFields = `
+  mutation integrationsEditCommonFields($_id: String!, $name: String!, $brandId: String!) {
+    integrationsEditCommonFields(_id: $_id, name: $name, brandId: $brandId) {
+      _id
+    }
+  }
+`;
+
 const integrationsEditMessenger = `
   mutation integrationsEditMessengerIntegration($_id: String!, ${commonParamsDef}) {
     integrationsEditMessengerIntegration(_id: $_id, ${commonParams}) {
@@ -211,6 +219,7 @@ export default {
   integrationsArchive,
   integrationsCreateMessenger,
   integrationsCreateExternalIntegration,
+  integrationsEditCommonFields,
   integrationsEditMessenger,
   integrationsSaveMessengerConfigs,
   integrationsSaveMessengerAppearance,

src/modules/settings/integrations/types.ts

@@ -352,3 +352,9 @@ export type MessengerAppsRemoveMutationResponse = {
 export type ArchiveIntegrationResponse = {
   archiveIntegration: (params: { variables: { _id: string } }) => Promise<any>;
 };
+
+export type CommonFieldsEditResponse = {
+  editCommonFields: (
+    params: { variables: { _id: string; name: string; brandId: string } }
+  ) => Promise<any>;
+};