Merge branch 'develop' into feature/search-by-content-query

apps/sensenet/cypress/e2e/content/action_bar.cy.ts

@@ -0,0 +1,22 @@
+import { PATHS, resolvePathParams } from '../../../src/application-paths'
+import { pathWithQueryParams } from '../../../src/services/query-string-builder'
+
+describe('Action bar testing', () => {
+  beforeEach(() => {
+    cy.login()
+    cy.visit(
+      pathWithQueryParams({
+        path: resolvePathParams({ path: PATHS.content.appPath, params: { browseType: 'explorer' } }),
+        newParams: { repoUrl: Cypress.env('repoUrl'), path: '/SampleWorkspace/Document_Library' },
+      }),
+    )
+  })
+
+  it('should edit button show in action bar', () => {
+    cy.get('[data-test="menu-item-document-library"]').rightclick({ force: true })
+    cy.get('[data-test="content-context-menu-browse"]').click()
+    cy.get('[data-test="viewtitle-edit"]').should('be.visible').click()
+    cy.get('[data-test="viewtitle-details"]').should('be.visible').click()
+    cy.get('[data-test="viewtitle-edit"]').should('be.visible')
+  })
+})

apps/sensenet/src/components/Icon.tsx

@@ -11,6 +11,7 @@ import {
   DeleteOutlined,
   DescriptionOutlined,
   DomainOutlined,
+  Edit,
   ErrorOutlined,
   EventOutlined,
   FiberNew,
@@ -173,6 +174,10 @@ const getIconByName = (name: string | undefined, options: IconOptions) => {
       return <InlineIcon icon={vercelIcon} width="24" />
     case 'Heroku':
       return <InlineIcon icon={herokuIcon} height="24" />
+    case 'Edit':
+      return <Edit style={options.style} />
+    case 'Details':
+      return <Info style={options.style} />
     default:
       return null
   }

apps/sensenet/src/components/view-controls/browse-view.tsx

@@ -63,7 +63,7 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
         ...classes,
         cancel: globalClasses.cancelButton,
       }}
-      renderTitle={() => <ViewTitle title={'Info about'} titleBold={content?.DisplayName} content={content} />}
+      renderTitle={() => <ViewTitle actionName="browse" titleBold={content?.DisplayName} content={content} />}
     />
   )
 }

apps/sensenet/src/components/view-controls/common/view-title.tsx

@@ -7,13 +7,14 @@ import { useHistory } from 'react-router'
 import { ResponsivePersonalSettings } from '../../../context'
 import { useGlobalStyles } from '../../../globalStyles'
 import { useSnRoute } from '../../../hooks'
-import { getPrimaryActionUrl } from '../../../services'
+import { getPrimaryActionUrl, getUrlForContent } from '../../../services'
 import { Icon } from '../../Icon'
 
 interface ViewTitleProps {
-  title: string
+  title?: string
   titleBold?: string
   content?: GenericContent
+  actionName?: string
 }
 
 const useStyles = makeStyles(() => {
@@ -22,10 +23,15 @@ const useStyles = makeStyles(() => {
       height: '68px',
       fontSize: '20px',
       flexShrink: 0,
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
     },
     textBolder: {
       fontWeight: 500,
     },
+    actionBar: {
+      display: 'flex',
+    },
   })
 })
 
@@ -57,37 +63,98 @@ export const ViewTitle: React.FunctionComponent<ViewTitleProps> = (props) => {
 
   return (
     <div className={clsx(classes.title, globalClasses.centered)}>
-      <span data-test="viewtitle">
+      <div data-test="viewtitle">
         {props.title} <span className={classes.textBolder}>{props.titleBold}</span>
-      </span>
-      {props.content && (
-        <span
-          title={`Open ${contentDisplayName} CTD`}
-          onClick={async () => {
-            const content = await getContentTypeId(props.content!.Type)
-            history.push(
-              getPrimaryActionUrl({
-                content,
-                repository,
-                location: history.location,
-                uiSettings,
-                snRoute,
-                removePath: true,
-              }),
-            )
-          }}
-          className={globalClasses.centered}>
-          <Icon
-            style={{
-              marginLeft: '9px',
-              height: '24px',
-              width: '24px',
-              cursor: 'pointer',
+      </div>
+      <div className={classes.actionBar}>
+        {props.actionName === 'browse' && (
+          <span
+            data-test="viewtitle-edit"
+            title={`Open ${contentDisplayName} Edit Page`}
+            onClick={async () => {
+              history.push(
+                getUrlForContent({
+                  content: props.content!,
+                  uiSettings,
+                  location: history.location,
+                  action: 'edit',
+                  snRoute,
+                  removePath: true,
+                }),
+              )
+            }}
+            className={globalClasses.centered}>
+            <Icon
+              style={{
+                marginLeft: '4px',
+                marginRight: '4px',
+                height: '24px',
+                width: '24px',
+                cursor: 'pointer',
+              }}
+              item={{ Icon: 'Edit' }}
+            />
+          </span>
+        )}
+        {props.actionName === 'edit' && (
+          <span
+            data-test="viewtitle-details"
+            title={`Open ${contentDisplayName} Details Page`}
+            onClick={async () => {
+              history.push(
+                getUrlForContent({
+                  content: props.content!,
+                  uiSettings,
+                  location: history.location,
+                  action: 'browse',
+                  snRoute,
+                  removePath: true,
+                }),
+              )
+            }}
+            className={globalClasses.centered}>
+            <Icon
+              style={{
+                marginLeft: '4px',
+                marginRight: '4px',
+                height: '24px',
+                width: '24px',
+                cursor: 'pointer',
+              }}
+              item={{ Icon: 'Details' }}
+            />
+          </span>
+        )}
+        {props.content && (
+          <span
+            title={`Open ${contentDisplayName} CTD`}
+            onClick={async () => {
+              const content = await getContentTypeId(props.content!.Type)
+              history.push(
+                getPrimaryActionUrl({
+                  content,
+                  repository,
+                  location: history.location,
+                  uiSettings,
+                  snRoute,
+                  removePath: true,
+                }),
+              )
             }}
-            item={{ ContentTypeName: 'ContentType' }}
-          />
-        </span>
-      )}
+            className={globalClasses.centered}>
+            <Icon
+              style={{
+                marginLeft: '4px',
+                marginRight: '4px',
+                height: '24px',
+                width: '24px',
+                cursor: 'pointer',
+              }}
+              item={{ ContentTypeName: 'ContentType' }}
+            />
+          </span>
+        )}
+      </div>
     </div>
   )
 }

apps/sensenet/src/components/view-controls/edit-view.tsx

@@ -117,9 +117,10 @@ export const EditView: React.FC<EditViewProps> = (props) => {
       }}
       renderTitle={() => (
         <ViewTitle
-          title={props.actionName === 'browse' ? 'Info about' : 'Edit'}
+          title={props.actionName === 'browse' ? '' : 'Edit'}
           titleBold={content?.DisplayName}
           content={content}
+          actionName={props.actionName}
         />
       )}
     />