Client: added index arrow to table view if edit index mode enabled

packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js

@@ -251,6 +251,7 @@ const Table = ({
         itemCount={filterTotal}
         useReactWindow={!withPaging}
         infoPanelVisible={infoPanelVisible}
+        isIndexEditingMode={isIndexEditingMode}
         columnInfoPanelStorageName={columnInfoPanelStorageName}
         itemHeight={48}
       >

packages/shared/components/infinite-loader/InfiniteLoader.types.ts

@@ -42,6 +42,7 @@ export interface InfiniteLoaderProps {
   className?: string;
   infoPanelVisible?: boolean;
   countTilesInRow?: number;
+  isIndexEditingMode: boolean;
 }
 
 export interface ListComponentProps extends InfiniteLoaderProps {

packages/shared/components/table/Table.types.ts

@@ -107,6 +107,7 @@ export interface TableBodyProps {
   useReactWindow: boolean;
   onScroll: () => void;
   infoPanelVisible: boolean;
+  isIndexEditingMode: boolean;
 }
 
 export interface TableRowProps {
@@ -120,6 +121,7 @@ export interface TableRowProps {
   title: string;
   getContextModel: () => ContextMenuModel[];
   badgeUrl: string;
+  isIndexEditingMode: boolean;
 }
 
 export interface TableCellProps {

packages/shared/components/table/TableBody.tsx

@@ -44,6 +44,7 @@ const TableBody = (props: TableBodyProps) => {
     useReactWindow = true,
     onScroll,
     infoPanelVisible = false,
+    isIndexEditingMode = false,
   } = props;
 
   return useReactWindow ? (
@@ -64,6 +65,7 @@ const TableBody = (props: TableBodyProps) => {
         itemSize={itemHeight}
         onScroll={onScroll}
         infoPanelVisible={infoPanelVisible}
+        isIndexEditingMode={isIndexEditingMode}
       >
         {children}
       </InfiniteLoaderComponent>

packages/shared/components/table/TableRow.tsx

@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React, { useRef } from "react";
+import ArrowReactSvgUrl from "PUBLIC_DIR/images/arrow2.react.svg?url";
 
 import { ContextMenu } from "../context-menu";
 import {
@@ -36,6 +37,7 @@ import { StyledTableRow } from "./Table.styled";
 import { TableRowProps } from "./Table.types";
 
 import { TableCell } from "./sub-components/TableCell";
+import { ColorTheme, ThemeId } from "../color-theme";
 
 const TableRow = (props: TableRowProps) => {
   const {
@@ -49,6 +51,7 @@ const TableRow = (props: TableRowProps) => {
     title,
     getContextModel,
     badgeUrl,
+    isIndexEditingMode,
     ...rest
   } = props;
 
@@ -96,27 +99,48 @@ const TableRow = (props: TableRowProps) => {
           forwardedRef={row}
           className={`${selectionProp?.className} table-container_row-context-menu-wrapper`}
         >
-          <ContextMenu
-            onHide={onHideContextMenu}
-            ref={cm}
-            model={contextOptions}
-            getContextModel={getContextModel}
-            withBackdrop
-            badgeUrl={badgeUrl}
-          />
-          {renderContext ? (
-            <ContextMenuButton
-              isFill
-              className="expandButton"
-              getData={getOptions}
-              directionX="right"
-              displayType={ContextMenuButtonDisplayType.toggle}
-              onClick={onContextMenu}
-              onClose={onHideContextMenu}
-              title={title}
-            />
+          {isIndexEditingMode ? (
+            <>
+              <ColorTheme
+                themeId={ThemeId.IndexIconButton}
+                iconName={ArrowReactSvgUrl}
+                className="index-up-icon"
+                size="small"
+                // onClick={onClickShare}
+              />
+              <ColorTheme
+                themeId={ThemeId.IndexIconButton}
+                iconName={ArrowReactSvgUrl}
+                className="index-down-icon"
+                size="small"
+                // onClick={onClickShare}
+              />
+            </>
           ) : (
-            <div className="expandButton"> </div>
+            <>
+              <ContextMenu
+                onHide={onHideContextMenu}
+                ref={cm}
+                model={contextOptions}
+                getContextModel={getContextModel}
+                withBackdrop
+                badgeUrl={badgeUrl}
+              />
+              {renderContext ? (
+                <ContextMenuButton
+                  isFill
+                  className="expandButton"
+                  getData={getOptions}
+                  directionX="right"
+                  displayType={ContextMenuButtonDisplayType.toggle}
+                  onClick={onContextMenu}
+                  onClose={onHideContextMenu}
+                  title={title}
+                />
+              ) : (
+                <div className="expandButton"> </div>
+              )}
+            </>
           )}
         </TableCell>
       </div>