feat: add search by contacts to closed group overlay

_locales/en/messages.json

@@ -328,6 +328,7 @@
   "beginYourSession": "Begin your Session.",
   "welcomeToYourSession": "Welcome to your Session",
   "searchFor...": "Search for messages or conversations",
+  "searchForContactsOnly": "Search for contacts",
   "enterSessionID": "Enter Session ID",
   "enterSessionIDOfRecipient": "Enter your contact's Session ID or ONS",
   "message": "Message",
@@ -340,6 +341,7 @@
   "join": "Join",
   "joinOpenGroup": "Join Community",
   "createGroup": "Create Group",
+  "create": "Create",
   "createClosedGroupNamePrompt": "Group Name",
   "createClosedGroupPlaceholder": "Enter a group name",
   "openGroupURL": "Community URL",

stylesheets/_session_left_pane.scss

@@ -161,49 +161,6 @@ $session-compose-margin: 20px;
   }
 }
 
-.session-left-pane-section-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-}
-
-.user-search-dropdown {
-  width: 100%;
-  min-height: 34px;
-  flex-grow: 1;
-  overflow-y: auto;
-}
-
-.session-search-input {
-  height: $session-search-input-height;
-  width: 100%;
-  margin-inline-end: 1px;
-  margin-bottom: 10px;
-  display: inline-flex;
-  flex-shrink: 0;
-
-  .session-icon-button {
-    margin: auto 10px;
-  }
-
-  input {
-    width: inherit;
-    height: inherit;
-    border: none;
-    flex-grow: 1;
-    font-size: $session-font-sm;
-    font-family: $session-font-default;
-    text-overflow: ellipsis;
-    background: none;
-    color: var(--color-text);
-
-    &:focus {
-      outline: none !important;
-    }
-  }
-}
-
 .conversation.placeholder {
   margin: auto;
   .container {

ts/components/DebugLogView.tsx

@@ -63,6 +63,7 @@ const DebugLogButtons = (props: { content: string }) => {
     </div>
   );
 };
+// tslint:disable: no-console
 
 const DebugLogViewAndSave = () => {
   const [content, setContent] = useState(window.i18n('loading'));
@@ -80,7 +81,7 @@ const DebugLogViewAndSave = () => {
         const debugLogWithSystemInfo = `${operatingSystemInfo} ${commitHashInfo} ${text}`;
         setContent(debugLogWithSystemInfo);
       })
-      .catch(console.warn);
+      .catch(console.error);
   }, []);
 
   return (

ts/components/MemberListItem.tsx

@@ -109,7 +109,7 @@ export const MemberListItem = (props: {
 
       {!inMentions && (
         <StyledCheckContainer>
-          <SessionRadio active={isSelected} value="tet" inputName="wewee" label="" />
+          <SessionRadio active={isSelected} value={pubkey} inputName={pubkey} label="" />
         </StyledCheckContainer>
       )}
     </StyledSessionMemberItem>

ts/components/SessionSearchInput.tsx

@@ -1,8 +1,10 @@
 import { debounce } from 'lodash';
 import React, { Dispatch, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 import { clearSearch, search, updateSearchTerm } from '../state/ducks/search';
 import { getConversationsCount } from '../state/selectors/conversations';
+import { getOverlayMode } from '../state/selectors/section';
 import { cleanSearchTerm } from '../util/cleanSearchTerm';
 import { SessionIconButton } from './icon';
 
@@ -35,7 +37,7 @@ function updateSearch(dispatch: Dispatch<any>, searchTerm: string) {
 export const SessionSearchInput = () => {
   const [currentSearchTerm, setCurrentSearchTerm] = useState('');
   const dispatch = useDispatch();
-
+  const isGroupCreationSearch = useSelector(getOverlayMode) === 'closed-group';
   const convoCount = useSelector(getConversationsCount);
 
   // just after onboard we only have a conversation with ourself
@@ -43,19 +45,23 @@ export const SessionSearchInput = () => {
     return null;
   }
 
+  const placeholder = isGroupCreationSearch
+    ? window.i18n('searchForContactsOnly')
+    : window.i18n('searchFor...');
+
   return (
-    <div className="session-search-input">
+    <StyledSearchInput>
       <SessionIconButton iconSize="medium" iconType="search" />
-      <input
+      <StyledInput
         value={currentSearchTerm}
         onChange={e => {
           const inputValue = e.target.value;
           setCurrentSearchTerm(inputValue);
           updateSearch(dispatch, inputValue);
         }}
-        placeholder={window.i18n('searchFor...')}
+        placeholder={placeholder}
       />
-      {!!currentSearchTerm.length && (
+      {Boolean(currentSearchTerm.length) && (
         <SessionIconButton
           iconSize="tiny"
           iconType="exit"
@@ -65,6 +71,35 @@ export const SessionSearchInput = () => {
           }}
         />
       )}
-    </div>
+    </StyledSearchInput>
   );
 };
+
+const StyledSearchInput = styled.div`
+  height: 34px; // $session-search-input-height
+  width: 100%;
+  margin-inline-end: 1px;
+  margin-bottom: 10px;
+  display: inline-flex;
+  flex-shrink: 0;
+
+  .session-icon-button {
+    margin: auto 10px;
+  }
+`;
+
+const StyledInput = styled.input`
+  width: inherit;
+  height: inherit;
+  border: none;
+  flex-grow: 1;
+  font-size: var(--font-size-sm);
+  font-family: var(--font-default);
+  text-overflow: ellipsis;
+  background: none;
+  color: var(--color-text);
+
+  &:focus {
+    outline: none !important;
+  }
+`;

ts/components/basic/SessionButton.tsx

@@ -28,11 +28,12 @@ type Props = {
   buttonColor: SessionButtonColor;
   onClick: any;
   children?: ReactNode;
+  margin?: string;
   dataTestId?: string;
 };
 
 export const SessionButton = (props: Props) => {
-  const { buttonType, dataTestId, buttonColor, text, disabled, onClick } = props;
+  const { buttonType, dataTestId, buttonColor, text, disabled, onClick, margin } = props;
 
   const clickHandler = (e: any) => {
     if (onClick) {
@@ -55,6 +56,7 @@ export const SessionButton = (props: Props) => {
       role="button"
       onClick={onClickFn}
       data-testid={dataTestId}
+      style={{ margin }}
     >
       {props.children || text}
     </div>

ts/components/leftpane/LeftPaneMessageSection.tsx

@@ -125,10 +125,10 @@ export class LeftPaneMessageSection extends React.Component<Props> {
     const { overlayMode } = this.props;
 
     return (
-      <div className="session-left-pane-section-content">
+      <StyledLeftPaneContent>
         <LeftPaneSectionHeader />
         {overlayMode ? <ClosableOverlay /> : this.renderConversations()}
-      </div>
+      </StyledLeftPaneContent>
     );
   }
 
@@ -146,3 +146,10 @@ export class LeftPaneMessageSection extends React.Component<Props> {
     );
   }
 }
+
+const StyledLeftPaneContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+`;

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -15,11 +15,18 @@ import { SpacerLG } from '../../basic/Text';
 import { MainViewController } from '../../MainViewController';
 import useKey from 'react-use/lib/useKey';
 import styled from 'styled-components';
+import { SessionSearchInput } from '../../SessionSearchInput';
+import { getSearchResults, isSearching } from '../../../state/selectors/search';
+
+const NoContacts = () => {
+  return (
+    <StyledMemberListNoContacts>{window.i18n('noContactsForGroup')}</StyledMemberListNoContacts>
+  );
+};
 
 export const OverlayClosedGroup = () => {
   const dispatch = useDispatch();
   const privateContactsPubkeys = useSelector(getPrivateContactsPubkeys);
-  // FIXME autofocus inputref on mount
   const [groupName, setGroupName] = useState('');
   const [loading, setLoading] = useState(false);
   const [selectedMemberIds, setSelectedMemberIds] = useState<Array<string>>([]);
@@ -61,12 +68,26 @@ export const OverlayClosedGroup = () => {
   useKey('Escape', closeOverlay);
 
   const title = window.i18n('createGroup');
-  const buttonText = window.i18n('done');
+  const buttonText = window.i18n('create');
   const subtitle = window.i18n('createClosedGroupNamePrompt');
   const placeholder = window.i18n('createClosedGroupPlaceholder');
 
   const noContactsForClosedGroup = privateContactsPubkeys.length === 0;
 
+  const isSearch = useSelector(isSearching);
+  const searchResultsSelected = useSelector(getSearchResults);
+  const searchResults = isSearch ? searchResultsSelected : undefined;
+  let sharedWithResults: Array<string> = [];
+
+  if (searchResults && searchResults.contactsAndGroups.length) {
+    const privateSearchResults = searchResults.contactsAndGroups.filter(convo => convo.isPrivate);
+
+    sharedWithResults = privateContactsPubkeys.filter(m =>
+      privateSearchResults.find(convo => convo.id === m)
+    );
+  }
+  const contactsToRender = isSearch ? sharedWithResults : privateContactsPubkeys;
+
   return (
     <div className="module-left-pane-overlay">
       <OverlayHeader title={title} subtitle={subtitle} />
@@ -86,14 +107,14 @@ export const OverlayClosedGroup = () => {
       <SessionSpinner loading={loading} />
 
       <SpacerLG />
+      <SessionSearchInput />
+
       <StyledGroupMemberListContainer>
         {noContactsForClosedGroup ? (
-          <StyledMemberListNoContacts>
+          <NoContacts />
-            {window.i18n('noContactsForGroup')}
-          </StyledMemberListNoContacts>
         ) : (
           <div className="group-member-list__selection">
-            {privateContactsPubkeys.map((memberPubkey: string) => (
+            {contactsToRender.map((memberPubkey: string) => (
               <MemberListItem
                 pubkey={memberPubkey}
                 isSelected={selectedMemberIds.some(m => m === memberPubkey)}
@@ -119,6 +140,7 @@ export const OverlayClosedGroup = () => {
         disabled={noContactsForClosedGroup}
         onClick={onEnterPressed}
         dataTestId="next-button"
+        margin="auto 0 var(--margins-lg) 0 " // just to keep that button at the bottom of the overlay (even with an empty list)
       />
     </div>
   );

ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx

@@ -28,7 +28,7 @@ const StyledActionRow = styled.button`
 export const StyledChooseActionTitle = styled.span`
   color: var(--color-text);
   font-size: 18px;
-  padding: 5px 0px 5px 10px;
+  padding: var(--margins-xs) var(--margins-lg);
 `;
 
 const StyledIcon = styled.div`

ts/node/database_utility.ts

@@ -29,7 +29,7 @@ function jsonToArray(json: string): Array<string> {
   try {
     return JSON.parse(json);
   } catch (e) {
-    console.warn('jsontoarray failed:', e.message);
+    console.error('jsontoarray failed:', e.message);
     return [];
   }
 }
@@ -89,7 +89,10 @@ export function formatRowOfConversation(row?: Record<string, any>): Conversation
   );
 
   if (foundInRowButNotInAllowed?.length) {
-    console.warn('formatRowOfConversation: foundInRowButNotInAllowed: ', foundInRowButNotInAllowed);
+    console.error(
+      'formatRowOfConversation: foundInRowButNotInAllowed: ',
+      foundInRowButNotInAllowed
+    );
 
     throw new Error(
       `formatRowOfConversation: an invalid key was given in the record: ${foundInRowButNotInAllowed[0]}`

ts/node/migration/sessionMigrations.ts

@@ -1174,7 +1174,7 @@ function updateToSessionSchemaVersion28(currentVersion: number, db: BetterSqlite
 }
 
 // function printTableColumns(table: string, db: BetterSqlite3.Database) {
-//   console.warn(db.pragma(`table_info('${table}');`));
+//   console.info(db.pragma(`table_info('${table}');`));
 // }
 
 function writeSessionSchemaVersion(newVersion: number, db: BetterSqlite3.Database) {

ts/node/sql.ts

@@ -1954,7 +1954,7 @@ function getEntriesCountInTable(tbl: string) {
       .get();
     return row['count(*)'];
   } catch (e) {
-    console.warn(e);
+    console.error(e);
     return 0;
   }
 }
@@ -2256,7 +2256,7 @@ function fillWithTestData(numConvosToAdd: number, numMsgsToAdd: number) {
       saveConversation(convoObjToAdd);
       // eslint-disable-next-line no-empty
     } catch (e) {
-      console.warn(e);
+      console.error(e);
     }
   }
   // eslint-disable-next-line no-plusplus

ts/test/automation/change_avatar.spec.ts

@@ -13,7 +13,7 @@ test.afterEach(async () => {
 });
 
 test('Change profile picture/avatar', async () => {
-  window = await openAppAndWait(`1`);
+  window = await openAppAndWait('1');
 
   await newUser(window, 'userA');
   // Open profile

ts/test/automation/change_username.spec.ts

@@ -13,7 +13,7 @@ test.afterEach(async () => {
 
 test('Change username', async () => {
   // Open App
-  window = await openAppAndWait(`1`);
+  window = await openAppAndWait('1');
   // Create user
   await newUser(window, 'userA');
   // Open Profile

ts/test/automation/create_user.spec.ts

@@ -13,7 +13,7 @@ test.afterEach(async () => {
 });
 test('Create User', async () => {
   // Launch Electron app.
-  window = await openAppAndWait(`1`);
+  window = await openAppAndWait('1');
   // // Create User
   const userA = await newUser(window, 'userA');
   // Open profile tab

ts/test/automation/delete_account.spec.ts

@@ -2,15 +2,9 @@ import { _electron, Page, test } from '@playwright/test';
 import { forceCloseAllWindows } from './setup/beforeEach';
 import { openAppsAndNewUsers, openAppsNoNewUsers } from './setup/new_user';
 import { sendNewMessage } from './send_message';
-import {
+import { clickOnMatchingText, clickOnTestIdWithText, typeIntoInput } from './utils';
-  clickOnMatchingText,
-  clickOnTestIdWithText,
-  typeIntoInput,
-  // waitForTestIdWithText,
-  // waitForMatchingText,
-  // waitForTestIdWithText,
-} from './utils';
 import { sleepFor } from '../../session/utils/Promise';
+// tslint:disable: no-console
 
 let windows: Array<Page> = [];
 test.afterEach(() => forceCloseAllWindows(windows));
@@ -55,7 +49,7 @@ test('Delete account from swarm', async () => {
   try {
     const elemShouldNotBeFound = restoringWindow.locator(testMessage);
     if (elemShouldNotBeFound) {
-      console.warn('Test message was not found');
+      console.error('Test message was not found');
       throw new Error(errorDesc);
     }
   } catch (e) {
@@ -70,7 +64,7 @@ test('Delete account from swarm', async () => {
   try {
     const elemShouldNotBeFound = restoringWindow.locator(userB.userName);
     if (elemShouldNotBeFound) {
-      console.warn('Contact not found');
+      console.error('Contact not found');
       throw new Error(errorDesc2);
     }
   } catch (e) {

ts/test/automation/disappearing_messages.spec.ts

@@ -13,6 +13,7 @@ import {
 
 let windows: Array<Page> = [];
 test.afterEach(() => forceCloseAllWindows(windows));
+// tslint:disable: no-console
 
 const testMessage = 'Test-Message- (A -> B) ';
 const testReply = 'Reply-Test-Message- (B -> A)';
@@ -59,7 +60,7 @@ test('Disappearing Messages', async () => {
   try {
     const elemShouldNotBeFound = windowA.locator(sentMessage);
     if (elemShouldNotBeFound) {
-      console.warn('Sent message not found in window A');
+      console.error('Sent message not found in window A');
       throw new Error(errorDesc);
     }
   } catch (e) {
@@ -90,7 +91,7 @@ test('Disappearing Messages', async () => {
   try {
     const elemShouldNotBeFound = windowA.locator(sentMessage);
     if (elemShouldNotBeFound) {
-      console.warn('Sent message not found in window B');
+      console.error('Sent message not found in window B');
       throw new Error(errorDesc2);
     }
   } catch (e) {

ts/test/automation/linking_device.spec.ts

@@ -5,6 +5,7 @@ import { clickOnTestIdWithText, typeIntoInput, waitForTestIdWithText } from './u
 
 const windows: Array<Page> = [];
 test.afterEach(() => forceCloseAllWindows(windows));
+// tslint:disable: no-console
 
 test('linking device', async () => {
   const { windowA1, windowA2, userA } = await linkedDevice();
@@ -22,7 +23,7 @@ test('linking device', async () => {
   try {
     const elemShouldNotBeFound = windowA2.locator('[data-testid=reveal-recovery-phrase]');
     if (elemShouldNotBeFound) {
-      console.warn('Element not found');
+      console.error('Element not found');
       throw new Error(errorDesc);
     }
   } catch (e) {

ts/test/automation/message.ts

@@ -1,5 +1,6 @@
 import { _electron, Page } from '@playwright/test';
 import { clickOnTestIdWithText, typeIntoInput } from './utils';
+// tslint:disable: no-console
 
 export const messageSent = async (window: Page, message: string) => {
   // type into message input box
@@ -8,8 +9,8 @@ export const messageSent = async (window: Page, message: string) => {
   await clickOnTestIdWithText(window, 'send-message-button');
   // wait for confirmation tick to send reply message
   const selc = `css=[data-testid=readable-message]:has-text("${message}"):has([data-testid=msg-status-outgoing][data-testtype=sent])`;
-  console.warn('waiting for sent tick of message: ', message);
+  console.error('waiting for sent tick of message: ', message);
 
   const tickMessageSent = await window.waitForSelector(selc, { timeout: 30000 });
-  console.warn('found the tick of message sent: ', message, Boolean(tickMessageSent));
+  console.error('found the tick of message sent: ', message, Boolean(tickMessageSent));
 };

ts/test/automation/password.spec.ts

@@ -23,7 +23,7 @@ const newTestPassword = '789101112';
 test.describe('Password checks', () => {
   test('Set Password', async () => {
     // open Electron
-    window = await openAppAndWait(`1`);
+    window = await openAppAndWait('1');
     // Create user
     await newUser(window, 'userA');
     // Click on settings tab
@@ -79,7 +79,7 @@ test.describe('Password checks', () => {
   });
   test('Wrong password', async () => {
     // Check if incorrect password works
-    window = await openAppAndWait(`1`);
+    window = await openAppAndWait('1');
     // Create user
     await newUser(window, 'userA');
     // Click on settings tab

ts/test/automation/setup/open.ts

@@ -4,13 +4,14 @@ import { getAppRootPath } from '../../../node/getRootPath';
 
 export const NODE_ENV = 'production';
 export const MULTI_PREFIX = 'test-integration-testnet-';
+// tslint:disable: no-console
 
 export const openElectronAppOnly = async (multi: string) => {
   process.env.NODE_APP_INSTANCE = `${MULTI_PREFIX}-${Date.now()}-${multi}`;
   process.env.NODE_ENV = NODE_ENV;
 
-  console.warn(' NODE_ENV', process.env.NODE_ENV);
+  console.info(' NODE_ENV', process.env.NODE_ENV);
-  console.warn(' NODE_APP_INSTANCE', process.env.NODE_APP_INSTANCE);
+  console.info(' NODE_APP_INSTANCE', process.env.NODE_APP_INSTANCE);
   const electronApp = await _electron.launch({
     args: [join(getAppRootPath(), 'ts', 'mains', 'main_node.js')],
   });

ts/test/automation/utils.ts

@@ -1,4 +1,5 @@
 import { Page } from 'playwright-core';
+// tslint:disable: no-console
 
 export async function waitForTestIdWithText(window: Page, dataTestId: string, text?: string) {
   let builtSelector = `css=[data-testid=${dataTestId}]`;
@@ -6,9 +7,9 @@ export async function waitForTestIdWithText(window: Page, dataTestId: string, te
     builtSelector += `:has-text("${text}")`;
   }
 
-  console.warn('looking for selector', builtSelector);
+  console.info('looking for selector', builtSelector);
   const found = await window.waitForSelector(builtSelector, { timeout: 55000 });
-  console.warn('found selector', builtSelector);
+  console.info('found selector', builtSelector);
 
   return found;
 }
@@ -19,11 +20,11 @@ export async function waitForReadableMessageWithText(window: Page, text: string)
 
 export async function waitForMatchingText(window: Page, text: string) {
   const builtSelector = `css=:has-text("${text}")`;
-  console.warn(`waitForMatchingText: ${text}`);
+  console.info(`waitForMatchingText: ${text}`);
 
   await window.waitForSelector(builtSelector, { timeout: 55000 });
 
-  console.warn(`got matchingText: ${text}`);
+  console.info(`got matchingText: ${text}`);
 }
 
 export async function clickOnMatchingText(window: Page, text: string, rightButton = false) {

ts/test/session/unit/crypto/OpenGroupAuthentication_test.ts

@@ -405,7 +405,7 @@ describe('OpenGroupAuthentication', () => {
     it.skip('Should decode bencoded response successfully', () => {
       // TODO: update input and expected output
       // const bencoded = decodeV4Response(responseToDecode);
-      // console.warn({ bencoded });
+      // console.error({ bencoded });
     });
   });
 });

ts/test/session/unit/utils/Promise_test.ts

@@ -177,7 +177,8 @@ describe('Promise Utils', () => {
         await allowOnlyOneAtATime('testing', spy, 5);
         throw new Error('should not get here');
       } catch (e) {
-        console.warn(e);
+        // tslint:disable-next-line: no-console
+        console.error(e);
         expect(e).to.be.be.eql(undefined, 'should be undefined');
       }
 

ts/types/LocalizerKeys.ts

@@ -230,6 +230,7 @@ export type LocalizerKeys =
   | 'invalidSessionId'
   | 'audioPermissionNeeded'
   | 'createGroup'
+  | 'create'
   | 'add'
   | 'messageRequests'
   | 'show'
@@ -449,6 +450,7 @@ export type LocalizerKeys =
   | 'trustThisContactDialogDescription'
   | 'unknownCountry'
   | 'searchFor...'
+  | 'searchForContactsOnly'
   | 'joinedTheGroup'
   | 'editGroupName'
   | 'reportIssue';

ts/updater/updater.ts

@@ -19,6 +19,7 @@ let isUpdating = false;
 let downloadIgnored = false;
 let interval: NodeJS.Timeout | undefined;
 let stopped = false;
+// tslint:disable: no-console
 
 export async function start(
   getMainWindow: () => BrowserWindow | null,
@@ -121,7 +122,7 @@ async function checkForUpdates(
 
       const mainWindow = getMainWindow();
       if (!mainWindow) {
-        console.warn('cannot showDownloadUpdateDialog, mainWindow is unset');
+        console.error('cannot showDownloadUpdateDialog, mainWindow is unset');
         return;
       }
       logger.info('[updater] showing download dialog...');
@@ -138,7 +139,7 @@ async function checkForUpdates(
     } catch (error) {
       const mainWindow = getMainWindow();
       if (!mainWindow) {
-        console.warn('cannot showDownloadUpdateDialog, mainWindow is unset');
+        console.error('cannot showDownloadUpdateDialog, mainWindow is unset');
         return;
       }
       await showCannotUpdateDialog(mainWindow, messages);
@@ -146,7 +147,7 @@ async function checkForUpdates(
     }
     const window = getMainWindow();
     if (!window) {
-      console.warn('cannot showDownloadUpdateDialog, mainWindow is unset');
+      console.error('cannot showDownloadUpdateDialog, mainWindow is unset');
       return;
     }
     // Update downloaded successfully, we should ask the user to update

ts/webworker/workers/util.worker.ts

@@ -116,7 +116,7 @@ async function verifyAllSignatures(
       // tslint:disable: no-console
       console.info('got an opengroup message with an invalid signature');
     } catch (e) {
-      console.warn(e);
+      console.error(e);
     }
   }