fix(nlu): view supports more intents and sections

modules/nlu/src/views/full/entities/SidePanelSection.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@blueprintjs/core'
+import { Button, Classes, Icon } from '@blueprintjs/core'
 import { NLUAPI } from 'api'
 import { NLU } from 'botpress/sdk'
 import { Item, ItemList, SearchBar, SectionAction, SidePanelSection } from 'botpress/ui'
@@ -30,14 +30,6 @@ export const EntitySidePanelSection: FC<Props> = props => {
     }
   }
 
-  const entityActions: SectionAction[] = [
-    {
-      icon: <Icon icon="add" />,
-      onClick: () => setShowEntityModal(!showEntityModal),
-      tooltip: 'Create new entity'
-    }
-  ]
-
   const entityItems = props.entities
     .filter(entity => !entitiesFilter || entity.name.includes(entitiesFilter))
     .map(
@@ -65,20 +57,24 @@ export const EntitySidePanelSection: FC<Props> = props => {
   }
 
   return (
-    <React.Fragment>
-      <SidePanelSection label="Entities" actions={entityActions}>
-        <SearchBar icon="filter" placeholder="filter entities" onChange={setEntitiesFilter} showButton={false} />
-        <ItemList
-          items={entityItems}
-          onElementClicked={({ value: name }) => props.setCurrentItem({ type: 'entity', name })}
-        />
-      </SidePanelSection>
+    <div>
+      <Button
+        className={Classes.MINIMAL}
+        icon="new-object"
+        text="New entity"
+        onClick={() => setShowEntityModal(!showEntityModal)}
+      />
+      <SearchBar icon="filter" placeholder="filter entities" onChange={setEntitiesFilter} showButton={false} />
+      <ItemList
+        items={entityItems}
+        onElementClicked={({ value: name }) => props.setCurrentItem({ type: 'entity', name })}
+      />
       <CreateEntityModal
         api={props.api}
         onEntityCreated={entityCreated}
         visible={showEntityModal}
         hide={() => setShowEntityModal(false)}
       />
-    </React.Fragment>
+    </div>
   )
 }

modules/nlu/src/views/full/index.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@blueprintjs/core'
+import { Icon, Tab, Tabs, Tag } from '@blueprintjs/core'
 import { AxiosInstance } from 'axios'
 import { Container, SidePanel, SplashScreen } from 'botpress/ui'
 import _ from 'lodash'
@@ -44,24 +44,44 @@ const NLU: FC<Props> = props => {
     setEntities([...entities.slice(0, i), entity, ...entities.slice(i + 1)])
   }
 
+  const intentsPanel = (
+    <IntentSidePanelSection
+      api={api}
+      contentLang={props.contentLang}
+      intents={intents}
+      currentItem={currentItem}
+      setCurrentItem={setCurrentItem}
+      reloadIntents={loadIntents}
+    />
+  )
+
+  const entitiesPanel = (
+    <EntitySidePanelSection
+      api={api}
+      entities={entities}
+      currentItem={currentItem}
+      setCurrentItem={setCurrentItem}
+      reloadEntities={loadEntities}
+    />
+  )
+
   return (
     <Container>
       <SidePanel>
-        <IntentSidePanelSection
-          api={api}
-          contentLang={props.contentLang}
-          intents={intents}
-          currentItem={currentItem}
-          setCurrentItem={setCurrentItem}
-          reloadIntents={loadIntents}
-        />
-        <EntitySidePanelSection
-          api={api}
-          entities={entities}
-          currentItem={currentItem}
-          setCurrentItem={setCurrentItem}
-          reloadEntities={loadEntities}
-        />
+        <Tabs id="nlu-tabs" className={style.headerTabs} defaultSelectedTabId="intents" large={false}>
+          <Tab id="intents" panel={intentsPanel} className={style.panelTab}>
+            <span>Intents</span>{' '}
+            <Tag large={false} round={true} minimal={true}>
+              {intents.length}
+            </Tag>
+          </Tab>
+          <Tab id="entities" panel={entitiesPanel} className={style.panelTab}>
+            <span>Entities</span>{' '}
+            <Tag large={false} round={true} minimal={true}>
+              {entities.length}
+            </Tag>
+          </Tab>
+        </Tabs>
       </SidePanel>
       <div className={style.container}>
         {!currentItem && (

modules/nlu/src/views/full/intents/SidePanelSection.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@blueprintjs/core'
+import { Button, Classes } from '@blueprintjs/core'
 import { NLUAPI } from 'api'
 import { NLU } from 'botpress/sdk'
 import { Item, ItemList, SearchBar, SectionAction, SidePanelSection } from 'botpress/ui'
@@ -50,14 +50,6 @@ export const IntentSidePanelSection: FC<Props> = props => {
     props.setCurrentItem({ name: sanitizedName, type: 'intent' })
   }
 
-  const intentActions: SectionAction[] = [
-    {
-      icon: <Icon icon="add" />,
-      onClick: createIntent,
-      tooltip: 'Create new intent'
-    }
-  ]
-
   const intentItems = props.intents
     .filter(intent => !intentsFilter || intent.name.includes(intentsFilter))
     .map(
@@ -80,12 +72,13 @@ export const IntentSidePanelSection: FC<Props> = props => {
     )
 
   return (
-    <SidePanelSection label="Intents" actions={intentActions}>
+    <div>
+      <Button className={Classes.MINIMAL} icon="new-object" text="New intent" onClick={createIntent} />
       <SearchBar icon="filter" placeholder="filter intents" onChange={setIntentsFilter} showButton={false} />
       <ItemList
         items={intentItems}
         onElementClicked={({ value: name }) => props.setCurrentItem({ type: 'intent', name })}
       />
-    </SidePanelSection>
+    </div>
   )
 }

modules/nlu/src/views/full/style.scss

@@ -8,6 +8,30 @@ $status-bar-height: 24px;
   width: 100%;
 }
 
+.headerTabs {
+  :global(.bp3-tab-list) {
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+  }
+
+  :global(.bp3-tab-indicator-wrapper) {
+    background: rgba(0, 0, 0, 0.05);
+  }
+
+  :global(.bp3-tab-panel) {
+    margin-top: 5px;
+  }
+
+  :global(.bp3-tab) {
+    padding: 2px 8px;
+    border-right: 1px solid #eee;
+  }
+
+  :global(.bp3-tab-list > *:not(:last-child)) {
+    margin-right: 0;
+  }
+}
+
 .workspace {
   width: 100%;
   height: calc(100vh - #{$status-bar-height});

modules/nlu/src/views/full/style.scss.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'entityText': string;
   'filter': string;
   'flash': string;
+  'headerTabs': string;
   'in': string;
   'list': string;
   'main': string;

src/bp/ui-studio/src/web/components/Shared/Interface/style.scss

@@ -161,6 +161,7 @@ $status-bar-height: 24px;
 
 .itemListSelected {
   font-weight: bold;
+  background: #eee;
 }
 
 .toolbar {