diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js index eb0a2f47ab..aa6a5a9a53 100644 --- a/frontend/src/components/cur-dir-path/dir-path.js +++ b/frontend/src/components/cur-dir-path/dir-path.js @@ -2,6 +2,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { Link } from '@reach/router'; import { siteRoot, gettext } from '../../utils/constants'; +import InternalLinkDialog from '../dialog/internal-link-dialog'; const propTypes = { repoName: PropTypes.string.isRequired, @@ -9,6 +10,8 @@ const propTypes = { onPathClick: PropTypes.func.isRequired, onTabNavClick: PropTypes.func, pathPrefix: PropTypes.array, + repoID: PropTypes.string.isRequired, + isViewFile: PropTypes.bool.isRequired, }; class DirPath extends React.Component { @@ -78,6 +81,11 @@ class DirPath extends React.Component { {repoName} } {pathElem} + { this.props.isViewFile && + + } ); } diff --git a/frontend/src/components/cur-dir-path/index.js b/frontend/src/components/cur-dir-path/index.js index a048622aa1..1b8b224df1 100644 --- a/frontend/src/components/cur-dir-path/index.js +++ b/frontend/src/components/cur-dir-path/index.js @@ -11,6 +11,7 @@ const propTypes = { onPathClick: PropTypes.func.isRequired, onTabNavClick: PropTypes.func, pathPrefix: PropTypes.array, + isViewFile: PropTypes.bool.isRequired, }; class CurDirPath extends React.Component { @@ -24,6 +25,8 @@ class CurDirPath extends React.Component { currentPath={this.props.currentPath} onPathClick={this.props.onPathClick} onTabNavClick={this.props.onTabNavClick} + repoID={this.props.repoID} + isViewFile={this.props.isViewFile} /> { + this.setState({ + isOpen: true, + smartLink: res.data.smart_link + }); + }); + } + + copyToClipBoard() { + copy(this.state.smartLink); + this.setState({ + isOpen: false + }); + let message = gettext('Copy internal link'); + toaster.success(message), { + duration: 2 + }; + } + + render() { + let internalLinkDesc = 'An internal link is a link to a file or folder that can be accessed by users with read permission to the file or folder.'; + return ( + + + + {gettext('Internal Link')} + + + {gettext(internalLinkDesc)} + + + {this.state.smartLink} + + + + {gettext('Copy')}{' '} + {gettext('Cancel')} + + + + ); + } +} + +InternalLinkDialog.propTypes = propTypes; + +export default InternalLinkDialog; diff --git a/frontend/src/css/internal-link.css b/frontend/src/css/internal-link.css new file mode 100644 index 0000000000..8d4c3ea33a --- /dev/null +++ b/frontend/src/css/internal-link.css @@ -0,0 +1,10 @@ +.file-internal-link { + font-size: .875rem; + cursor: pointer; + margin-left: .5rem; + vertical-align: text-bottom; +} + +.file-internal-link { + color: #585858; +} diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js index ffc7ffc952..50638d90c8 100644 --- a/frontend/src/pages/repo-wiki-mode/main-panel.js +++ b/frontend/src/pages/repo-wiki-mode/main-panel.js @@ -208,6 +208,7 @@ class MainPanel extends Component { currentPath={this.props.path} permission={permission} onPathClick={this.onMainNavBarClick} + isViewFile={this.props.isViewFile} /> )}
+ {gettext(internalLinkDesc)} +
+ {this.state.smartLink} +