Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking β€œSign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bnr/copy wrapper #1122

Draft
wants to merge 33 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
0b4e578
WIP search sharing in URL
patnir41 Jun 22, 2022
95436a4
URL search param will update search box in sidenav
patnir41 Jun 23, 2022
dcb882a
Avoid string | null errors
patnir41 Jun 24, 2022
850b64b
WIP search query back button and slow input box
patnir41 Jun 24, 2022
40caab1
Functional query routing with accurate browser history, WIP testing
patnir41 Jun 29, 2022
754c84f
Removed comment
patnir41 Jun 29, 2022
de28036
Added navigation utility file, helper function for pushing routing wi…
patnir41 Jun 30, 2022
d26203e
Functional with spec and search and method/types chosen
patnir41 Jul 1, 2022
1a013f1
WIP: mocking ApiExplorer.tsx useEffect on location search
patnir41 Jul 12, 2022
02afef8
Quick addition
patnir41 Jul 12, 2022
1c41c03
WIP: getting testing to work.
patnir41 Jul 13, 2022
a8a0451
WIP comments
patnir41 Jul 13, 2022
671d3dc
WIP: working SideNav tests
patnir41 Jul 13, 2022
281eb27
Tests working, need to now add final few
patnir41 Jul 13, 2022
1467970
New properly working navigate function with unit tests, working exist…
patnir41 Jul 13, 2022
1f5ac10
Refactoring some comments out, fixed to pass tests, removed APIExplor…
patnir41 Jul 14, 2022
2a664cd
Minor refactoring to add readability/cleanliness
patnir41 Jul 14, 2022
6cb274a
Per feedback from John and Joseph, WIP: navigation hook
patnir41 Jul 15, 2022
516c106
Created custom navigation hook, replaced history pushes where necessary
patnir41 Jul 15, 2022
0ed839a
Added changes per Bryn's comments, new buildNavigationPath
patnir41 Jul 16, 2022
addc668
updated edit for buildNavigationPath
patnir41 Jul 16, 2022
aaba996
Merge branch 'main' into search-query-route-update
jkaster Jul 18, 2022
bfdaf8f
Merge branch 'main' into search-query-route-update
jkaster Jul 18, 2022
1f2857e
Changes per Joseph's feedback
patnir41 Jul 19, 2022
7c3124e
Added location.search as dependency in SideNav useEffect
patnir41 Jul 19, 2022
e69bb82
Copy button functional within inner search box; need to migrate to se…
patnir41 Jul 16, 2022
0f5211f
Proper CopyLinkButton file set up
patnir41 Jul 18, 2022
7276e0a
URL icon updated with recent PR branch functional, less style component
patnir41 Jul 19, 2022
25d2d6c
Unit test for CopyLinkButton
patnir41 Jul 19, 2022
e4c7919
Unit tests + functionality fixed, using Span
patnir41 Jul 19, 2022
a4017d3
Merge branch 'main' into patnir41/url-sharing-icon
patnir41 Jul 19, 2022
bd4ced9
Added unit test to SideNav, refactored code
patnir41 Jul 20, 2022
e806099
copy wrapper
bryans99 Jul 21, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Proper CopyLinkButton file set up
  • Loading branch information
patnir41 committed Jul 19, 2022
commit 0f5211f5df3fb820f038c13af205ad8cbf8b74c7
Original file line number Diff line number Diff line change
@@ -28,31 +28,31 @@ import { IconButton } from '@looker/components'
import { Link } from '@styled-icons/material-outlined/Link'
import styled from 'styled-components'

export const CopyLink = styled('span')`
position: absolute;
top: 4px;
right: 36px;
display: ${(props) => props.display};
`

export const SearchWithLinkCopy = styled('div')`
position: relative;
width: 100%;
`

export const CopyLinkTooltip = () => {
interface CopyLinkButtonProps {
visible: boolean
}
export const CopyLinkButton = ({ visible }: CopyLinkButtonProps) => {
const [title, CopyLinkTooltip] = useState('Copy link to this page view')
return (
<IconButton
onClick={async () => {
CopyLinkTooltip('Copied to clipboard')
await navigator.clipboard.writeText(location.href)
}}
onMouseEnter={() => CopyLinkTooltip('Copy link to this section')}
size="small"
icon={<Link />}
label={title}
tooltipPlacement="bottom"
/>
<CopyLink visible={visible}>
<IconButton
onClick={async () => {
CopyLinkTooltip('Copied to clipboard')
await navigator.clipboard.writeText(location.href)
}}
onMouseEnter={() => CopyLinkTooltip('Copy link to this section')}
size="small"
icon={<Link />}
label={title}
tooltipPlacement="bottom"
/>
</CopyLink>
)
}

const CopyLink = styled('span')<{ visible: boolean }>`
position: absolute;
top: 4px;
right: 36px;
display: ${({ visible }) => (visible ? 'block' : 'none')};
`
40 changes: 6 additions & 34 deletions packages/api-explorer/src/components/SideNav/SideNav.tsx
Original file line number Diff line number Diff line change
@@ -34,10 +34,8 @@ import {
TabPanels,
useTabs,
InputSearch,
IconButton,
Box2,
} from '@looker/components'
import { Link } from '@styled-icons/material-outlined/Link'
import type {
SpecItem,
ISearchResult,
@@ -51,6 +49,7 @@ import styled from 'styled-components'
import { useWindowSize, useNavigation } from '../../utils'
import { HEADER_REM } from '../Header'
import { selectSearchCriteria, selectSearchPattern } from '../../state'
import { CopyLinkButton } from '../CopyLinkButton'
import { SideNavMethodTags } from './SideNavMethodTags'
import { SideNavTypeTags } from './SideNavTypeTags'
import { useDebounce, countMethods, countTypes } from './searchUtils'
@@ -70,23 +69,6 @@ interface SideNavProps {
spec: SpecItem
}

const CopyLinkTooltip = () => {
const [title, CopyLinkTooltip] = useState('Copy link to this page view')
return (
<IconButton
onClick={async () => {
CopyLinkTooltip('Copied to clipboard')
await navigator.clipboard.writeText(location.href)
}}
onMouseEnter={() => CopyLinkTooltip('Copy link to this section')}
size="small"
icon={<Link />}
label={title}
tooltipPlacement="bottom"
/>
)
}

export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
const location = useLocation()
const navigate = useNavigation()
@@ -116,7 +98,7 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
const searchCriteria = useSelector(selectSearchCriteria)
const searchPattern = useSelector(selectSearchPattern)
const [pattern, setSearchPattern] = useState(searchPattern)
const [copyLinkButtonDisplay, setCopyLinkButtonDisplay] = useState('none')
const [showCopyLinkButton, setShowCopyLinkButton] = useState(false)
const debouncedPattern = useDebounce(pattern, 250)
const [sideNavState, setSideNavState] = useState<SideNavState>(() => ({
tags: spec?.api?.tags || {},
@@ -180,13 +162,7 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
const headlessOffset = headless ? 200 : 120
const menuH = size.height - 16 * HEADER_REM - headlessOffset

const CopyLink = styled('span')`
position: absolute;
top: 4px;
right: 36px;
display: ${copyLinkButtonDisplay};
`

// TODO: can remove
const SearchWithLinkCopy = styled('div')`
position: relative;
width: 100%;
@@ -202,14 +178,10 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
placeholder="Search"
value={pattern}
isClearable
onMouseOver={() =>
setCopyLinkButtonDisplay(pattern ? 'block' : 'none')
}
onMouseOut={() => setCopyLinkButtonDisplay('none')}
onMouseOver={() => setShowCopyLinkButton(!!pattern)}
onMouseOut={() => setShowCopyLinkButton(false)}
/>
<CopyLink>
<CopyLinkTooltip />
</CopyLink>
<CopyLinkButton visible={showCopyLinkButton} />
<SearchMessage search={searchResults} />
</SearchWithLinkCopy>
</Box2>
1 change: 1 addition & 0 deletions packages/api-explorer/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@

*/
export { ApixSection, Loader } from './common'
export { CopyLinkButton } from './CopyLinkButton'
export { DocActivityType } from './DocActivityType'
export { DocCode } from './DocCode'
export { DocMethodSummary, DocSummaryStatus } from './DocMethodSummary'