-
Notifications
You must be signed in to change notification settings - Fork 497
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* [WIP] Feature - CLI Tutor Mode Signed-off-by: Jasdeep Singh <[email protected]> * Update src/components/cli-tutor-mode/CliTutorMode.js Co-authored-by: Jessica Schilling <[email protected]> * Update src/components/cli-tutor-mode/CliTutorMode.js Co-authored-by: Jessica Schilling <[email protected]> * Align fix: cli tutor modal buttons Signed-off-by: Jasdeep Singh <[email protected]> * Fix: added compatibility with ApiAddressForm component Signed-off-by: Jasdeep Singh <[email protected]> * Fix: added bundle-reactx pattern and en translation keys Signed-off-by: Jasdeep Singh <[email protected]> * i18n text change * Standardize i18n and visual style on Settings page * Text tweak; replace CliTutorMode.css with tachyons equivalents * Left-justify shell content in modals for consistency * Tidy visual presentation of modals * Size tweak for icon on Files page * Use StrokeCode instead of CopyIcon, adjust text accordingly * Lighten icon on settings page explainer text * Margin consistency * Update src/bundles/files/consts.js Co-authored-by: Marcin Rataj <[email protected]> * Move lh-copy so doesn't fubar checkbox styling * Fix: Close modal on copy to clipboard Signed-off-by: Jasdeep Singh <[email protected]> * Fix: rename file command Signed-off-by: Jasdeep Singh <[email protected]> * Fix: delete file by filepath and added type information for cliCommandList Signed-off-by: Jasdeep Singh <[email protected]> * fix: whitespace in ipfs files rm Without this below will fail: ipfs files rm -r /test/white space/flowers.jpeg * fix: remove UPDATE_API_SERVER_ADDRESS This removed CLI tutor from "API Adddress" selector because it does not make sense: "API ADDRESS" section does not change the config of IPFS node, but defines the API which WebUI will use when connecting to the node. * fix: eslint * fix: remove angle brackets from i18n strings text between < and > won't be translated because Transifex blackboxes HTML tags, it is better to remove it * Move cliModal i18n keys into app.json See https://react.i18next.com/guides/multiple-translation-files * Move copyCommand & relevant close i18n keys into app.json * fix: include files cp step The way import via Webui works is: 1. `ipfs add` produces CID 2. we create a reference to that CID in MFS We do this to produce the same CID as regular ipfs add from CLI would do, mainly to avoid issue described in: #676 * refactor: make it easier to support path Right now CLI tutor defaults to MFS root at /, this makes it easier to include current path in the future. Co-authored-by: Jessica Schilling <[email protected]> Co-authored-by: Marcin Rataj <[email protected]>
- Loading branch information
3 people
authored
Aug 26, 2020
1 parent
ea1a836
commit b08b14e
Showing
19 changed files
with
417 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,3 +21,4 @@ yarn-debug.log* | |
| yarn-error.log* | ||
|
|
||
| .vscode | ||
| .idea | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { createAsyncResourceBundle, createSelector } from 'redux-bundler' | ||
|
|
||
| const bundle = createAsyncResourceBundle({ | ||
| name: 'cliTutorMode', | ||
| actionBaseType: 'CLI_TUTOR_MODE_TOGGLE', | ||
| persist: true, | ||
| checkIfOnline: false, | ||
| getPromise: () => {} | ||
| }) | ||
|
|
||
| bundle.reactIsCliTutorModeEnabled = createSelector( | ||
| 'selectIsCliTutorModeEnabled', | ||
| (isCliTutorModeEnabled) => { | ||
| const isEnabled = Boolean(JSON.parse(localStorage.getItem('isCliTutorModeEnabled'))) | ||
|
|
||
| if (isCliTutorModeEnabled !== undefined && isCliTutorModeEnabled !== isEnabled) { | ||
| localStorage.setItem('isCliTutorModeEnabled', isCliTutorModeEnabled) | ||
| } | ||
| } | ||
| ) | ||
|
|
||
| bundle.selectIsCliTutorModeEnabled = state => state.cliTutorMode.isCliTutorModeEnabled | ||
|
|
||
| bundle.selectIsCliTutorModalOpen = state => !!state.cliTutorMode.showCliTutorModal | ||
|
|
||
| bundle.selectCliOptions = state => state.cliTutorMode.cliOptions | ||
|
|
||
| bundle.reducer = (state = {}, action) => { | ||
| if (action.type === 'CLI_TUTOR_MODE_TOGGLE') { | ||
| return { ...state, isCliTutorModeEnabled: action.payload } | ||
| } | ||
| if (action.type === 'CLI_TUTOR_MODAL_ENABLE') { | ||
| return { ...state, showCliTutorModal: action.payload } | ||
| } | ||
| if (action.type === 'CLI_OPTIONS') { | ||
| return { ...state, cliOptions: action.payload } | ||
| } | ||
|
|
||
| return state | ||
| } | ||
|
|
||
| bundle.doToggleCliTutorMode = key => ({ dispatch }) => { | ||
| dispatch({ | ||
| type: 'CLI_TUTOR_MODE_TOGGLE', | ||
| payload: key | ||
| }) | ||
| } | ||
|
|
||
| bundle.doSetCliOptions = cliOptions => ({ dispatch }) => { | ||
| dispatch({ | ||
| type: 'CLI_OPTIONS', | ||
| payload: cliOptions | ||
| }) | ||
| } | ||
|
|
||
| bundle.doOpenCliTutorModal = openModal => ({ dispatch }) => { | ||
| dispatch({ | ||
| type: 'CLI_TUTOR_MODAL_ENABLE', | ||
| payload: openModal | ||
| }) | ||
| } | ||
|
|
||
| bundle.doOpenCliTutorModal = openModal => ({ dispatch }) => { | ||
| dispatch({ | ||
| type: 'CLI_TUTOR_MODAL_ENABLE', | ||
| payload: openModal | ||
| }) | ||
| } | ||
|
|
||
| bundle.init = store => { | ||
| const isEnabled = Boolean(JSON.parse(localStorage.getItem('isCliTutorModeEnabled'))) | ||
| return store.doToggleCliTutorMode(isEnabled) | ||
| } | ||
| export default bundle |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| import React, { Fragment } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { connect } from 'redux-bundler-react' | ||
|
|
||
| // Components | ||
| import { Modal, ModalBody, ModalActions } from '../modal/Modal' | ||
| import StrokeCode from '../../icons/StrokeCode' | ||
| import Button from '../button/Button' | ||
| import Overlay from '../overlay/Overlay' | ||
| import Shell from '../shell/Shell' | ||
| import StrokeDownload from '../../icons/StrokeDownload' | ||
| import { cliCmdKeys, cliCommandList } from '../../bundles/files/consts' | ||
|
|
||
| export const CliTutorialModal = ({ command, t, onLeave, className, downloadConfig, ...props }) => { | ||
| const onClickCopyToClipboard = (cmd) => { | ||
| navigator.clipboard.writeText(cmd).then(() => { | ||
| onLeave() | ||
| }) | ||
| } | ||
|
|
||
| return ( | ||
| <Modal {...props} className={className} onCancel={onLeave} style={{ maxWidth: '40em' }}> | ||
| <ModalBody icon={StrokeCode}> | ||
| <p className='charcoal w-80 center' style={{ lineHeight: '1.3' }}> | ||
| {t('app:cliModal.description')} | ||
| </p> | ||
| <p className='charcoal-muted w-90 center'> | ||
| { command && command === cliCommandList[cliCmdKeys.UPDATE_IPFS_CONFIG]() ? t('app:cliModal.extraNotes') : ''} | ||
| </p> | ||
| <div> | ||
| <Shell className='tl' title="Shell"> | ||
| <code className='db'><b className='no-select'>$ </b>{command}</code> | ||
| </Shell> | ||
| </div> | ||
| </ModalBody> | ||
|
|
||
| <ModalActions> | ||
| <div> | ||
| <Button className='ma2 tc' bg='bg-gray' onClick={onLeave}>{t('app:actions.close')}</Button> | ||
| </div> | ||
| <div className='flex items-center'> | ||
| { | ||
| command && command === cliCommandList[cliCmdKeys.UPDATE_IPFS_CONFIG]() | ||
| ? <StrokeDownload onClick={downloadConfig} className='dib fill-link pointer' style={{ height: 38 }} | ||
| /> : <div /> | ||
| } | ||
| <Button className='ma2 tc' onClick={() => onClickCopyToClipboard(command)}> | ||
| {t('app:actions.copyCommand')} | ||
| </Button> | ||
| </div> | ||
| </ModalActions> | ||
| </Modal> | ||
| ) | ||
| } | ||
|
|
||
| const CliTutorMode = ({ | ||
| t, filesPage, isCliTutorModeEnabled, onLeave, isCliTutorModalOpen, command, config, showIcon, doOpenCliTutorModal | ||
| }) => { | ||
| const downloadConfig = (config) => { | ||
| const url = window.URL.createObjectURL(new Blob([config])) | ||
| const link = document.createElement('a') | ||
| link.style.display = 'none' | ||
| link.href = url | ||
| link.download = 'settings.json' | ||
| document.body.appendChild(link) | ||
| link.click() | ||
| window.URL.revokeObjectURL(url) | ||
| } | ||
|
|
||
| if (isCliTutorModeEnabled) { | ||
| if (filesPage) { | ||
| return <CliTutorialModal className='outline-0' onLeave={onLeave} t={t} command={command}/> | ||
| } | ||
| return ( | ||
| <Fragment> | ||
| { | ||
| showIcon | ||
| ? <StrokeCode onClick={() => doOpenCliTutorModal(true)} className='dib fill-link pointer mh2' style={{ height: 44 }}/> | ||
| : <div/> | ||
| } | ||
| <Overlay show={isCliTutorModalOpen} onLeave={() => doOpenCliTutorModal(false)}> | ||
| <CliTutorialModal className='outline-0' onLeave={() => doOpenCliTutorModal(false)} t={t} command={command} | ||
| downloadConfig={() => downloadConfig(config)}/> | ||
| </Overlay> | ||
| </Fragment> | ||
| ) | ||
| } | ||
|
|
||
| return null | ||
| } | ||
|
|
||
| CliTutorialModal.propTypes = { | ||
| onLeave: PropTypes.func.isRequired, | ||
| t: PropTypes.func.isRequired, | ||
| command: PropTypes.string.isRequired | ||
| } | ||
|
|
||
| CliTutorialModal.defaultProps = { | ||
| className: '' | ||
| } | ||
|
|
||
| export default connect( | ||
| 'doOpenCliTutorModal', | ||
| 'selectIsCliTutorModalOpen', | ||
| 'selectIsCliTutorModeEnabled', | ||
| CliTutorMode | ||
| ) |
Oops, something went wrong.