[#1605] Fix Tags Flow

frontend/ui/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx

@@ -41,9 +41,7 @@ const ConversationMetadata = (props: ConnectedProps<typeof connector>) => {
   const [tagName, setTagName] = useState('');
 
   useEffect(() => {
-    if (tags.length == 0) {
-      listTags();
-    }
+    listTags();
   }, []);
 
   const showAddTags = () => {
@@ -117,9 +115,9 @@ const ConversationMetadata = (props: ConnectedProps<typeof connector>) => {
     return (
       <Dialog close={() => setShowTagsDialog(false)}>
         <form className={styles.addTags} onSubmit={submitForm}>
-          <div className={styles.addTagHeadline}>Add a tag</div>
           <Input
             type="text"
+            label="Add a tag"
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setTagName(e.target.value);
             }}
@@ -129,7 +127,7 @@ const ConversationMetadata = (props: ConnectedProps<typeof connector>) => {
             placeholder="Please enter a tag name"
             autoComplete="off"
             autoFocus
-            fontClass="font-s"
+            fontClass="font-base"
             minLength={1}
             maxLength={50}
             validation={checkIfExists}
@@ -149,9 +147,7 @@ const ConversationMetadata = (props: ConnectedProps<typeof connector>) => {
             })
           ) : (
             <div>
-              <div>
-                <Tag tag={{id: '', color: color, name: tagName}} />
-              </div>
+              {tagName.length > 0 && <Tag tag={{id: '', color: color, name: tagName}} />}
               <p className={styles.addTagsDescription}>Pick a color</p>
               <ColorSelector
                 handleUpdate={(e: React.ChangeEvent<HTMLInputElement>) => setColor(e.target.value as TagColor)}

frontend/ui/src/pages/Tags/EmptyStateTags.tsx

@@ -1,21 +1,20 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {Button} from 'components';
 import {ReactComponent as EmptyImage} from 'assets/images/empty-state/tags-empty-state.svg';
-
-import SimpleTagForm from './SimpleTagForm';
 import styles from './EmptyStateTags.module.scss';
 
-const EmptyStateTags: React.FC = (): JSX.Element => {
-  const [show, setShow] = useState(false);
+interface EmptyStateTagsProps {
+  removeEmptyState(): void;
+}
 
+const EmptyStateTags = (props: EmptyStateTagsProps) => {
   return (
     <div className={styles.cardRaised}>
       <div className={styles.emptyStateTitle}>
         <h1>You don&#39;t have tags yet.</h1>
         <p>Tags provide a useful way to group related conversations together and to quickly filter and search them.</p>
         <EmptyImage />
-        <Button onClick={() => setShow(true)}>Create a Tag</Button>
-        {show && <SimpleTagForm onClose={() => setShow(false)} />}
+        <Button onClick={props.removeEmptyState}>Create a Tag</Button>
       </div>
     </div>
   );

frontend/ui/src/pages/Tags/SimpleTagForm.tsx

@@ -26,6 +26,7 @@ const SimpleTagForm = ({errorMessage, createTag, errorTag, onClose, tags}: Simpl
   const [name, setName] = useState('');
   const [color, setColor] = useState<TagColor>('tag-blue');
   const [showError, setShowError] = useState(true);
+
   const handleCreate = () => {
     if (name.trim().length) {
       createTag({name: name.trim(), color}).then((success: boolean) => {
@@ -51,10 +52,10 @@ const SimpleTagForm = ({errorMessage, createTag, errorTag, onClose, tags}: Simpl
   };
 
   return (
-    <DialogCustomizable close={onClose} style={tags.length ? {right: 0, top: '32px'} : {top: '200px'}}>
+    <DialogCustomizable close={onClose} style={tags.length ? {right: 0, top: '32px'} : {top: '50px', right: '0px'}}>
       <div className={styles.tagCreate}>
-        <h4 className={styles.headline}>Add a tag</h4>
         <Input
+          label="Add a tag"
           type="text"
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setName(e.target.value);
@@ -67,7 +68,8 @@ const SimpleTagForm = ({errorMessage, createTag, errorTag, onClose, tags}: Simpl
           placeholder="Please enter a tag name"
           autoComplete="off"
           autoFocus={true}
-          fontClass="font-m"
+          fontClass="font-base"
+          minLength={1}
           maxLength={50}
         />
         <p className={styles.errorMessage}>{(!name.length || showError) && errorMessage}</p>

frontend/ui/src/pages/Tags/TableRow.module.scss

@@ -20,6 +20,7 @@
   border-radius: 50%;
   line-height: 44px;
   margin-top: 6px;
+  margin-left: 12px;
 }
 
 .editInput {
@@ -57,8 +58,8 @@
 }
 
 .actionSVG {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 18px;
   path {
     fill: var(--color-dark-elements-gray);
   }
@@ -69,7 +70,13 @@
   }
 }
 
+.actionSVGEdit {
+  @extend .actionSVG;
+  height: 24px;
+}
+
 .actionButton {
+  outline: none;
   cursor: pointer;
   border: none;
   background: none;

frontend/ui/src/pages/Tags/TableRow.tsx

@@ -1,16 +1,20 @@
 import React, {useState, useCallback} from 'react';
 import _, {connect, ConnectedProps} from 'react-redux';
 
-import styles from './TableRow.module.scss';
 import {updateTag} from '../../actions/tags';
+
 import {Button, LinkButton} from 'components';
-import {ReactComponent as EditIcon} from 'assets/images/icons/edit.svg';
-import {ReactComponent as TrashIcon} from 'assets/images/icons/trash.svg';
 import ColorSelector from '../../components/ColorSelector';
 import Tag from '../../components/Tag';
 import {Tag as TagModel, TagColor} from 'model';
 import {Settings} from '../../reducers/data/settings';
 import {StateModel} from '../../reducers';
+
+import {ReactComponent as EditPencilIcon} from 'assets/images/icons/edit-pencil.svg';
+import {ReactComponent as TrashIcon} from 'assets/images/icons/trash.svg';
+
+import styles from './TableRow.module.scss';
+
 import {cyTagsTableRowDisplayDeleteModal} from 'handles';
 
 type TableRowProps = {
@@ -135,7 +139,7 @@ const TableRowComponent = (props: TableRowProps) => {
       <td style={{width: '25%'}}>
         <div className={styles.actions}>
           <button type="button" className={styles.actionButton} onClick={() => setTagState({...tag, edit: true})}>
-            <EditIcon className={styles.actionSVG} title="Edit tag" />
+            <EditPencilIcon className={styles.actionSVGEdit} title="Edit tag" />
           </button>
           <button
             type="button"

frontend/ui/src/pages/Tags/index.module.scss

@@ -13,7 +13,7 @@
 .organizationSectionHeadline {
   @include font-l;
   font-weight: bold;
-  margin-bottom: 48px;
+  margin-bottom: 24px;
 }
 
 .organizationContainer {
@@ -91,13 +91,10 @@
 }
 
 .addButton {
+  @include font-base;
   display: flex;
-  flex-direction: row;
-  margin-left: 8px;
-  margin-top: 6px;
-  padding-top: 4px;
-  padding-bottom: 6px;
-  position: relative;
+  height: 38px;
+  align-items: center;
   color: var(--color-airy-blue);
   cursor: pointer;
   background: white;
@@ -112,11 +109,7 @@
   }
 
   .plusButton {
-    display: inherit;
     margin-left: 4px;
-    width: 12px;
-    position: relative;
-    top: 1px;
   }
 }
 
@@ -149,7 +142,7 @@
   @include font-m;
   font-weight: 700;
   text-align: left;
-  padding-bottom: 41px;
+  padding-bottom: 0px;
   padding-left: 2px;
 }
 

frontend/ui/src/pages/Tags/index.tsx

@@ -3,19 +3,23 @@ import _, {connect, ConnectedProps} from 'react-redux';
 
 import {SettingsModal, LinkButton, Button, SearchField, Input} from 'components';
 import {cyTagsSearchField, cyTagsTable} from 'handles';
+
 import {ReactComponent as Plus} from 'assets/images/icons/plus.svg';
 
 import {listTags, deleteTag, filterTags, errorTag} from '../../actions/tags';
 import {filteredTags} from '../../selectors/tags';
+
 import {Tag} from 'model';
 import {ModalType} from '../../types';
 
-import styles from './index.module.scss';
 import {TableRow} from './TableRow';
 import SimpleTagForm from './SimpleTagForm';
 import EmptyStateTags from './EmptyStateTags';
 import {StateModel} from '../../reducers';
 import {setPageTitle} from '../../services/pageTitle';
+
+import styles from './index.module.scss';
+
 import {cyTagsTableRowDisplayDeleteModalInput, cyTagsTableRowDisplayDeleteModalButton} from 'handles';
 
 const initialState = {
@@ -28,6 +32,7 @@ const initialState = {
   },
   tagQuery: '',
   createDrawer: false,
+  emptyState: true,
 };
 
 class Tags extends Component<ConnectedProps<typeof connector>, typeof initialState> {
@@ -65,6 +70,13 @@ class Tags extends Component<ConnectedProps<typeof connector>, typeof initialSta
     this.props.errorTag('');
   };
 
+  removeEmptyStateAndCreateTag = () => {
+    this.setState({
+      emptyState: false,
+    });
+    this.handleTagDrawer();
+  };
+
   keyPressed = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const code = e.keyCode || e.which;
     if (code === 13) {
@@ -210,7 +222,15 @@ class Tags extends Component<ConnectedProps<typeof connector>, typeof initialSta
 
   render() {
     const {allTagsCount} = this.props;
-    return <div className={styles.tagsWrapper}>{allTagsCount == 0 ? <EmptyStateTags /> : this.renderTagList()}</div>;
+    return (
+      <div className={styles.tagsWrapper}>
+        {allTagsCount == 0 && this.state.emptyState ? (
+          <EmptyStateTags removeEmptyState={this.removeEmptyStateAndCreateTag} />
+        ) : (
+          this.renderTagList()
+        )}
+      </div>
+    );
   }
 }
 

lib/typescript/httpclient/src/endpoints/createTag.ts

@@ -1,3 +1,17 @@
+import {Tag} from 'model';
+
+const tagMapper = {
+  BLUE: 'tag-blue',
+  RED: 'tag-red',
+  GREEN: 'tag-green',
+  PURPLE: 'tag-purple',
+};
+
 export const createTagDef = {
   endpoint: 'tags.create',
+  mapResponse: (response: Tag) => ({
+    id: response.id,
+    name: response.name,
+    color: tagMapper[response.color] || 'tag-blue',
+  }),
 };

lib/typescript/httpclient/src/endpoints/listConversations.ts

@@ -12,7 +12,7 @@ export const listConversationsDef = {
   },
   mapResponse: response => {
     const conversationData = (response as PaginatedPayload<any>).data.map(messagePayload => ({
-      ...camelcaseKeys(messagePayload, {deep: true, stopPaths: ['metadata.user_data']}),
+      ...camelcaseKeys(messagePayload, {deep: true, stopPaths: ['metadata.user_data', 'metadata.tags']}),
       createdAt: new Date(messagePayload.created_at),
       lastMessage: mapMessage(messagePayload.last_message),
     }));

lib/typescript/httpclient/src/endpoints/listTags.ts

@@ -1,3 +1,5 @@
+import {Tag} from 'model';
+
 const tagMapper = {
   BLUE: 'tag-blue',
   RED: 'tag-red',
@@ -7,5 +9,6 @@ const tagMapper = {
 
 export const listTagsDef = {
   endpoint: 'tags.list',
-  mapResponse: response => response.data.map(t => ({id: t.id, name: t.name, color: tagMapper[t.color] || 'tag-blue'})),
+  mapResponse: response =>
+    response.data.map((t: Tag) => ({id: t.id, name: t.name, color: tagMapper[t.color] || 'tag-blue'})),
 };