runfix: address cells localization strings (#19216)

Co-authored-by: Immad Abdul Jabbar <[email protected]>

Author: V-Gira

src/script/components/CellsGlobalView/CellsGlobalView.tsx

@@ -47,7 +47,7 @@ export const CellsGlobalView = ({cellsRepository = container.resolve(CellsReposi
   });
 
   const deleteFileFailedNotification = useAppNotification({
-    message: t('cellsGlobalView.deleteModalError'),
+    message: t('cells.deleteModal.error'),
   });
 
   const handleDeleteFile = useCallback(
@@ -99,28 +99,20 @@ export const CellsGlobalView = ({cellsRepository = container.resolve(CellsReposi
       />
       {emptySearchResults && (
         <CellsStateInfo
-          heading={t('cellsGlobalView.emptySearchResultsHeading')}
-          description={t('cellsGlobalView.emptySearchResultsDescription')}
+          heading={t('cells.emptySearchResults.heading')}
+          description={t('cells.emptySearchResults.description')}
         />
       )}
       {showTable && <CellsTable files={files} cellsRepository={cellsRepository} onDeleteFile={handleDeleteFile} />}
       {showNoFiles && (
-        <CellsStateInfo
-          heading={t('cellsGlobalView.noFilesHeading')}
-          description={t('cellsGlobalView.noFilesDescription')}
-        />
+        <CellsStateInfo heading={t('cells.noNodes.heading')} description={t('cells.noNodes.description')} />
       )}
       {showLoader && <CellsLoader />}
-      {isError && (
-        <CellsStateInfo
-          heading={t('cellsGlobalView.errorHeading')}
-          description={t('cellsGlobalView.errorDescription')}
-        />
-      )}
+      {isError && <CellsStateInfo heading={t('cells.error.heading')} description={t('cells.error.description')} />}
       {showLoadMore && (
         <div css={loadMoreWrapperStyles}>
           <Button variant={ButtonVariant.TERTIARY} onClick={increasePageSize}>
-            {t('cellsGlobalView.pagination.loadMoreResults')}
+            {t('cells.pagination.loadMoreResults')}
           </Button>
         </div>
       )}

src/script/components/CellsGlobalView/CellsHeader/CellsHeader.tsx

@@ -36,12 +36,12 @@ interface CellsHeaderProps {
 export const CellsHeader = ({searchValue, onSearch, onClearSearch, onRefresh, searchStatus}: CellsHeaderProps) => {
   return (
     <header css={wrapperStyles}>
-      <h2 css={headingStyles}>{t('cellsGlobalView.heading')}</h2>
+      <h2 css={headingStyles}>{t('cells.heading')}</h2>
       <div css={contentStyles}>
         <div css={searchWrapperStyles}>
           <CellsSearch searchValue={searchValue} onSearch={onSearch} onClearSearch={onClearSearch} />
           {searchStatus === 'loading' && <CellsTableLoader />}
-          {searchStatus === 'error' && <p>{t('cellsGlobalView.searchFailed')}</p>}
+          {searchStatus === 'error' && <p>{t('cells.search.failed')}</p>}
         </div>
         <CellsRefresh onRefresh={onRefresh} />
       </div>

src/script/components/CellsGlobalView/CellsHeader/CellsRefresh/CellsRefresh.tsx

@@ -31,7 +31,7 @@ export const CellsRefresh = ({onRefresh}: CellsRefreshProps) => {
   return (
     <Button variant={ButtonVariant.TERTIARY} onClick={onRefresh} css={buttonStyles}>
       <ReloadIcon css={iconStyles} />
-      {t('cellsGlobalView.refreshButton')}
+      {t('cells.refreshButton')}
     </Button>
   );
 };

src/script/components/CellsGlobalView/CellsHeader/CellsSearch/CellsSeach.tsx

@@ -55,8 +55,8 @@ export const CellsSearch = ({searchValue, onSearch, onClearSearch}: CellsSearchP
     <form css={wrapperStyles} onSubmit={handleSubmit}>
       <Input
         value={searchValue}
-        placeholder={t('cellsGlobalView.searchPlaceholder')}
-        aria-label={t('cellsGlobalView.searchPlaceholder')}
+        placeholder={t('cells.search.placeholder')}
+        aria-label={t('cells.search.placeholder')}
         name="cells-global-view-search"
         onChange={event => onSearch(event.currentTarget.value)}
         startContent={<SearchIcon width={14} height={14} css={searchIconStyles} />}
@@ -67,7 +67,7 @@ export const CellsSearch = ({searchValue, onSearch, onClearSearch}: CellsSearchP
                 type="button"
                 onClick={onClearSearch}
                 css={closeButtonStyles}
-                aria-label={t('cellsGlobalView.searchCloseButton')}
+                aria-label={t('cells.search.closeButton')}
               >
                 <CircleCloseIcon className="cursor-pointer" css={closeIconStyles} />
               </button>

src/script/components/CellsGlobalView/CellsTable/CellsTableColumns/CellsShareFileModal/CellsShareFileModal.tsx

@@ -45,10 +45,10 @@ interface ShareFileModalParams {
 
 export const showShareFileModal = ({uuid, cellsRepository}: ShareFileModalParams) => {
   PrimaryModal.show(PrimaryModal.type.CONFIRM, {
-    primaryAction: {action: () => {}, text: t('cellsGlobalView.shareFileModalPrimaryAction')},
+    primaryAction: {action: () => {}, text: t('cells.shareModal.primaryAction')},
     text: {
       message: <CellsShareFileModalContent uuid={uuid} cellsRepository={cellsRepository} />,
-      title: t('cellsGlobalView.shareFileModalHeading'),
+      title: t('cells.shareModal.heading'),
     },
   });
 };
@@ -63,10 +63,10 @@ const CellsShareFileModalContent = ({uuid, cellsRepository}: ShareFileModalParam
       <div css={switchContainerStyles}>
         <div>
           <Label htmlFor="switch-public-link" css={labelStyles}>
-            {t('cellsGlobalView.shareFileModalEnablePublicLink')}
+            {t('cells.shareModal.enablePublicLink')}
           </Label>
           <p id="switch-public-link-description" css={publicLinkDescriptionStyles}>
-            {t('cellsGlobalView.shareFileModalEnablePublicLinkDescription')}
+            {t('cells.shareModal.enablePublicLink.file.description')}
           </p>
         </div>
         <div css={switchWrapperStyles}>
@@ -82,13 +82,13 @@ const CellsShareFileModalContent = ({uuid, cellsRepository}: ShareFileModalParam
       {isEnabled && status === 'success' && link && (
         <div css={inputWrapperStyles}>
           <label htmlFor="generated-public-link" className="visually-hidden">
-            {t('cellsGlobalView.shareFileModalGeneratedPublicLink')}
+            {t('cells.shareModal.generatedPublicLink')}
           </label>
           <Input id="generated-public-link" value={link} wrapperCSS={inputStyles} disabled={isInputDisabled} readOnly />
           <CopyToClipboardButton
             textToCopy={link}
-            displayText={t('cellsGlobalView.shareFileModalCopyLink')}
-            copySuccessText={t('cellsGlobalView.shareFileModalLinkCopied')}
+            displayText={t('cells.shareModal.copyLink')}
+            copySuccessText={t('cells.shareModal.linkCopied')}
           />
         </div>
       )}
@@ -97,7 +97,7 @@ const CellsShareFileModalContent = ({uuid, cellsRepository}: ShareFileModalParam
           <CellsTableLoader />
         </div>
       )}
-      {status === 'error' && <div>{t('cellsGlobalView.shareFileModalErrorLoadingLink')}</div>}
+      {status === 'error' && <div>{t('cells.shareModal.error.loadingLink')}</div>}
     </div>
   );
 };

src/script/components/CellsGlobalView/CellsTable/CellsTableColumns/CellsTableColumns.tsx

@@ -40,36 +40,36 @@ export const getCellsTableColumns = ({
   cellsRepository: CellsRepository;
 }) => [
   columnHelper.accessor('name', {
-    header: t('cellsGlobalView.tableRowName'),
+    header: t('cells.tableRow.name'),
     cell: info => <CellsTableNameColumn file={info.row.original} />,
   }),
   columnHelper.accessor('conversationName', {
-    header: t('cellsGlobalView.tableRowConversationName'),
+    header: t('cells.tableRow.conversationName'),
     cell: info => <span css={textWithEllipsisStyles}>{info.getValue()}</span>,
     size: 190,
   }),
   columnHelper.accessor('owner', {
-    header: t('cellsGlobalView.tableRowOwner'),
+    header: t('cells.tableRow.owner'),
     cell: info => <span css={textWithEllipsisStyles}>{info.getValue()}</span>,
     size: 175,
   }),
   columnHelper.accessor('sizeMb', {
-    header: t('cellsGlobalView.tableRowSize'),
+    header: t('cells.tableRow.size'),
     cell: info => info.getValue(),
     size: 100,
   }),
   columnHelper.accessor('uploadedAtTimestamp', {
-    header: t('cellsGlobalView.tableRowCreated'),
+    header: t('cells.tableRow.created'),
     cell: info => <CellsTableDateColumn timestamp={info.getValue()} />,
     size: 125,
   }),
   columnHelper.accessor('publicLink', {
-    header: t('cellsGlobalView.tableRowPublicLink'),
+    header: t('cells.tableRow.publicLink'),
     cell: info => <CellsTableSharedColumn isShared={!!info.getValue()?.alreadyShared} />,
     size: 60,
   }),
   columnHelper.accessor('id', {
-    header: () => <span className="visually-hidden">{t('cellsGlobalView.tableRowActions')}</span>,
+    header: () => <span className="visually-hidden">{t('cells.tableRow.actions')}</span>,
     size: 40,
     cell: info => (
       <CellsTableRowOptions file={info.row.original} onDelete={onDeleteFile} cellsRepository={cellsRepository} />

src/script/components/CellsGlobalView/CellsTable/CellsTableColumns/CellsTableRowOptions/CellsTableRowOptions.tsx

@@ -46,21 +46,21 @@ export const CellsTableRowOptions = ({file, onDelete, cellsRepository}: CellsTab
   const showDeleteFileModal = useCallback(
     ({uuid, name}: {uuid: string; name: string}) => {
       PrimaryModal.show(PrimaryModal.type.CONFIRM, {
-        primaryAction: {action: () => onDelete(uuid), text: t('cellsGlobalView.optionDelete')},
+        primaryAction: {action: () => onDelete(uuid), text: t('cells.options.delete')},
         text: {
-          message: t('cellsGlobalView.deleteModalDescription', {name}),
-          title: t('cellsGlobalView.deleteModalHeading'),
+          message: t('cells.deleteModal.description', {name}),
+          title: t('cells.deleteModal.heading'),
         },
       });
     },
     [onDelete],
   );
 
   const showOptionsMenu = (event: ReactMouseEvent<HTMLButtonElement> | MouseEvent) => {
-    const openLabel = t('cellsGlobalView.optionOpen');
-    const shareLabel = t('cellsGlobalView.optionShare');
-    const downloadLabel = t('cellsGlobalView.optionDownload');
-    const deleteLabel = t('cellsGlobalView.optionDelete');
+    const openLabel = t('cells.options.open');
+    const shareLabel = t('cells.options.share');
+    const downloadLabel = t('cells.options.download');
+    const deleteLabel = t('cells.options.delete');
 
     const fileUrl = file.fileUrl;
 
@@ -91,13 +91,13 @@ export const CellsTableRowOptions = ({file, onDelete, cellsRepository}: CellsTab
       css={buttonStyles}
       onKeyDown={handleKeyDown}
       onClick={showOptionsMenu}
-      aria-label={t('cellsGlobalView.optionsLabel')}
+      aria-label={t('cells.options.label')}
       aria-controls={id}
       aria-expanded={!!selectedFile}
       aria-haspopup="dialog"
     >
       <MoreIcon css={iconStyles} />
-      <span css={textStyles}>{t('cellsGlobalView.optionsLabel')}</span>
+      <span css={textStyles}>{t('cells.options.label')}</span>
     </button>
   );
 };

src/script/components/CellsGlobalView/CellsTable/CellsTableColumns/CellsTableSharedColumn/CellsTableSharedColumn.tsx

@@ -33,7 +33,7 @@ export const CellsTableSharedColumn = ({isShared}: CellsTableSharedColumnProps)
         <LinkIcon width={10} height={10} />
       </div>
       <span css={textStyles}>
-        {isShared ? t('cellsGlobalView.tableRowSharedTruthyValue') : t('cellsGlobalView.tableRowSharedFalsyValue')}
+        {isShared ? t('cells.tableRow.shared.truthyValue') : t('cells.tableRow.shared.falsyValue')}
       </span>
     </div>
   );

src/script/components/Conversation/ConversationCells/CellsHeader/CellsRefresh/CellsRefresh.tsx

@@ -31,7 +31,7 @@ export const CellsRefresh = ({onRefresh}: CellsRefreshProps) => {
   return (
     <Button variant={ButtonVariant.TERTIARY} onClick={onRefresh} css={buttonStyles}>
       <ReloadIcon css={iconStyles} />
-      {t('cellsGlobalView.refreshButton')}
+      {t('cells.refreshButton')}
     </Button>
   );
 };

src/script/components/Conversation/ConversationCells/CellsHeader/CellsSearch/CellsSearch.tsx

@@ -55,8 +55,8 @@ export const CellsSearch = ({searchValue, onSearch, onClearSearch}: CellsSearchP
     <form css={wrapperStyles} onSubmit={handleSubmit}>
       <Input
         value={searchValue}
-        placeholder={t('cellsGlobalView.searchPlaceholder')}
-        aria-label={t('cellsGlobalView.searchPlaceholder')}
+        placeholder={t('cells.search.placeholder')}
+        aria-label={t('cells.search.placeholder')}
         name="cells-global-view-search"
         onChange={event => onSearch(event.currentTarget.value)}
         startContent={<SearchIcon width={14} height={14} css={searchIconStyles} />}
@@ -67,7 +67,7 @@ export const CellsSearch = ({searchValue, onSearch, onClearSearch}: CellsSearchP
                 type="button"
                 onClick={onClearSearch}
                 css={closeButtonStyles}
-                aria-label={t('cellsGlobalView.searchCloseButton')}
+                aria-label={t('cells.search.closeButton')}
               >
                 <CircleCloseIcon className="cursor-pointer" css={closeIconStyles} />
               </button>