tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: style adjustments for api tab (#3447)

Browse Source
This commit is contained in:
Jarrod Flesch
2023-10-06 10:39:15 -04:00
committed by GitHub
parent d73596a670
commit d063c93394
5 changed files with 13 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/payload/src/admin/components/forms/field-types/Checkbox/index.scss
View File

@@ -22,6 +22,10 @@
label {
padding-bottom: 0;
padding-left: base(0.5);
&[for] {
cursor: pointer;
}
}
[dir='rtl'] &__input {

3
packages/payload/src/admin/components/views/API/index.scss
View File

@@ -4,7 +4,7 @@
--string-color: #11b102;
--number-color: #62c3f3;
display: flex;
gap: var(--base);
gap: calc(var(--base) * 2);
align-items: flex-start;
&--fullscreen {
@@ -96,6 +96,7 @@
padding-bottom: calc(var(--base) * 0.5);
background-color: var(--theme-elevation-50);
overflow: auto;
min-height: 100vh;
}
&__json-children {

8
packages/payload/src/admin/components/views/API/index.tsx
View File

@@ -216,10 +216,16 @@ export const API = ({ apiURL }) => {
<div className={`${baseClass}__form-fields`}>
<div className={`${baseClass}__filter-query-checkboxes`}>
{draftsEnabled && (
<CheckboxInput checked={draft} label="Draft" onToggle={() => setDraft(!draft)} />
<CheckboxInput
checked={draft}
id="draft-checkbox"
label="Draft"
onToggle={() => setDraft(!draft)}
/>
)}
<CheckboxInput
checked={authenticated}
id="auth-checkbox"
label="Authenticated"
onToggle={() => setAuthenticated(!authenticated)}
/>

107
packages/payload/src/admin/components/views/RestAPI/index.scss
View File

@@ -1,107 +0,0 @@
.query-inspector {
display: flex;
gap: var(--base);
}
.query-inspector__configuration {
margin-top: calc(var(--base) * 2);
}
.query-inspector__results-container {
--inspector-bg: var(--theme-elevation-50);
overflow: auto;
background-color: var(--inspector-bg);
flex-grow: 1;
padding-top: calc(var(--base) * 0.5);
padding-left: calc(var(--base) * 0.5);
padding-bottom: calc(var(--base) * 0.5);
.json-formatter-constructor-name,
.json-formatter-constructor-name + *,
> .json-formatter-row > .json-formatter-toggler-link {
display: none;
}
> .json-formatter-row {
border: none !important;
}
.json-formatter-constructor-name,
.json-formatter-key,
.json-formatter-bracket {
color: var(--theme-text);
}
.json-formatter-row {
position: relative;
}
.json-formatter-children {
position: relative;
}
.json-formatter-toggler-link {
display: flex;
align-items: center;
gap: 5px;
}
.json-formatter-toggler-link {
&:before {
content: '';
position: absolute;
width: 0px;
border-left: 1px dashed var(--theme-elevation-400);
opacity: 0.5;
height: calc(100% - 25px);
top: 25px;
bottom: 0;
left: 0;
}
}
.json-formatter-row .json-formatter-toggler {
height: 5px;
width: 5px;
position: relative;
opacity: 1;
&:after {
content: '';
display: inline-block;
position: absolute;
border: 4px solid transparent;
border-left-color: var(--theme-text);
transform: translate3d(-50%, -50%, 0px) !important;
left: 0;
top: 5px;
}
}
.json-formatter-row.json-formatter-open > .json-formatter-toggler-link > .json-formatter-toggler {
&:after {
border-top-color: var(--theme-text);
border-left-color: transparent;
}
}
.json-formatter-key {
}
.json-formatter-number {
color: #62c3f3;
}
}
html[data-theme='dark'] {
.query-inspector__results-container {
.json-formatter-toggler {
}
.json-formatter-key {
}
.json-formatter-number {
}
}
}

61
packages/payload/src/admin/components/views/RestAPI/index.tsx
View File

@@ -1,61 +0,0 @@
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import { requests } from '../../../api'
import { Gutter } from '../../elements/Gutter'
import TextInput from '../../forms/field-types/Text/Input'
import { useConfig } from '../../utilities/Config'
import { useDocumentInfo } from '../../utilities/DocumentInfo'
import './index.scss'
const baseClass = 'query-inspector'
export const QueryInspector = () => {
const { id, collection } = useDocumentInfo()
const { serverURL } = useConfig()
const { i18n } = useTranslation()
const [query, setQuery] = React.useState<string>('')
const containerRef = React.useRef<HTMLDivElement>(null)
React.useEffect(() => {
const fetchData = async () => {
if (id) {
const request = await requests.get(
`${serverURL}/api/${collection.slug}/${id}${query ? `${query}` : ''}`,
{
headers: {
'Accept-Language': i18n.language,
},
},
)
const json = await request.json()
// const formatter = new JsonFormatter(json, Infinity)
// const formattedJSON = formatter.render()
containerRef.current.innerHTML = '' // Clear previous content
containerRef.current.appendChild(json)
}
}
fetchData()
}, [id, collection, serverURL, i18n.language, query])
return (
<Gutter className={baseClass} right={false}>
<div className={`${baseClass}__configuration`}>
<h3 className={`${baseClass}__configuration-title`}>Query Builder</h3>
<TextInput
name="query"
onChange={(e) => setQuery(e.target.value)}
path="query"
placeholder="?depth=1"
value={query}
/>
</div>
<div className={`${baseClass}__results-container`} ref={containerRef} />
</Gutter>
)
}