refactor: add rule and remove dangling underscores

Composer/.eslintrc.js

@@ -42,6 +42,16 @@ module.exports = {
     yoda: 'error',
     'no-bitwise': 'error',
     // eqeqeq: 'error',
+    'no-underscore-dangle': [
+      'error',
+      {
+        // add special window.__foo__ names as exceptions here
+        allow: ['__nonce__', '__IS_ELECTRON__'],
+        // allow this._name so custom getters and setters can be written gracefully
+        allowAfterThis: true,
+        enforceInMethodNames: true,
+      },
+    ],
 
     // plugin: import
     'import/first': 'error',

Composer/cypress/integration/NotificationPage.spec.ts

@@ -44,6 +44,9 @@ context('Notification Page', () => {
   it('can show dialog expression error ', () => {
     cy.visitPage('Design');
 
+    // click the logo to clear any stray tooltips from page navigation
+    cy.findByAltText('Composer Logo').click();
+
     cy.findByTestId('ProjectTree').within(() => {
       cy.findByText('WelcomeUser').click();
     });

Composer/package.json

@@ -8,7 +8,8 @@
     "serialize-javascript": "^3.1.0",
     "lodash": "^4.17.12",
     "set-value": "^3.0.2",
-    "kind-of": "^6.0.3"
+    "kind-of": "^6.0.3",
+    "elliptic": "^6.5.3"
   },
   "engines": {
     "node": ">=12"
@@ -119,4 +120,4 @@
   "dependencies": {
     "cross-env": "^6.0.3"
   }
-}
+}

Composer/packages/client/src/components/CreationFlow/LocationBrowser/FileSelector.tsx

@@ -46,7 +46,7 @@ type SortState = {
   descending: boolean;
 };
 
-const _renderIcon = (file: File) => {
+const renderIcon = (file: File) => {
   const iconName = getFileIconName(file);
   if (iconName === FileTypes.FOLDER) {
     return <Icon iconName="OpenFolderHorizontal" style={{ fontSize: '16px' }} />;
@@ -60,7 +60,7 @@ const _renderIcon = (file: File) => {
   return <img alt={`${iconName} file icon`} className={detailListClass.fileIconImg} src={url} />;
 };
 
-const _renderNameColumn = (onFileChosen: (file: File) => void) => (file: File) => {
+const renderNameColumn = (onFileChosen: (file: File) => void) => (file: File) => {
   const iconName = getFileIconName(file);
   return (
     <div data-is-focusable css={tableCell}>
@@ -105,7 +105,7 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
       fieldName: 'name',
       minWidth: 16,
       maxWidth: 16,
-      onRender: _renderIcon,
+      onRender: renderIcon,
     },
     {
       key: 'name',
@@ -118,7 +118,7 @@ export const FileSelector: React.FC<FileSelectorProps> = (props) => {
       sortAscendingAriaLabel: formatMessage('Sorted A to Z'),
       sortDescendingAriaLabel: formatMessage('Sorted Z to A'),
       data: 'string',
-      onRender: _renderNameColumn(onFileChosen),
+      onRender: renderNameColumn(onFileChosen),
       isPadded: true,
     },
     {

Composer/packages/client/src/components/ErrorPopup/index.tsx

@@ -18,7 +18,7 @@ type ErrorPopupProps = {
 export const ErrorPopup = (props: ErrorPopupProps) => {
   const [hidden, setHidden] = useState(props.error ? false : true);
 
-  const _closeDialog = () => {
+  const closeDialog = () => {
     setHidden(true);
     props.onDismiss();
   };
@@ -35,11 +35,11 @@ export const ErrorPopup = (props: ErrorPopupProps) => {
         isBlocking: false,
         styles: { main: { maxWidth: 450 } },
       }}
-      onDismiss={_closeDialog}
+      onDismiss={closeDialog}
     >
       <div css={consoleStyle}>{props.error}</div>
       <DialogFooter>
-        <PrimaryButton text="Ok" onClick={_closeDialog} />
+        <PrimaryButton text="Ok" onClick={closeDialog} />
       </DialogFooter>
     </Dialog>
   );

Composer/packages/client/src/pages/design/index.tsx

@@ -148,8 +148,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
         onBreadcrumbItemClick: handleBreadcrumbItemClick,
         promptTab: getTabFromFragment(),
       });
+      /* eslint-disable no-underscore-dangle */
       // @ts-ignore
       globalHistory._onTransitionComplete();
+      /* eslint-enable */
     } else {
       //leave design page should clear the history
       clearUndoHistory();

Composer/packages/client/src/pages/home/ExampleList.tsx

@@ -35,7 +35,7 @@ const resolveIcon = (exampleId: string): string => {
 export const ExampleList: React.FC<ExampleListProps> = (props) => {
   const { onClick, examples } = props;
 
-  function _onRenderCell(item?: ProjectTemplate): React.ReactNode {
+  function onRenderCell(item?: ProjectTemplate): React.ReactNode {
     if (!item) {
       return;
     }
@@ -46,6 +46,7 @@ export const ExampleList: React.FC<ExampleListProps> = (props) => {
         data-is-focusable
         aria-label={item.name + '; ' + item.description}
         css={exampleListCell}
+        role="button"
         tabIndex={0}
         onClick={() => onClick(item.id)}
         onKeyDown={(ev) => {
@@ -66,7 +67,7 @@ export const ExampleList: React.FC<ExampleListProps> = (props) => {
   return (
     <div css={exampleListContainer} data-is-scrollable="true">
       <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
-        <List items={examples} onRenderCell={_onRenderCell} />
+        <List items={examples} onRenderCell={onRenderCell} />
       </ScrollablePane>
     </div>
   );

Composer/packages/client/src/pages/language-generation/code-editor.tsx

@@ -103,7 +103,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     [file, projectId]
   );
 
-  const _onChange = useCallback(
+  const onChange = useCallback(
     (value) => {
       if (!file) return;
       if (inlineMode) {
@@ -142,7 +142,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       }}
       lgOption={lgOption}
       value={content}
-      onChange={_onChange}
+      onChange={onChange}
       onChangeSettings={handleSettingsChange}
     />
   );

Composer/packages/client/src/pages/language-understanding/code-editor.tsx

@@ -101,7 +101,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
     [file, projectId]
   );
 
-  const _onChange = useCallback(
+  const onChange = useCallback(
     (value) => {
       setContent(value);
       if (!file) return;
@@ -134,7 +134,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
       }}
       luOption={luOption}
       value={content}
-      onChange={_onChange}
+      onChange={onChange}
       onChangeSettings={handleSettingsChange}
     />
   );

Composer/packages/client/src/pages/publish/index.tsx

@@ -159,29 +159,29 @@ const Publish: React.FC<PublishPageProps> = (props) => {
 
   useEffect(() => {
     if (settings.publishTargets && settings.publishTargets.length > 0) {
-      const _selected = settings.publishTargets.find((item) => item.name === selectedTargetName);
-      setSelectedTarget(_selected);
+      const selected = settings.publishTargets.find((item) => item.name === selectedTargetName);
+      setSelectedTarget(selected);
       // load publish histories
       if (selectedTargetName === 'all') {
         for (const target of settings.publishTargets) {
           actions.getPublishHistory(projectId, target);
         }
-      } else if (_selected) {
-        actions.getPublishHistory(projectId, _selected);
+      } else if (selected) {
+        actions.getPublishHistory(projectId, selected);
       }
     }
   }, [projectId, selectedTargetName]);
 
   // once history is loaded, display it
   useEffect(() => {
     if (settings.publishTargets && selectedTargetName === 'all') {
-      let _histories: any[] = [];
-      const _groups: any[] = [];
+      let histories: any[] = [];
+      const groups: any[] = [];
       let startIndex = 0;
       for (const target of settings.publishTargets) {
         if (publishHistory[target.name]) {
-          _histories = _histories.concat(publishHistory[target.name]);
-          _groups.push({
+          histories = histories.concat(publishHistory[target.name]);
+          groups.push({
             key: target.name,
             name: target.name,
             startIndex: startIndex,
@@ -191,8 +191,8 @@ const Publish: React.FC<PublishPageProps> = (props) => {
           startIndex += publishHistory[target.name].length;
         }
       }
-      setGroups(_groups);
-      setThisPublishHistory(_histories);
+      setGroups(groups);
+      setThisPublishHistory(histories);
     } else if (selectedTargetName && publishHistory[selectedTargetName]) {
       setThisPublishHistory(publishHistory[selectedTargetName]);
       setGroups([
@@ -221,14 +221,14 @@ const Publish: React.FC<PublishPageProps> = (props) => {
 
   const savePublishTarget = useCallback(
     async (name: string, type: string, configuration: string) => {
-      const _target = (settings.publishTargets || []).concat([
+      const target = (settings.publishTargets || []).concat([
         {
           name,
           type,
           configuration,
         },
       ]);
-      await actions.setSettings(projectId, { ...settings, publishTargets: _target });
+      await actions.setSettings(projectId, { ...settings, publishTargets: target });
       onSelectTarget(name);
     },
     [settings.publishTargets, projectId, botName]
@@ -240,15 +240,15 @@ const Publish: React.FC<PublishPageProps> = (props) => {
         return;
       }
 
-      const _targets = settings.publishTargets ? [...settings.publishTargets] : [];
+      const targets = settings.publishTargets ? [...settings.publishTargets] : [];
 
-      _targets[editTarget.index] = {
+      targets[editTarget.index] = {
         name,
         type,
         configuration,
       };
 
-      await actions.setSettings(projectId, { ...settings, publishTargets: _targets });
+      await actions.setSettings(projectId, { ...settings, publishTargets: targets });
 
       onSelectTarget(name);
     },
@@ -339,8 +339,8 @@ const Publish: React.FC<PublishPageProps> = (props) => {
 
       if (result) {
         if (settings.publishTargets && settings.publishTargets.length > index) {
-          const _target = settings.publishTargets.slice(0, index).concat(settings.publishTargets.slice(index + 1));
-          await actions.setSettings(projectId, { ...settings, publishTargets: _target });
+          const target = settings.publishTargets.slice(0, index).concat(settings.publishTargets.slice(index + 1));
+          await actions.setSettings(projectId, { ...settings, publishTargets: target });
           // redirect to all profiles
           setSelectedTarget(undefined);
           onSelectTarget('all');

Composer/packages/client/src/store/action/error.ts

@@ -14,7 +14,7 @@ export const setError: ActionCreator = ({ dispatch }, error) => {
   });
 };
 
-const _setMessage = debounce((dispatch, message: string) => {
+const setMessageHelper = debounce((dispatch, message: string) => {
   dispatch({
     type: ActionTypes.SET_MESSAGE,
     payload: message,
@@ -31,5 +31,5 @@ const _setMessage = debounce((dispatch, message: string) => {
 }, 500);
 
 export const setMessage: ActionCreator = ({ dispatch }, message) => {
-  _setMessage(dispatch, message);
+  setMessageHelper(dispatch, message);
 };