fix: scroll bar missing and some ux issue

Composer/packages/client/__tests__/utils/luUtil.test.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { LuFile, DialogInfo, Diagnostic } from '@bfc/shared';
+import { LuFile, DialogInfo, Diagnostic, DiagnosticSeverity } from '@bfc/shared';
 
 import { getReferredFiles, checkLuisPublish, createCrossTrainConfig } from '../../src/utils/luUtil';
 
@@ -71,7 +71,7 @@ describe('getReferredFiles', () => {
 
     expect(referred[0].id).toEqual('a.en-us');
 
-    luFiles[0].diagnostics = [{ message: 'wrong' }] as Diagnostic[];
+    luFiles[0].diagnostics = [{ message: 'wrong', severity: DiagnosticSeverity.Error }] as Diagnostic[];
     expect(() => {
       checkLuisPublish(luFiles, dialogs);
     }).toThrowError(/wrong/);

Composer/packages/client/src/pages/design/styles.ts

@@ -23,6 +23,8 @@ export const projectContainer = css`
   flex-grow: 0;
   flex-shrink: 0;
   width: 255px;
+  height: 100%;
+  overflow: auto;
   border-right: 1px solid #c4c4c4;
 `;
 

Composer/packages/client/src/pages/language-generation/table-view.tsx

@@ -12,6 +12,7 @@ import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane';
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';
+import { FontIcon } from 'office-ui-fabric-react/lib/Icon';
 import formatMessage from 'format-message';
 import { NeutralColors, FontSizes } from '@uifabric/fluent-theme';
 import { RouteComponentProps } from '@reach/router';
@@ -20,7 +21,7 @@ import { LgTemplate } from '@bfc/shared';
 import { StoreContext } from '../../store';
 import { increaseNameUtilNotExist } from '../../utils/lgUtil';
 import { navigateTo } from '../../utils';
-import { actionButton, formCell } from '../language-understanding/styles';
+import { actionButton, formCell, iconClass } from '../language-understanding/styles';
 
 interface TableViewProps extends RouteComponentProps<{}> {
   dialogId: string;
@@ -190,7 +191,9 @@ const TableView: React.FC<TableViewProps> = props => {
         data: 'string',
         onRender: item => {
           return activeDialog?.lgTemplates.find(({ name }) => name === item.name) ? (
-            <IconButton iconProps={{ iconName: 'Accept' }} ariaLabel={formatMessage('Used')} />
+            <div css={formCell}>
+              <FontIcon iconName="Accept" aria-label={formatMessage('Used')} className={iconClass} />
+            </div>
           ) : (
             <div aria-label={formatMessage('Unused')} />
           );

Composer/packages/client/src/pages/language-understanding/styles.ts

@@ -2,14 +2,18 @@
 // Licensed under the MIT License.
 
 import { css } from '@emotion/core';
-import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
+import { FontWeights, FontSizes, mergeStyles } from 'office-ui-fabric-react/lib/Styling';
 
 export const actionButton = css`
   font-size: 16px;
   margin: 0;
   margin-left: 15px;
 `;
 
+export const iconClass = mergeStyles({
+  fontSize: FontSizes.medium,
+});
+
 export const flexContentSpaceBetween = css`
   display: flex;
   justify-content: space-between;
@@ -39,6 +43,7 @@ export const ContentStyle = css`
   display: flex;
   border-top: 1px solid #dddddd;
   flex: 1;
+  height: calc(100% - 165px);
   position: relative;
   nav {
     ul {
@@ -64,10 +69,7 @@ export const codeEditorContainer = css`
 export const formCell = css`
   white-space: pre-wrap;
   font-size: 14px;
-  textarea,
-  input {
-    border: 1px solid #dddddd;
-  }
+  line-height: 28px;
 `;
 
 export const luPhraseCell = css`

Composer/packages/client/src/pages/language-understanding/table-view.tsx

@@ -148,19 +148,23 @@ const TableView: React.FC<TableViewProps> = props => {
           );
         },
       },
-      {
-        key: 'beenUsed',
-        name: formatMessage('Been used'),
-        fieldName: 'beenUsed',
-        minWidth: 100,
-        maxWidth: 100,
-        isResizable: true,
-        isCollapsable: true,
-        data: 'string',
-        onRender: item => {
-          return item.used ? <IconButton iconProps={{ iconName: 'Accept' }} /> : <div />;
-        },
-      },
+      // {
+      //   key: 'beenUsed',
+      //   name: formatMessage('Been used'),
+      //   fieldName: 'beenUsed',
+      //   minWidth: 100,
+      //   maxWidth: 100,
+      //   isResizable: true,
+      //   isCollapsable: true,
+      //   data: 'string',
+      //   onRender: item => {
+      //     return item.used ? (
+      //       <FontIcon iconName="Accept" aria-label={formatMessage('Used')} className={iconClass} />
+      //     ) : (
+      //       <div />
+      //     );
+      //   },
+      // },
       {
         key: 'buttons',
         name: '',

Composer/packages/client/src/utils/luUtil.ts

@@ -8,7 +8,7 @@
  */
 import keys from 'lodash/keys';
 import { createSingleMessage } from '@bfc/indexers';
-import { LuFile, DialogInfo } from '@bfc/shared';
+import { LuFile, DialogInfo, DiagnosticSeverity } from '@bfc/shared';
 
 import { getBaseName, getExtension } from './fileUtil';
 
@@ -157,7 +157,9 @@ function isLuFileEmpty(file: LuFile) {
 
 export function checkLuisPublish(luFiles: LuFile[], dialogs: DialogInfo[]) {
   const referred = getReferredFiles(luFiles, dialogs);
-  const invalidLuFile = referred.filter(file => file.diagnostics.length !== 0);
+  const invalidLuFile = referred.filter(
+    file => file.diagnostics.filter(n => n.severity === DiagnosticSeverity.Error).length !== 0
+  );
   if (invalidLuFile.length !== 0) {
     const msg = generateErrorMessage(invalidLuFile);
     throw new Error(`The Following LuFile(s) are invalid: \n` + msg);