-
Notifications
You must be signed in to change notification settings - Fork 46
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #161 from datacamp/oge-2482-ui-improvements
[OGE-2482] UI improvements
- Loading branch information
Showing
21 changed files
with
2,641 additions
and
972 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 |
|---|---|---|
|
|
@@ -6,7 +6,8 @@ orbs: | |
| queue: eddiewebb/[email protected] | ||
| datacamp-deploy-branch: datacamp/deploy-branch@1 | ||
| datacamp-artifactory: datacamp/artifactory@1 | ||
|
|
||
| datacamp-circleci: datacamp/central-ci@2 | ||
|
|
||
| workflows: | ||
| # BEGIN ANSIBLE MANAGED BLOCK | ||
| build-and-deploy-eks: | ||
|
|
@@ -23,9 +24,8 @@ workflows: | |
| - datacamp-artifactory/build_and_push_image_to_artifactory: &dockerBuild | ||
| name: docker-build | ||
| context: org-global | ||
| extra-docker-args: '--build-arg VERSION=$(git describe --tags)' | ||
| extra-docker-args: '--build-arg NPM_TOKEN=${NPM_TOKEN} --build-arg VERSION=$(git describe --tags)' | ||
| dockerfile: Dockerfile | ||
| docker-version: 20.10.2 | ||
| executor: datacamp-artifactory/buildkit | ||
| repo: rdocumentation | ||
| requires: | ||
|
|
@@ -47,9 +47,8 @@ workflows: | |
| artifactory-url: artifactory-proxy-public.ops.datacamp.com | ||
| name: docker-build | ||
| context: org-global | ||
| extra-docker-args: "--build-arg NPM_TOKEN=${NPM_TOKEN}" | ||
| extra-docker-args: '--build-arg NPM_TOKEN=${NPM_TOKEN} --build-arg VERSION=$(git describe --tags)' | ||
| dockerfile: Dockerfile | ||
| docker-version: 20.10.2 | ||
| executor: datacamp-artifactory/buildkit | ||
| repo: rdocumentation | ||
| filters: | ||
|
|
||
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 @@ | ||
| v16.20.1 |
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 |
|---|---|---|
| @@ -1,127 +1,156 @@ | ||
| import { Heading, Paragraph } from "@datacamp/waffles-text"; | ||
| import router from "next/router"; | ||
| import { useEffect, useState } from "react"; | ||
| import { API_URL } from "../lib/utils"; | ||
| /** @jsxImportSource @emotion/react */ | ||
|
|
||
| import { Heading } from '@datacamp/waffles/heading'; | ||
| import { Paragraph } from '@datacamp/waffles/paragraph'; | ||
| import { tokens } from '@datacamp/waffles/tokens'; | ||
| import router from 'next/router'; | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| import { API_URL } from '../lib/utils'; | ||
|
|
||
| type Props = { | ||
| searchInput: string | ||
| searchInput: string; | ||
| }; | ||
|
|
||
| export default function AutoComplete({ searchInput }: Props) { | ||
| const liStyle = { | ||
| '&:hover': { | ||
| backgroundColor: tokens.colors.greySubtle, | ||
| borderRadius: tokens.borderRadius.medium, | ||
| cursor: 'pointer', | ||
| }, | ||
| }; | ||
|
|
||
| const paragraphStyle = { | ||
| color: tokens.colors.navy, | ||
| marginBottom: 0, | ||
| }; | ||
|
|
||
| const Autocomplete = ({ searchInput }: Props) => { | ||
| const [packageSuggestions, setPackageSuggestions] = useState([]); | ||
| const [topicSuggestions, setTopicSuggestions] = useState([]); | ||
|
|
||
| function onClick(query) { | ||
| router.push(`/search?q=${encodeURIComponent(query)}`); | ||
| }; | ||
| function onClick(query) { | ||
| router.push(`/search?q=${encodeURIComponent(query)}`); | ||
| } | ||
|
|
||
| async function autoComplete(query) { | ||
| try { | ||
| // fetch the data | ||
| const [resPackages, resTopics] = await Promise.all([ | ||
| fetch( | ||
| `${API_URL}/search_packages?q=${query}&page=1&latest=1`, | ||
| { | ||
| headers: { | ||
| Accept: 'application/json', | ||
| }, | ||
| }, | ||
| ), | ||
| fetch( | ||
| `${API_URL}/search_functions?q=${query}&page=1&latest=1`, | ||
| { | ||
| headers: { | ||
| Accept: 'application/json', | ||
| }, | ||
| }, | ||
| ) | ||
| ]); | ||
|
|
||
| const { packages } = await resPackages?.json(); | ||
| const functions = await resTopics?.json(); | ||
| const topics = functions?.functions; | ||
| const relevantPackages = packages?.filter((p)=>(p?.score>1)); | ||
| const relevantTopics = topics?.filter((p)=>(p?.score>1)); | ||
| setPackageSuggestions(relevantPackages?.slice(0, Math.min(relevantPackages?.length, 5))); | ||
| setTopicSuggestions(relevantTopics?.slice(0, Math.min(relevantTopics?.length, 5))); | ||
|
|
||
| } catch (err) { | ||
| console.error(err); | ||
| } | ||
| }; | ||
| async function autoComplete(query) { | ||
| try { | ||
| // fetch the data | ||
| const [resPackages, resTopics] = await Promise.all([ | ||
| fetch(`${API_URL}/search_packages?q=${query}&page=1&latest=1`, { | ||
| headers: { | ||
| Accept: 'application/json', | ||
| }, | ||
| }), | ||
| fetch(`${API_URL}/search_functions?q=${query}&page=1&latest=1`, { | ||
| headers: { | ||
| Accept: 'application/json', | ||
| }, | ||
| }), | ||
| ]); | ||
|
|
||
| useEffect(()=>{ | ||
| autoComplete(searchInput); | ||
| }, [searchInput]) | ||
| const { packages } = await resPackages?.json(); | ||
| const functions = await resTopics?.json(); | ||
| const topics = functions?.functions; | ||
| const relevantPackages = packages?.filter((p) => p?.score > 1); | ||
| const relevantTopics = topics?.filter((p) => p?.score > 1); | ||
| setPackageSuggestions( | ||
| relevantPackages?.slice(0, Math.min(relevantPackages?.length, 5)), | ||
| ); | ||
| setTopicSuggestions( | ||
| relevantTopics?.slice(0, Math.min(relevantTopics?.length, 5)), | ||
| ); | ||
| } catch (err) { | ||
| console.error(err); | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div className="my-2 bg-white rounded-2xl shadow-lg"> | ||
| { | ||
| searchInput | ||
| && | ||
| <div | ||
| onClick={()=>onClick(searchInput)} | ||
| className="flex items-center px-4 py-4 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5" | ||
| > | ||
| <Paragraph className="pl-2 py-2">{`View results for "${searchInput}"`}</Paragraph> | ||
| </div> | ||
| } | ||
| <div> | ||
| { | ||
| packageSuggestions?.length>0 | ||
| && | ||
| searchInput | ||
| && | ||
| <ul> | ||
| <li className="my-2 ml-2 pl-4 text-dc-grey200 flex justify-between"> | ||
| <Heading as="h3" size={300}>PACKAGES</Heading> | ||
| useEffect(() => { | ||
| autoComplete(searchInput); | ||
| }, [searchInput]); | ||
|
|
||
| return ( | ||
| <div | ||
| className="my-2 bg-white shadow-lg" | ||
| css={{ borderRadius: tokens.borderRadius.medium }} | ||
| > | ||
| {searchInput && ( | ||
| <div | ||
| className="flex items-center px-4 py-4" | ||
| css={liStyle} | ||
| onClick={() => onClick(searchInput)} | ||
| > | ||
| <Paragraph | ||
| className="pl-2 py-2" | ||
| css={paragraphStyle} | ||
| >{`View results for "${searchInput}"`}</Paragraph> | ||
| </div> | ||
| )} | ||
| <div> | ||
| {packageSuggestions?.length > 0 && searchInput && ( | ||
| <ul> | ||
| <li className="my-2 pl-4 flex justify-between"> | ||
| <Heading | ||
| as="h3" | ||
| css={{ ...paragraphStyle, textTransform: 'uppercase' }} | ||
| > | ||
| Packages | ||
| </Heading> | ||
| </li> | ||
| {packageSuggestions?.map((p) => { | ||
| return ( | ||
| <li | ||
| className="flex items-center px-4 py-2" | ||
| css={liStyle} | ||
| key={p?.fields?.package_name} | ||
| onClick={() => onClick(p?.fields?.package_name)} | ||
| > | ||
| <Paragraph className="pl-2 text-lg" css={paragraphStyle}> | ||
| {p?.fields?.package_name} | ||
| </Paragraph> | ||
| </li> | ||
| { | ||
| packageSuggestions?.map((p)=>{ | ||
| return ( | ||
| <li | ||
| key={p?.fields?.package_name} | ||
| onClick={()=>onClick(p?.fields?.package_name)} | ||
| className="flex items-center px-4 py-2 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5" | ||
| > | ||
| <Paragraph className="pl-2 text-lg">{p?.fields?.package_name}</Paragraph> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| } | ||
| </div> | ||
| <div> | ||
| { | ||
| topicSuggestions?.length>0 | ||
| && | ||
| searchInput | ||
| && | ||
| <ul> | ||
| <li className="my-2 ml-2 pl-4 text-dc-grey200 flex justify-between"> | ||
| <Heading as="h3" size={300}>FUNCTIONS</Heading> | ||
| ); | ||
| })} | ||
| </ul> | ||
| )} | ||
| </div> | ||
| <div> | ||
| {topicSuggestions?.length > 0 && searchInput && ( | ||
| <ul> | ||
| <li className="my-2 pl-4 flex justify-between"> | ||
| <Heading | ||
| as="h3" | ||
| css={{ ...paragraphStyle, textTransform: 'uppercase' }} | ||
| > | ||
| Functions | ||
| </Heading> | ||
| </li> | ||
| {topicSuggestions?.map((t) => { | ||
| return ( | ||
| <li | ||
| className="flex items-center px-4 py-2" | ||
| css={liStyle} | ||
| key={t?.fields?.package_name + t?.fields?.name} | ||
| onClick={() => onClick(t?.fields?.name)} | ||
| > | ||
| <div> | ||
| <Paragraph | ||
| css={paragraphStyle} | ||
| >{`${t?.fields?.name}`}</Paragraph> | ||
| </div> | ||
| <div> | ||
| <Paragraph | ||
| css={paragraphStyle} | ||
| >{`(${t?.fields?.package_name})`}</Paragraph> | ||
| </div> | ||
| </li> | ||
| { | ||
| topicSuggestions?.map((t)=>{ | ||
| return ( | ||
| <li | ||
| key={t?.fields?.package_name+t?.fields?.name} | ||
| onClick={()=>onClick(t?.fields?.name)} | ||
| className="flex items-center px-4 py-2 cursor-pointer hover:bg-dc-beige200 hover:opacity-0.5" | ||
| > | ||
| <div> | ||
| <Paragraph className="px-2 text-lg">{`${t?.fields?.name}`}</Paragraph> | ||
| </div> | ||
| <div> | ||
| <Paragraph className="text-lg text-dc-red">{`(${t?.fields?.package_name})`}</Paragraph> | ||
| </div> | ||
| </li> | ||
| ) | ||
| })} | ||
| </ul> | ||
| } | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| ); | ||
| })} | ||
| </ul> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Autocomplete; |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.