Feature/gallery info side panel

frontend/src/components/cur-dir-path/dir-tool.js

@@ -10,6 +10,7 @@ import ViewModes from '../../components/view-modes';
 import ReposSortMenu from '../../components/repos-sort-menu';
 import MetadataViewToolBar from '../../metadata/components/view-toolbar';
 import { PRIVATE_FILE_TYPE } from '../../constants';
+import { DIRENT_DETAIL_MODE } from '../dir-view-mode/constants';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -97,10 +98,14 @@ class DirTool extends React.Component {
     this.props.sortItems(sortBy, sortOrder);
   };
 
+  showDirentDetail = () => {
+    this.props.switchViewMode(DIRENT_DETAIL_MODE);
+  };
+
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
 
@@ -114,7 +119,7 @@ class DirTool extends React.Component {
     if (isFileExtended) {
       return (
         <div className="dir-tool">
-          <MetadataViewToolBar viewId={viewId} />
+          <MetadataViewToolBar viewId={viewId} isCustomPermission={isCustomPermission} showDetail={this.showDirentDetail} />
         </div>
       );
     }
@@ -124,8 +129,8 @@ class DirTool extends React.Component {
         <div className="dir-tool d-flex">
           <ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
           <ReposSortMenu sortOptions={sortOptions} onSelectSortOption={this.onSelectSortOption}/>
-          {(!this.props.isCustomPermission) &&
-            <div className="cur-view-path-btn" onClick={() => this.props.switchViewMode('detail')}>
+          {(!isCustomPermission) &&
+            <div className="cur-view-path-btn" onClick={this.showDirentDetail}>
               <span className="sf3-font sf3-font-info" aria-label={propertiesText} title={propertiesText}></span>
             </div>
           }

frontend/src/components/dir-view-mode/constants.js

@@ -1,4 +1,5 @@
 export const LIST_MODE = 'list';
 export const GRID_MODE = 'grid';
+export const DIRENT_DETAIL_MODE = 'detail';
 export const METADATA_MODE = 'metadata';
 export const FACE_RECOGNITION_MODE = 'person_image';

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -80,6 +80,7 @@ const propTypes = {
   fullDirentList: PropTypes.array,
   onItemsScroll: PropTypes.func.isRequired,
   eventBus: PropTypes.object,
+  updateCurrentDirent: PropTypes.func.isRequired,
 };
 
 class DirColumnView extends React.Component {
@@ -202,6 +203,7 @@ class DirColumnView extends React.Component {
               viewID={this.props.viewId}
               deleteFilesCallback={this.props.deleteFilesCallback}
               renameFileCallback={this.props.renameFileCallback}
+              updateCurrentDirent={this.props.updateCurrentDirent}
             />
           }
           {currentMode === FACE_RECOGNITION_MODE &&

frontend/src/components/dirent-detail/detail-container.js

@@ -2,12 +2,16 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LibDetail from './lib-details';
 import DirentDetail from './dirent-details';
+import ViewDetails from '../../metadata/components/view-details';
 import ObjectUtils from '../../metadata/utils/object-utils';
 import { MetadataContext } from '../../metadata';
+import { PRIVATE_FILE_TYPE } from '../../constants';
 
 const DetailContainer = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
 
   useEffect(() => {
+    if (path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) return;
+
     // init context
     const context = new MetadataContext();
     window.sfMetadataContext = context;
@@ -16,7 +20,26 @@ const DetailContainer = React.memo(({ repoID, path, dirent, currentRepoInfo, rep
       window.sfMetadataContext.destroy();
       delete window['sfMetadataContext'];
     };
-  }, [repoID, currentRepoInfo]);
+  }, [repoID, currentRepoInfo, path]);
+
+  if (path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) {
+    const viewId = path.split('/').pop();
+    if (!dirent) return (
+      <ViewDetails viewId={viewId} onClose={onClose} />
+    );
+    return (
+      <DirentDetail
+        repoID={repoID}
+        path={dirent.path}
+        dirent={dirent}
+        currentRepoInfo={currentRepoInfo}
+        repoTags={repoTags}
+        fileTags={fileTags}
+        onFileTagChanged={onFileTagChanged}
+        onClose={onClose}
+      />
+    );
+  }
 
   if (path === '/' && !dirent) {
     return (

frontend/src/components/dirent-detail/detail/header/index.css

@@ -16,6 +16,15 @@
   width: 0; /* prevent strut flex layout */
 }
 
+.detail-header .detail-title .detail-header-icon-container {
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 .detail-header .detail-title .name {
   margin: 0 0.5rem 0 6px;
   line-height: 1.5rem;

frontend/src/components/dirent-detail/detail/header/index.js

@@ -4,12 +4,14 @@ import Icon from '../../../icon';
 
 import './index.css';
 
-const Header = ({ title, icon, onClose, component = {} }) => {
+const Header = ({ title, icon, iconSize = 32, onClose, component = {} }) => {
   const { closeIcon } = component;
   return (
     <div className="detail-header">
       <div className="detail-title dirent-title">
-        <img src={icon} width="32" height="32" alt="" />
+        <div className="detail-header-icon-container">
+          <img src={icon} width={iconSize} height={iconSize} alt="" />
+        </div>
         <span className="name ellipsis" title={title}>{title}</span>
       </div>
       <div className="detail-control" onClick={onClose}>
@@ -22,6 +24,7 @@ const Header = ({ title, icon, onClose, component = {} }) => {
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
+  iconSize: PropTypes.number,
   component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
 };

frontend/src/components/dirent-detail/dirent-details/index.css

@@ -42,3 +42,8 @@
 .detail-body .sf-metadata-property-detail-tags.tags-empty {
   padding: 6.5px 6px;;
 }
+
+.detail-body .detail-content.detail-content-empty {
+  width: 100%;
+  height: 100%;
+}

frontend/src/metadata/components/view-details/index.css

@@ -0,0 +1,3 @@
+.sf-metadata-view-detail .detail-content-empty .empty-tip {
+  margin: 0;
+}

frontend/src/metadata/components/view-details/index.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { gettext, mediaUrl } from '../../../utils/constants';
+import { Detail, Header, Body } from '../../../components/dirent-detail/detail';
+import EmptyTip from '../../../components/empty-tip';
+import { useMetadata } from '../../hooks';
+import { VIEW_TYPE } from '../../constants';
+
+import './index.css';
+
+const ViewDetails = ({ viewId, onClose }) => {
+  const { viewsMap } = useMetadata();
+
+  const view = useMemo(() => viewsMap[viewId], [viewId, viewsMap]);
+  const icon = useMemo(() => {
+    const type = view.type;
+    if (type === VIEW_TYPE.GALLERY) return `${mediaUrl}favicons/gallery.png`;
+    if (type === VIEW_TYPE.TABLE) return `${mediaUrl}favicons/table.png`;
+  }, [view]);
+
+  return (
+    <Detail className="sf-metadata-view-detail">
+      <Header title={view.name} icon={icon} iconSize={28} onClose={onClose} />
+      <Body>
+        <div className="detail-content detail-content-empty">
+          <EmptyTip text={gettext('There is no information to display.')} />
+        </div>
+      </Body>
+    </Detail>
+  );
+};
+
+ViewDetails.propTypes = {
+  viewId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ViewDetails;

frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { GalleryGroupBySetter, GallerySliderSetter, FilterSetter, SortSetter } from '../../data-process-setter';
+import { PRIVATE_COLUMN_KEY } from '../../../constants';
+import { gettext } from '../../../../utils/constants';
+
+const GalleryViewToolbar = ({
+  readOnly, isCustomPermission, view, collaborators,
+  modifyFilters, modifySorts, showDetail,
+}) => {
+  const viewType = useMemo(() => view.type, [view]);
+  const viewColumns = useMemo(() => {
+    if (!view) return [];
+    return view.columns;
+  }, [view]);
+
+  const filterColumns = useMemo(() => {
+    return viewColumns.filter(c => c.key !== PRIVATE_COLUMN_KEY.FILE_TYPE);
+  }, [viewColumns]);
+
+  return (
+    <>
+      <div className="sf-metadata-tool-left-operations">
+        <GalleryGroupBySetter view={view} />
+        <GallerySliderSetter view={view} />
+        <FilterSetter
+          isNeedSubmit={true}
+          wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-filter"
+          filtersClassName="sf-metadata-filters"
+          target="sf-metadata-filter-popover"
+          readOnly={readOnly}
+          filterConjunction={view.filter_conjunction}
+          basicFilters={view.basic_filters}
+          filters={view.filters}
+          columns={filterColumns}
+          modifyFilters={modifyFilters}
+          collaborators={collaborators}
+          viewType={viewType}
+        />
+        <SortSetter
+          isNeedSubmit={true}
+          wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-sort"
+          target="sf-metadata-sort-popover"
+          readOnly={readOnly}
+          sorts={view.sorts}
+          type={viewType}
+          columns={viewColumns}
+          modifySorts={modifySorts}
+        />
+        {!isCustomPermission && (
+          <div className="cur-view-path-btn ml-2" onClick={showDetail}>
+            <span className="sf3-font sf3-font-info" aria-label={gettext('Properties')} title={gettext('Properties')}></span>
+          </div>
+        )}
+      </div>
+      <div className="sf-metadata-tool-right-operations"></div>
+    </>
+  );
+};
+
+GalleryViewToolbar.propTypes = {
+  readOnly: PropTypes.bool,
+  isCustomPermission: PropTypes.bool,
+  view: PropTypes.object.isRequired,
+  collaborators: PropTypes.array,
+  modifyFilters: PropTypes.func,
+  modifySorts: PropTypes.func,
+  showDetail: PropTypes.func,
+};
+
+export default GalleryViewToolbar;

frontend/src/metadata/components/view-toolbar/index.js

@@ -1,23 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { GalleryGroupBySetter, GallerySliderSetter, FilterSetter, GroupbySetter, SortSetter, HideColumnSetter } from '../data-process-setter';
-import { EVENT_BUS_TYPE, PRIVATE_COLUMN_KEY, VIEW_TYPE } from '../../constants';
+import { EVENT_BUS_TYPE, VIEW_TYPE } from '../../constants';
+import TableViewToolbar from './table-view-toolbar';
+import GalleryViewToolbar from './gallery-view-toolbar';
 
 import './index.css';
 
-const ViewToolBar = ({ viewId }) => {
+const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
   const [view, setView] = useState(null);
   const [collaborators, setCollaborators] = useState([]);
 
-  const viewColumns = useMemo(() => {
-    if (!view) return [];
-    return view.columns;
-  }, [view]);
-
-  const filterColumns = useMemo(() => {
-    return viewColumns.filter(c => c.key !== PRIVATE_COLUMN_KEY.FILE_TYPE);
-  }, [viewColumns]);
-
   const onHeaderClick = useCallback(() => {
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.SELECT_NONE);
   }, []);
@@ -67,74 +59,44 @@ const ViewToolBar = ({ viewId }) => {
   if (!view) return null;
 
   const viewType = view.type;
-  const readOnly = !window.sfMetadataContext.canModifyView(view);
+  const readOnly = window.sfMetadataContext ? !window.sfMetadataContext.canModifyView(view) : true;
 
   return (
     <div
       className="sf-metadata-tool"
       onClick={onHeaderClick}
     >
-      <div className="sf-metadata-tool-left-operations">
-        {viewType === VIEW_TYPE.GALLERY && (
-          <>
-            <GalleryGroupBySetter view={view} />
-            <GallerySliderSetter view={view} />
-          </>
-        )}
-        <FilterSetter
-          isNeedSubmit={true}
-          wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-filter"
-          filtersClassName="sf-metadata-filters"
-          target="sf-metadata-filter-popover"
+      {viewType === VIEW_TYPE.TABLE && (
+        <TableViewToolbar
           readOnly={readOnly}
-          filterConjunction={view.filter_conjunction}
-          basicFilters={view.basic_filters}
-          filters={view.filters}
-          columns={filterColumns}
-          modifyFilters={modifyFilters}
+          view={view}
           collaborators={collaborators}
-          viewType={viewType}
+          modifyFilters={modifyFilters}
+          modifySorts={modifySorts}
+          modifyGroupbys={modifyGroupbys}
+          modifyHiddenColumns={modifyHiddenColumns}
+          modifyColumnOrder={modifyColumnOrder}
         />
-        <SortSetter
-          isNeedSubmit={true}
-          wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-sort"
-          target="sf-metadata-sort-popover"
+      )}
+      {viewType === VIEW_TYPE.GALLERY && (
+        <GalleryViewToolbar
           readOnly={readOnly}
-          sorts={view.sorts}
-          type={viewType}
-          columns={viewColumns}
+          isCustomPermission={isCustomPermission}
+          view={view}
+          collaborators={collaborators}
+          modifyFilters={modifyFilters}
           modifySorts={modifySorts}
+          showDetail={showDetail}
         />
-        {viewType !== VIEW_TYPE.GALLERY && (
-          <GroupbySetter
-            isNeedSubmit={true}
-            wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-groupby"
-            target="sf-metadata-groupby-popover"
-            readOnly={readOnly}
-            columns={viewColumns}
-            groupbys={view.groupbys}
-            modifyGroupbys={modifyGroupbys}
-          />
-        )}
-        {viewType !== VIEW_TYPE.GALLERY && (
-          <HideColumnSetter
-            wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-hide-column"
-            target="sf-metadata-hide-column-popover"
-            readOnly={readOnly}
-            columns={viewColumns.slice(1)}
-            hiddenColumns={view.hidden_columns || []}
-            modifyHiddenColumns={modifyHiddenColumns}
-            modifyColumnOrder={modifyColumnOrder}
-          />
-        )}
-      </div>
-      <div className="sf-metadata-tool-right-operations"></div>
+      )}
     </div>
   );
 };
 
 ViewToolBar.propTypes = {
   viewId: PropTypes.string,
+  isCustomPermission: PropTypes.bool,
+  switchViewMode: PropTypes.func,
 };
 
 export default ViewToolBar;