feat: Initial UI for search view(https://wearezeta.atlassian.net/browse/WPB-20721)

apps/webapp/src/i18n/en-US.json

@@ -481,6 +481,8 @@
   "cells.restoreRootNodeModal.folder.headline": "Restore folder",
   "cells.search.closeButton": "Close",
   "cells.search.failed": "Something went wrong, please try again later.",
+  "cells.search.idle.description": "Apply a search terms, or a filter to see results.",
+  "cells.search.idle.heading": "Searching within Shared Drive and all its folders",
   "cells.search.placeholder": "Search files and folders",
   "cells.selfDeletingMessage.info": "The feature is not available for conversations with a shared Drive.",
   "cells.shareModal.changePassword": "Change Password",

apps/webapp/src/script/components/Conversation/ConversationCells/common/CellsBreadcrumbs/CellsBreadcrumbs.styles.ts → apps/webapp/src/script/components/Conversation/Conversation.styles.ts

@@ -19,6 +19,34 @@
 
 import {CSSObject} from '@emotion/react';
 
-export const wrapperStyles: CSSObject = {
-  padding: '0 8px',
+export const tabsWrapperStyles: CSSObject = {
+  position: 'relative',
+};
+
+export const tabsHiddenStyles: CSSObject = {
+  visibility: 'hidden',
+};
+
+export const searchResultsOverlayStyles: CSSObject = {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'flex-end',
+  paddingLeft: '16px',
+  paddingBottom: '8px',
+};
+
+export const searchResultsHeadingStyles: CSSObject = {
+  margin: 0,
+  fontSize: 'var(--font-size-medium)',
+  fontStyle: 'normal',
+  fontWeight: 'var(--font-weight-semibold)',
+  lineHeight: 'var(--line-height-md)',
+  color: 'var(--Backgrounds-On-Background-Variant, #000)',
+  'body.theme-dark &': {
+    color: 'var(--Backgrounds-On-Background-Variant, #FFF)',
+  },
 };

apps/webapp/src/script/components/Conversation/Conversation.tsx

@@ -46,6 +46,7 @@
 import {ServiceEntity} from 'Repositories/integration/ServiceEntity';
 import {TeamState} from 'Repositories/team/TeamState';
 import {Config} from 'src/script/Config';
+import {sharedDriveSearchAndFiltersFeatureToggleName} from 'src/script/featureToggles/startupFeatureToggleNames';
 import {useKoSubscribableChildren} from 'Util/componentUtil';
 import {isLastReceivedMessage} from 'Util/conversationMessages';
 import {allowsAllFiles, getFileExtensionOrName, hasAllowedExtension} from 'Util/fileTypeUtil';
@@ -55,6 +56,12 @@
 import {safeMailOpen, safeWindowOpen} from 'Util/sanitizationUtil';
 import {formatBytes} from 'Util/util';
 
+import {
+  searchResultsHeadingStyles,
+  searchResultsOverlayStyles,
+  tabsHiddenStyles,
+  tabsWrapperStyles,
+} from './Conversation.styles';
 import {ConversationCells} from './ConversationCells/ConversationCells';
 import {ConversationFileDropzone} from './ConversationFileDropzone/ConversationFileDropzone';
 import {ConversationMessagesWrapper} from './ConversationMessagesWrapper/ConversationMessagesWrapper';
@@ -71,7 +78,7 @@
 import {MotionDuration} from '../../motion/MotionDuration';
 import {RightSidebarParams} from '../../page/AppMain';
 import {PanelState} from '../../page/RightSidebar';
-import {useMainViewModel} from '../../page/RootProvider';
+import {useApplicationContext, useMainViewModel} from '../../page/RootProvider';
 import {ElementType, MessageDetails} from '../MessagesList/Message/ContentMessage/asset/TextMessageRenderer';
 
 interface ConversationProps {
@@ -96,12 +103,15 @@
   const isVirtualizedMessagesListEnabled = CONFIG.FEATURE.ENABLE_VIRTUALIZED_MESSAGES_LIST;
 
   const mainViewModel = useMainViewModel();
+  const {isFeatureToggleEnabled} = useApplicationContext();
   const {content: contentViewModel} = mainViewModel;
   const {conversationRepository, repositories} = contentViewModel;
+  const isSharedDriveSearchAndFiltersEnabled = isFeatureToggleEnabled(sharedDriveSearchAndFiltersFeatureToggleName);
 
   const [isConversationLoaded, setIsConversationLoaded] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>('');
   const [isGiphyModalOpen, setIsGiphyModalOpen] = useState<boolean>(false);
+  const [isSharedDriveSearchViewOpen, setIsSharedDriveSearchViewOpen] = useState<boolean>(false);
 
   const conversationState = container.resolve(ConversationState);
   const callState = container.resolve(CallState);
@@ -294,7 +304,7 @@
   };
 
   const handleEmailClick = (event: Event, messageDetails: MessageDetails) => {
     safeMailOpen(messageDetails.href!);
     event.preventDefault();
     return false;
   };
@@ -317,7 +327,7 @@
   };
 
   const handleMarkdownLinkClick = (event: MouseEvent | KeyboardEvent, messageDetails: MessageDetails) => {
     const href = messageDetails.href!;
 
     const parsed = parseAccountDeepLink(href, CONFIG.URL.ACCOUNT_BASE);
 
@@ -521,6 +531,12 @@
   const isCellsEnabled =
     Config.getConfig().FEATURE.ENABLE_CELLS && activeConversation?.cellsState() !== CONVERSATION_CELLS_STATE.DISABLED;
 
+  useEffect(() => {
+    if ((!isFileTabActive || !isSharedDriveSearchAndFiltersEnabled) && isSharedDriveSearchViewOpen) {
+      setIsSharedDriveSearchViewOpen(false);
+    }
+  }, [isFileTabActive, isSharedDriveSearchAndFiltersEnabled, isSharedDriveSearchViewOpen]);
+
   const {getRootProps, getInputProps, openAllFilesView, openImageFilesView, handlePastedFile, isDragAccept} =
     useFilesUploadDropzone({
       isTeam: inTeam,
@@ -551,23 +567,45 @@
             openRightSidebar={openRightSidebar}
             isRightSidebarOpen={isRightSidebarOpen}
             isReadOnlyConversation={isReadOnlyConversation || isSelfUserRemoved}
-            withBottomDivider={!isCellsEnabled}
+            withBottomDivider={!isCellsEnabled || (isSharedDriveSearchAndFiltersEnabled && isSharedDriveSearchViewOpen)}
+            isSharedDriveSearchViewOpen={isSharedDriveSearchAndFiltersEnabled && isSharedDriveSearchViewOpen}
+            onCloseSharedDriveSearchView={() => setIsSharedDriveSearchViewOpen(false)}
           />
 
           {isCellsEnabled && (
             <>
-              <ConversationTabs
-                activeTabIndex={activeTabIndex}
-                onIndexChange={setActiveTabIndex}
-                conversationQualifiedId={activeConversation.qualifiedId}
-              />
+              <div css={tabsWrapperStyles}>
+                <div
+                  aria-hidden={(isSharedDriveSearchAndFiltersEnabled && isSharedDriveSearchViewOpen) || undefined}
+                  css={
+                    isSharedDriveSearchAndFiltersEnabled && isSharedDriveSearchViewOpen ? tabsHiddenStyles : undefined
+                  }
+                >
+                  <ConversationTabs
+                    activeTabIndex={activeTabIndex}
+                    onIndexChange={setActiveTabIndex}
+                    conversationQualifiedId={activeConversation.qualifiedId}
+                  />
+                </div>
+                {isSharedDriveSearchAndFiltersEnabled && isSharedDriveSearchViewOpen && (
+                  <div css={searchResultsOverlayStyles}>
+                    <h3 css={searchResultsHeadingStyles}>Search results</h3>
+                  </div>
+                )}
+              </div>
               <ConversationTabPanel id="files" isActive={isFileTabActive}>
                 {isFileTabActive && (
                   <ConversationCells
                     activeConversation={activeConversation}
                     userRepository={repositories.user}
                     cellsRepository={repositories.cells}
                     conversationRepository={conversationRepository}
+                    isSearchViewOpen={isSharedDriveSearchAndFiltersEnabled && isSharedDriveSearchViewOpen}
+                    onOpenSearchView={() => {
+                      if (isSharedDriveSearchAndFiltersEnabled) {
+                        setIsSharedDriveSearchViewOpen(true);
+                      }
+                    }}
                   />
                 )}
               </ConversationTabPanel>

apps/webapp/src/script/components/Conversation/ConversationCells/CellsHeader/CellsHeader.styles.ts

@@ -24,8 +24,9 @@ export const wrapperStyles: CSSObject = {
   justifyContent: 'space-between',
   alignItems: 'flex-start',
   flexDirection: 'column',
+  gap: '16px',
   marginBottom: '20px',
-  paddingRight: '8px',
+  padding: '0 16px',
   width: '100%',
 };
 
@@ -35,6 +36,21 @@ export const contentStyles: CSSObject = {
   justifyContent: 'space-between',
   gap: '8px',
   width: '100%',
+  minHeight: '32px',
+};
+
+export const breadcrumbsRowStyles: CSSObject = {
+  display: 'flex',
+  width: '100%',
+  height: '24px',
+  alignItems: 'center',
+  gap: '10px',
+};
+
+export const rootHomeIconStyles: CSSObject = {
+  width: '14px',
+  height: '14px',
+  flexShrink: 0,
 };
 
 export const actionsStyles: CSSObject = {
@@ -44,21 +60,68 @@ export const actionsStyles: CSSObject = {
 };
 
 export const searchInputStyles: CSSObject = {
-  boxShadow: '0 0 0 0.667px transparent',
-  '.wireinput': {
-    padding: 0,
-    paddingLeft: '8px',
-    boxShadow: 'none',
-    '&:focus, &:hover, &:active': {
-      boxShadow: 'none',
-    },
-  },
+  display: 'flex',
+  width: '394px',
+  height: '32px',
+  padding: '7px 12px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  flexShrink: 0,
+  gap: '8px',
+  borderRadius: '12px',
+  border: '1px solid var(--Border-Base-Primary, #DCE0E3)',
+  background: 'var(--Background-Base-Primary, #FFF)',
+  boxSizing: 'border-box',
   '&:focus-within': {
-    boxShadow: '0 0 0 0.667px var(--Light-UI-Blue, #0667C8)',
+    border: '1px solid var(--Border-Accent-Color-Primary, #0667C8)',
   },
   'body.theme-dark &': {
+    border: '1px solid var(--Border-Base-Primary, #34373D)',
+    background: 'var(--Background-Base-Primary, #17181A)',
     '&:focus-within': {
-      boxShadow: '0 0 0 0.667px var(--Dark-UI-Blue, #54a6ff)',
+      border: '1px solid var(--Border-Accent-Color-Primary, #54A6FF)',
     },
   },
 };
+
+export const searchIconStyles: CSSObject = {
+  flexShrink: 0,
+  width: '11.706px',
+  height: '12px',
+};
+
+export const searchNativeInputStyles: CSSObject = {
+  flex: 1,
+  minWidth: 0,
+  border: 'none',
+  outline: 'none',
+  background: 'transparent',
+  fontSize: '14px',
+  color: 'inherit',
+  boxShadow: 'none',
+  padding: 0,
+  '&:hover, &:focus, &:active': {
+    boxShadow: 'none',
+    outline: 'none',
+  },
+};
+
+export const clearButtonStyles: CSSObject = {
+  border: 'none',
+  background: 'transparent',
+  padding: 0,
+  margin: 0,
+  lineHeight: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  color: 'var(--main-color)',
+  flexShrink: 0,
+};
+
+export const clearIconStyles: CSSObject = {
+  width: '16px',
+  height: '16px',
+  flexShrink: 0,
+};