chore: run prettier

This commit is contained in:
Matthew Penner 2023-01-12 12:31:47 -07:00
parent 9cdbbc3a00
commit 155d7bb876
No known key found for this signature in database
76 changed files with 788 additions and 550 deletions

View file

@ -1,11 +1,26 @@
import http from '@/api/http';
import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
export default (name: string, host: string, port: number, username: string, password: string, include: string[] = []): Promise<Database> => {
export default (
name: string,
host: string,
port: number,
username: string,
password: string,
include: string[] = [],
): Promise<Database> => {
return new Promise((resolve, reject) => {
http.post('/api/application/databases', {
name, host, port, username, password,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/databases',
{
name,
host,
port,
username,
password,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToDatabase(data)))
.catch(reject);
});

View file

@ -54,11 +54,13 @@ export default (include: string[] = []) => {
}
return useSWR<PaginatedResult<Database>>(['databases', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/databases', { params: { include: include.join(','), page, ...params } });
const { data } = await http.get('/api/application/databases', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToDatabase),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

View file

@ -17,9 +17,7 @@ export default (filters?: Filters): Promise<Database[]> => {
return new Promise((resolve, reject) => {
http.get('/api/application/databases', { params })
.then(response => resolve(
(response.data.data || []).map(rawDataToDatabase)
))
.then(response => resolve((response.data.data || []).map(rawDataToDatabase)))
.catch(reject);
});
};

View file

@ -1,11 +1,27 @@
import http from '@/api/http';
import { Database, rawDataToDatabase } from '@/api/admin/databases/getDatabases';
export default (id: number, name: string, host: string, port: number, username: string, password: string | undefined, include: string[] = []): Promise<Database> => {
export default (
id: number,
name: string,
host: string,
port: number,
username: string,
password: string | undefined,
include: string[] = [],
): Promise<Database> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/databases/${id}`, {
name, host, port, username, password,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/databases/${id}`,
{
name,
host,
port,
username,
password,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToDatabase(data)))
.catch(reject);
});

View file

@ -1,13 +1,11 @@
import http from '@/api/http';
import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles: string, configStartup: string };
type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles: string; configStartup: string };
export default (egg: Partial<Egg2>): Promise<Egg> => {
return new Promise((resolve, reject) => {
http.post(
'/api/application/eggs',
{
http.post('/api/application/eggs', {
nest_id: egg.nestId,
name: egg.name,
description: egg.description,
@ -23,8 +21,7 @@ export default (egg: Partial<Egg2>): Promise<Egg> => {
script_entry: egg.scriptEntry,
script_is_privileged: egg.scriptIsPrivileged,
script_install: egg.scriptInstall,
},
)
})
.then(({ data }) => resolve(rawDataToEgg(data)))
.catch(reject);
});

View file

@ -5,9 +5,7 @@ import { Transformers } from '@definitions/admin';
export type CreateEggVariable = Omit<EggVariable, 'id' | 'eggId' | 'createdAt' | 'updatedAt' | 'relationships'>;
export default async (eggId: number, variable: CreateEggVariable): Promise<EggVariable> => {
const { data } = await http.post(
`/api/application/eggs/${eggId}/variables`,
{
const { data } = await http.post(`/api/application/eggs/${eggId}/variables`, {
name: variable.name,
description: variable.description,
env_variable: variable.environmentVariable,
@ -15,8 +13,7 @@ export default async (eggId: number, variable: CreateEggVariable): Promise<EggVa
user_viewable: variable.isUserViewable,
user_editable: variable.isUserEditable,
rules: variable.rules,
},
);
});
return Transformers.toEggVariable(data);
};

View file

@ -1,13 +1,11 @@
import http from '@/api/http';
import { Egg, rawDataToEgg } from '@/api/admin/eggs/getEgg';
type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles?: string, configStartup?: string };
type Egg2 = Omit<Omit<Partial<Egg>, 'configFiles'>, 'configStartup'> & { configFiles?: string; configStartup?: string };
export default (id: number, egg: Partial<Egg2>): Promise<Egg> => {
return new Promise((resolve, reject) => {
http.patch(
`/api/application/eggs/${id}`,
{
http.patch(`/api/application/eggs/${id}`, {
nest_id: egg.nestId,
name: egg.name,
description: egg.description,
@ -23,8 +21,7 @@ export default (id: number, egg: Partial<Egg2>): Promise<Egg> => {
script_entry: egg.scriptEntry,
script_is_privileged: egg.scriptIsPrivileged,
script_install: egg.scriptInstall,
},
)
})
.then(({ data }) => resolve(rawDataToEgg(data)))
.catch(reject);
});

View file

@ -2,7 +2,10 @@ import http from '@/api/http';
import { EggVariable } from '@/api/admin/egg';
import { Transformers } from '@definitions/admin';
export default async (eggId: number, variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[]): Promise<EggVariable[]> => {
export default async (
eggId: number,
variables: Omit<EggVariable, 'eggId' | 'createdAt' | 'updatedAt'>[],
): Promise<EggVariable[]> => {
const { data } = await http.patch(
`/api/application/eggs/${eggId}/variables`,
variables.map(variable => ({

View file

@ -4,11 +4,11 @@ export interface VersionData {
panel: {
current: string;
latest: string;
}
};
wings: {
latest: string;
}
};
git: string | null;
}

View file

@ -13,8 +13,8 @@ export type UUID = string;
export type WithRelationships<M extends Model, R extends string> = Omit<M, 'relationships'> & {
relationships: Omit<M['relationships'], keyof R> & {
[K in R]: NonNullable<M['relationships'][K]>;
}
}
};
};
/**
* Helper type that allows you to infer the type of an object by giving

View file

@ -3,9 +3,14 @@ import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations'
export default (short: string, long: string | null, include: string[] = []): Promise<Location> => {
return new Promise((resolve, reject) => {
http.post('/api/application/locations', {
short, long,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/locations',
{
short,
long,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToLocation(data)))
.catch(reject);
});

View file

@ -44,11 +44,13 @@ export default (include: string[] = []) => {
}
return useSWR<PaginatedResult<Location>>(['locations', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/locations', { params: { include: include.join(','), page, ...params } });
const { data } = await http.get('/api/application/locations', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToLocation),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

View file

@ -17,9 +17,7 @@ export default (filters?: Filters): Promise<Location[]> => {
return new Promise((resolve, reject) => {
http.get('/api/application/locations', { params })
.then(response => resolve(
(response.data.data || []).map(rawDataToLocation)
))
.then(response => resolve((response.data.data || []).map(rawDataToLocation)))
.catch(reject);
});
};

View file

@ -3,9 +3,14 @@ import { Location, rawDataToLocation } from '@/api/admin/locations/getLocations'
export default (id: number, short: string, long: string | null, include: string[] = []): Promise<Location> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/locations/${id}`, {
short, long,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/locations/${id}`,
{
short,
long,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToLocation(data)))
.catch(reject);
});

View file

@ -1,11 +1,28 @@
import http from '@/api/http';
import { Mount, rawDataToMount } from '@/api/admin/mounts/getMounts';
export default (name: string, description: string, source: string, target: string, readOnly: boolean, userMountable: boolean, include: string[] = []): Promise<Mount> => {
export default (
name: string,
description: string,
source: string,
target: string,
readOnly: boolean,
userMountable: boolean,
include: string[] = [],
): Promise<Mount> => {
return new Promise((resolve, reject) => {
http.post('/api/application/mounts', {
name, description, source, target, read_only: readOnly, user_mountable: userMountable,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/mounts',
{
name,
description,
source,
target,
read_only: readOnly,
user_mountable: userMountable,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToMount(data)))
.catch(reject);
});

View file

@ -40,7 +40,9 @@ export const rawDataToMount = ({ attributes }: FractalResponseData): Mount => ({
relations: {
eggs: ((attributes.relationships?.eggs as FractalResponseList | undefined)?.data || []).map(rawDataToEgg),
nodes: ((attributes.relationships?.nodes as FractalResponseList | undefined)?.data || []).map(rawDataToNode),
servers: ((attributes.relationships?.servers as FractalResponseList | undefined)?.data || []).map(rawDataToServer),
servers: ((attributes.relationships?.servers as FractalResponseList | undefined)?.data || []).map(
rawDataToServer,
),
},
});
@ -70,11 +72,13 @@ export default (include: string[] = []) => {
}
return useSWR<PaginatedResult<Mount>>(['mounts', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/mounts', { params: { include: include.join(','), page, ...params } });
const { data } = await http.get('/api/application/mounts', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToMount),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

View file

@ -1,11 +1,29 @@
import http from '@/api/http';
import { Mount, rawDataToMount } from '@/api/admin/mounts/getMounts';
export default (id: number, name: string, description: string | null, source: string, target: string, readOnly: boolean, userMountable: boolean, include: string[] = []): Promise<Mount> => {
export default (
id: number,
name: string,
description: string | null,
source: string,
target: string,
readOnly: boolean,
userMountable: boolean,
include: string[] = [],
): Promise<Mount> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/mounts/${id}`, {
name, description, source, target, read_only: readOnly, user_mountable: userMountable,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/mounts/${id}`,
{
name,
description,
source,
target,
read_only: readOnly,
user_mountable: userMountable,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToMount(data)))
.catch(reject);
});

View file

@ -3,9 +3,14 @@ import { Nest, rawDataToNest } from '@/api/admin/nests/getNests';
export default (name: string, description: string | null, include: string[] = []): Promise<Nest> => {
return new Promise((resolve, reject) => {
http.post('/api/application/nests', {
name, description,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/nests',
{
name,
description,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToNest(data)))
.catch(reject);
});

View file

@ -28,11 +28,13 @@ export default (nestId: number, include: string[] = []) => {
}
return useSWR<PaginatedResult<Egg>>([nestId, 'eggs', page, filters, sort, sortDirection], async () => {
const { data } = await http.get(`/api/application/nests/${nestId}/eggs`, { params: { include: include.join(','), page, ...params } });
const { data } = await http.get(`/api/application/nests/${nestId}/eggs`, {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToEgg),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

View file

@ -15,7 +15,7 @@ export interface Nest {
relations: {
eggs: Egg[] | undefined;
},
};
}
export const rawDataToNest = ({ attributes }: FractalResponseData): Nest => ({
@ -56,11 +56,13 @@ export default (include: string[] = []) => {
}
return useSWR<PaginatedResult<Nest>>(['nests', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/nests', { params: { include: include.join(','), page, ...params } });
const { data } = await http.get('/api/application/nests', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToNest),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

View file

@ -3,9 +3,14 @@ import { Nest, rawDataToNest } from '@/api/admin/nests/getNests';
export default (id: number, name: string, description: string | null, include: string[] = []): Promise<Nest> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/nests/${id}`, {
name, description,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/nests/${id}`,
{
name,
description,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToNest(data)))
.catch(reject);
});

View file

@ -75,7 +75,10 @@ export const searchNodes = async (params: QueryBuilderParams<'name'>): Promise<N
return data.data.map(Transformers.toNode);
};
export const getAllocations = async (id: string | number, params?: QueryBuilderParams<'ip' | 'server_id'>): Promise<Allocation[]> => {
export const getAllocations = async (
id: string | number,
params?: QueryBuilderParams<'ip' | 'server_id'>,
): Promise<Allocation[]> => {
const { data } = await http.get(`/api/application/nodes/${id}/allocations`, {
params: withQueryBuilderParams(params),
});

View file

@ -29,11 +29,13 @@ export default (id: number, include: string[] = []) => {
}
return useSWR<PaginatedResult<Allocation>>(['allocations', page, filters, sort, sortDirection], async () => {
const { data } = await http.get(`/api/application/nodes/${id}/allocations`, { params: { include: include.join(','), page, ...params } });
const { data } = await http.get(`/api/application/nodes/${id}/allocations`, {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToAllocation),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

View file

@ -25,7 +25,7 @@ export interface Values {
export default (values: Values, include: string[] = []): Promise<Node> => {
const data = {};
Object.keys(values).forEach((key) => {
Object.keys(values).forEach(key => {
const key2 = key
.replace('HTTP', 'Http')
.replace('SFTP', 'Sftp')

View file

@ -11,7 +11,7 @@ export interface Allocation {
relations: {
server?: Server;
}
};
getDisplayText(): string;
}
@ -25,7 +25,10 @@ export const rawDataToAllocation = ({ attributes }: FractalResponseData): Alloca
assigned: attributes.assigned,
relations: {
server: attributes.relationships?.server?.object === 'server' ? rawDataToServer(attributes.relationships.server as FractalResponseData) : undefined,
server:
attributes.relationships?.server?.object === 'server'
? rawDataToServer(attributes.relationships.server as FractalResponseData)
: undefined,
},
// TODO: If IP is an IPv6, wrap IP in [].
@ -38,7 +41,7 @@ export const rawDataToAllocation = ({ attributes }: FractalResponseData): Alloca
});
export interface Filters {
ip?: string
ip?: string;
/* eslint-disable camelcase */
server_id?: string;
/* eslint-enable camelcase */

View file

@ -33,7 +33,7 @@ export interface Node {
relations: {
databaseHost: Database | undefined;
location: Location | undefined;
}
};
}
export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
@ -63,8 +63,15 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
relations: {
// eslint-disable-next-line camelcase
databaseHost: attributes.relationships?.database_host !== undefined && attributes.relationships?.database_host.object !== 'null_resource' ? rawDataToDatabase(attributes.relationships.database_host as FractalResponseData) : undefined,
location: attributes.relationships?.location !== undefined ? rawDataToLocation(attributes.relationships.location as FractalResponseData) : undefined,
databaseHost:
attributes.relationships?.database_host !== undefined &&
attributes.relationships?.database_host.object !== 'null_resource'
? rawDataToDatabase(attributes.relationships.database_host as FractalResponseData)
: undefined,
location:
attributes.relationships?.location !== undefined
? rawDataToLocation(attributes.relationships.location as FractalResponseData)
: undefined,
},
});
@ -97,11 +104,13 @@ export default (include: string[] = []) => {
}
return useSWR<PaginatedResult<Node>>(['nodes', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/nodes', { params: { include: include.join(','), page, ...params } });
const { data } = await http.get('/api/application/nodes', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToNode),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

View file

@ -4,7 +4,7 @@ import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
export default (id: number, node: Partial<Node>, include: string[] = []): Promise<Node> => {
const data = {};
Object.keys(node).forEach((key) => {
Object.keys(node).forEach(key => {
const key2 = key
.replace('HTTP', 'Http')
.replace('SFTP', 'Sftp')

View file

@ -13,9 +13,14 @@ export const Context = createContext<Filters>();
const createRole = (name: string, description: string | null, include: string[] = []): Promise<UserRole> => {
return new Promise((resolve, reject) => {
http.post('/api/application/roles', {
name, description,
}, { params: { include: include.join(',') } })
http.post(
'/api/application/roles',
{
name,
description,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(Transformers.toUserRole(data)))
.catch(reject);
});
@ -48,18 +53,26 @@ const searchRoles = (filters?: { name?: string }): Promise<UserRole[]> => {
return new Promise((resolve, reject) => {
http.get('/api/application/roles', { params })
.then(response => resolve(
(response.data.data || []).map(Transformers.toUserRole)
))
.then(response => resolve((response.data.data || []).map(Transformers.toUserRole)))
.catch(reject);
});
};
const updateRole = (id: number, name: string, description: string | null, include: string[] = []): Promise<UserRole> => {
const updateRole = (
id: number,
name: string,
description: string | null,
include: string[] = [],
): Promise<UserRole> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/roles/${id}`, {
name, description,
}, { params: { include: include.join(',') } })
http.patch(
`/api/application/roles/${id}`,
{
name,
description,
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(Transformers.toUserRole(data)))
.catch(reject);
});
@ -84,20 +97,15 @@ const getRoles = (include: string[] = []) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
return useSWR<PaginatedResult<UserRole>>(['roles', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/roles', { params: { include: include.join(','), page, ...params } });
const { data } = await http.get('/api/application/roles', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(Transformers.toUserRole),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};
export {
createRole,
deleteRole,
getRole,
searchRoles,
updateRole,
getRoles,
};
export { createRole, deleteRole, getRole, searchRoles, updateRole, getRoles };

View file

@ -16,7 +16,7 @@ export interface CreateServerRequest {
cpu: number;
threads: string;
oomDisabled: boolean;
}
};
featureLimits: {
allocations: number;
@ -39,7 +39,9 @@ export interface CreateServerRequest {
export default (r: CreateServerRequest, include: string[] = []): Promise<Server> => {
return new Promise((resolve, reject) => {
http.post('/api/application/servers', {
http.post(
'/api/application/servers',
{
externalId: r.externalId,
name: r.name,
description: r.description,
@ -73,7 +75,9 @@ export default (r: CreateServerRequest, include: string[] = []): Promise<Server>
image: r.image,
skip_scripts: r.skipScripts,
start_on_completion: r.startOnCompletion,
}, { params: { include: include.join(',') } })
},
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToServer(data)))
.catch(reject);
});

View file

@ -41,7 +41,7 @@ export const rawDataToServerVariable = ({ attributes }: FractalResponseData): Se
export interface Server {
id: number;
externalId: string | null
externalId: string | null;
uuid: string;
identifier: string;
name: string;
@ -56,13 +56,13 @@ export interface Server {
cpu: number;
threads: string | null;
oomDisabled: boolean;
}
};
featureLimits: {
databases: number;
allocations: number;
backups: number;
}
};
ownerId: number;
nodeId: number;
@ -74,7 +74,7 @@ export interface Server {
startup: string;
image: string;
environment: Map<string, string>;
}
};
createdAt: Date;
updatedAt: Date;
@ -85,10 +85,11 @@ export interface Server {
node?: Node;
user?: User;
variables: ServerVariable[];
}
};
}
export const rawDataToServer = ({ attributes }: FractalResponseData): Server => ({
export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
({
id: attributes.id,
externalId: attributes.external_id,
uuid: attributes.uuid,
@ -129,13 +130,26 @@ export const rawDataToServer = ({ attributes }: FractalResponseData): Server =>
updatedAt: new Date(attributes.updated_at),
relations: {
allocations: ((attributes.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(rawDataToAllocation),
egg: attributes.relationships?.egg?.object === 'egg' ? rawDataToEgg(attributes.relationships.egg as FractalResponseData) : undefined,
node: attributes.relationships?.node?.object === 'node' ? rawDataToNode(attributes.relationships.node as FractalResponseData) : undefined,
user: attributes.relationships?.user?.object === 'user' ? Transformers.toUser(attributes.relationships.user as FractalResponseData) : undefined,
variables: ((attributes.relationships?.variables as FractalResponseList | undefined)?.data || []).map(rawDataToServerVariable),
allocations: ((attributes.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(
rawDataToAllocation,
),
egg:
attributes.relationships?.egg?.object === 'egg'
? rawDataToEgg(attributes.relationships.egg as FractalResponseData)
: undefined,
node:
attributes.relationships?.node?.object === 'node'
? rawDataToNode(attributes.relationships.node as FractalResponseData)
: undefined,
user:
attributes.relationships?.user?.object === 'user'
? Transformers.toUser(attributes.relationships.user as FractalResponseData)
: undefined,
variables: ((attributes.relationships?.variables as FractalResponseList | undefined)?.data || []).map(
rawDataToServerVariable,
),
},
}) as Server;
} as Server);
export interface Filters {
id?: string;
@ -167,11 +181,13 @@ export default (include: string[] = []) => {
}
return useSWR<PaginatedResult<Server>>(['servers', page, filters, sort, sortDirection], async () => {
const { data } = await http.get('/api/application/servers', { params: { include: include.join(','), page, ...params } });
const { data } = await http.get('/api/application/servers', {
params: { include: include.join(','), page, ...params },
});
return ({
return {
items: (data.data || []).map(rawDataToServer),
pagination: getPaginationSet(data.meta.pagination),
});
};
});
};

View file

@ -14,13 +14,13 @@ export interface Values {
cpu: number;
threads: string;
oomDisabled: boolean;
}
};
featureLimits: {
allocations: number;
backups: number;
databases: number;
}
};
allocationId: number;
addAllocations: number[];
@ -56,7 +56,7 @@ export default (id: number, server: Partial<Values>, include: string[] = []): Pr
add_allocations: server.addAllocations,
remove_allocations: server.removeAllocations,
},
{ params: { include: include.join(',') } }
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToServer(data)))
.catch(reject);

View file

@ -20,7 +20,7 @@ export default (id: number, values: Partial<Values>, include: string[] = []): Pr
image: values.image,
skip_scripts: values.skipScripts,
},
{ params: { include: include.join(',') } }
{ params: { include: include.join(',') } },
)
.then(({ data }) => resolve(rawDataToServer(data)))
.catch(reject);

View file

@ -46,13 +46,13 @@ export default () => {
};
return (
<div className="w-full bg-neutral-900 shadow-md overflow-x-auto">
<div className="w-full overflow-x-auto bg-neutral-900 shadow-md">
<SpinnerOverlay visible={isLoggingOut} />
<div className="mx-auto w-full flex items-center h-[3.5rem] max-w-[1200px]">
<div className="mx-auto flex h-[3.5rem] w-full max-w-[1200px] items-center">
<div id="logo" className="flex-1">
<Link
to="/"
className="text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150"
className="px-4 font-header text-2xl text-neutral-200 no-underline transition-colors duration-150 hover:text-neutral-100"
>
{name}
</Link>
@ -69,7 +69,7 @@ export default () => {
<Tooltip placement="bottom" content="Account Settings">
<NavLink to="/account">
<span className="flex items-center w-5 h-5">
<span className="flex h-5 w-5 items-center">
<Avatar.User />
</span>
</NavLink>

View file

@ -197,8 +197,6 @@ export default function EggSettingsContainer() {
dockerImages[alias] = image;
}
console.log(dockerImages);
updateEgg(egg.id, {
...values,
dockerImages,

View file

@ -16,7 +16,6 @@ export default ({ selected }: { selected?: User }) => {
};
const onSelect = (user: User | null) => {
console.log(user);
setUser(user);
setFieldValue('ownerId', user?.id || null);
};

View file

@ -27,8 +27,6 @@ export default () => {
// OOM Killer is enabled, rather than when disabled.
values.limits.oomDisabled = !values.limits.oomDisabled;
console.log(values);
updateServer(server.id, values)
.then(() => {
// setServer({ ...server, ...s });

View file

@ -33,7 +33,6 @@ function ServerStartupLineContainer({ egg, server }: { egg: Egg | null; server:
}
if (server.eggId === egg.id) {
console.log(server.container);
setFieldValue('image', server.container.image);
setFieldValue('startup', server.container.startup || '');
return;

View file

@ -30,14 +30,14 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
<tr>
<td className={'whitespace-nowrap'}>
<div className={'flex justify-end items-center w-8'}>
<div className={'flex w-8 items-center justify-end'}>
<Checkbox checked={selected} onChange={e => onRowChange(user, e.currentTarget.checked)} />
</div>
</td>
<td className={'pl-6 py-4 whitespace-nowrap'}>
<td className={'whitespace-nowrap py-4 pl-6'}>
<div className={'flex items-center'}>
<div className={'w-10 h-10'}>
<img src={user.avatarUrl} className={'w-10 h-10 rounded-full'} alt={'User avatar'} />
<div className={'h-10 w-10'}>
<img src={user.avatarUrl} className={'h-10 w-10 rounded-full'} alt={'User avatar'} />
</div>
<div className={'ml-4'}>
<p className={'font-medium'}>{user.email}</p>
@ -45,18 +45,18 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
</div>
</div>
</td>
<td className={'pl-2 py-4 whitespace-nowrap'}>
<td className={'whitespace-nowrap py-4 pl-2'}>
{user.isUsingTwoFactor && (
<span
className={
'bg-green-100 uppercase text-green-700 font-semibold text-xs px-2 py-0.5 rounded'
'rounded bg-green-100 px-2 py-0.5 text-xs font-semibold uppercase text-green-700'
}
>
2-FA Enabled
</span>
)}
</td>
<td className={'px-6 py-4 whitespace-nowrap'}>
<td className={'whitespace-nowrap px-6 py-4'}>
<Dropdown>
<Dropdown.Button className={'px-2'}>
<DotsVerticalIcon />

View file

@ -42,9 +42,9 @@ const UsersContainer = () => {
return (
<div>
<div className={'flex justify-end mb-4'}>
<div className={'mb-4 flex justify-end'}>
<Button className={'shadow focus:ring-offset-2 focus:ring-offset-neutral-800'}>
Add User <PlusIcon className={'ml-2 w-5 h-5'} />
Add User <PlusIcon className={'ml-2 h-5 w-5'} />
</Button>
</div>
<div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
@ -68,7 +68,7 @@ const UsersContainer = () => {
<Transition.Fade as={Fragment} show={selected.length > 0} duration={'duration-75'}>
<div
className={
'absolute rounded-t bg-neutral-700 w-full h-full top-0 left-0 flex items-center justify-end space-x-4 px-4'
'absolute top-0 left-0 flex h-full w-full items-center justify-end space-x-4 rounded-t bg-neutral-700 px-4'
}
>
<div className={'flex-1'}>
@ -79,13 +79,13 @@ const UsersContainer = () => {
/>
</div>
<Button.Text shape={Shape.IconSquare}>
<SupportIcon className={'w-4 h-4'} />
<SupportIcon className={'h-4 w-4'} />
</Button.Text>
<Button.Text shape={Shape.IconSquare}>
<LockOpenIcon className={'w-4 h-4'} />
<LockOpenIcon className={'h-4 w-4'} />
</Button.Text>
<Button.Text shape={Shape.IconSquare}>
<TrashIcon className={'w-4 h-4'} />
<TrashIcon className={'h-4 w-4'} />
</Button.Text>
</div>
</Transition.Fade>
@ -94,7 +94,7 @@ const UsersContainer = () => {
<thead className={'bg-neutral-900'}>
<tr>
<th scope={'col'} className={'w-8'} />
<th scope={'col'} className={'text-left px-6 py-2 w-full'}>
<th scope={'col'} className={'w-full px-6 py-2 text-left'}>
Email
</th>
<th scope={'col'} />

View file

@ -34,13 +34,13 @@ export default () => {
<PageContentBlock title={'Account Activity Log'}>
<FlashMessageRender byKey={'account'} />
{(filters.filters?.event || filters.filters?.ip) && (
<div className={'flex justify-end mb-2'}>
<div className={'mb-2 flex justify-end'}>
<Link
to={'#'}
className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
onClick={() => setFilters(value => ({ ...value, filters: {} }))}
>
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'} />
Clear Filters <XCircleIcon className={'ml-2 h-4 w-4'} />
</Link>
</div>
)}

View file

@ -28,7 +28,7 @@ export default ({ tokens, open, onClose }: RecoveryTokenDialogProps) => {
>
<Dialog.Icon position={'container'} type={'success'} />
<CopyOnClick text={tokens.join('\n')} showInNotification={false}>
<pre className={'bg-slate-800 rounded p-2 mt-6'}>
<pre className={'mt-6 rounded bg-slate-800 p-2'}>
{grouped.map(value => (
<span key={value.join('_')} className={'block'}>
{value[0]}

View file

@ -62,7 +62,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
return (
<form id={'enable-totp-form'} onSubmit={submit}>
<FlashMessageRender byKey={'account:two-step'} className={'mt-4'} />
<div className={'flex items-center justify-center w-56 h-56 p-2 bg-slate-50 shadow mx-auto mt-6'}>
<div className={'mx-auto mt-6 flex h-56 w-56 items-center justify-center bg-slate-50 p-2 shadow'}>
{!token ? (
<Spinner />
) : (
@ -70,7 +70,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
)}
</div>
<CopyOnClick text={token?.secret}>
<p className={'font-mono text-sm text-slate-100 text-center mt-2'}>
<p className={'mt-2 text-center font-mono text-sm text-slate-100'}>
{token?.secret.match(/.{1,4}/g)!.join(' ') || 'Loading...'}
</p>
</CopyOnClick>
@ -90,7 +90,7 @@ const ConfigureTwoFactorForm = ({ onTokens }: Props) => {
autoComplete={'one-time-code'}
pattern={'\\d{6}'}
/>
<label htmlFor={'totp-password'} className={'block mt-3'}>
<label htmlFor={'totp-password'} className={'mt-3 block'}>
Account Password
</label>
<Input.Text

View file

@ -9,7 +9,7 @@ interface CodeProps {
export default ({ dark, className, children }: CodeProps) => (
<code
className={classNames('font-mono text-sm px-2 py-1 inline-block rounded', className, {
className={classNames('inline-block rounded px-2 py-1 font-mono text-sm', className, {
'bg-neutral-700': !dark,
'bg-neutral-900 text-slate-100': dark,
})}

View file

@ -50,8 +50,8 @@ const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickP
{copied && (
<Portal>
<FadeTransition show duration="duration-250" key={copied ? 'visible' : 'invisible'}>
<div className="fixed z-50 bottom-0 right-0 m-4">
<div className="rounded-md py-3 px-4 text-slate-200 bg-neutral-600/95 shadow">
<div className="fixed bottom-0 right-0 z-50 m-4">
<div className="rounded-md bg-neutral-600/95 py-3 px-4 text-slate-200 shadow">
<p>
{showInNotification
? `Copied "${String(text)}" to clipboard.`

View file

@ -26,7 +26,15 @@ interface IdObj {
id: number;
}
export const Option = <T extends IdObj>({ selectId, id, item, active, isHighlighted, onClick, children }: OptionProps<T>) => {
export const Option = <T extends IdObj>({
selectId,
id,
item,
active,
isHighlighted,
onClick,
children,
}: OptionProps<T>) => {
if (isHighlighted === undefined) {
isHighlighted = false;
}
@ -39,16 +47,32 @@ export const Option = <T extends IdObj>({ selectId, id, item, active, isHighligh
if (active) {
return (
<li id={selectId + '-select-item-' + id} role="option" css={[ tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`, isHighlighted ? tw`bg-neutral-700` : null ]} onClick={onClick(item)}>
<li
id={selectId + '-select-item-' + id}
role="option"
css={[
tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`,
isHighlighted ? tw`bg-neutral-700` : null,
]}
onClick={onClick(item)}
>
<div css={tw`flex items-center`}>
<span css={tw`block font-medium truncate`}>
{children}
</span>
<span css={tw`block font-medium truncate`}>{children}</span>
</div>
<span css={tw`absolute inset-y-0 right-0 flex items-center pr-4`}>
<svg css={tw`w-5 h-5 text-primary-400`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path clipRule="evenodd" fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
<svg
css={tw`w-5 h-5 text-primary-400`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
/>
</svg>
</span>
</li>
@ -56,11 +80,17 @@ export const Option = <T extends IdObj>({ selectId, id, item, active, isHighligh
}
return (
<li id={selectId + 'select-item-' + id} role="option" css={[ tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`, isHighlighted ? tw`bg-neutral-700` : null ]} onClick={onClick(item)}>
<li
id={selectId + 'select-item-' + id}
role="option"
css={[
tw`relative py-2 pl-3 cursor-pointer select-none text-neutral-200 pr-9 hover:bg-neutral-700`,
isHighlighted ? tw`bg-neutral-700` : null,
]}
onClick={onClick(item)}
>
<div css={tw`flex items-center`}>
<span css={tw`block font-normal truncate`}>
{children}
</span>
<span css={tw`block font-normal truncate`}>{children}</span>
</div>
</li>
);
@ -88,7 +118,21 @@ interface SearchableSelectProps<T> {
className?: string;
}
export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder, selected, setSelected, items, setItems, onSearch, onSelect, getSelectedText, children, className }: SearchableSelectProps<T>) => {
export const SearchableSelect = <T extends IdObj>({
id,
name,
label,
placeholder,
selected,
setSelected,
items,
setItems,
onSearch,
onSelect,
getSelectedText,
children,
className,
}: SearchableSelectProps<T>) => {
const [loading, setLoading] = useState(false);
const [expanded, setExpanded] = useState(false);
@ -238,10 +282,12 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
}, [selected]);
// This shit is really stupid but works, so is it really stupid?
const c = React.Children.map(children, child => React.cloneElement(child as ReactElement, {
const c = React.Children.map(children, child =>
React.cloneElement(child as ReactElement, {
isHighlighted: ((child as ReactElement).props as OptionProps<T>).id === highlighted,
onClick: onClick.bind(child),
}));
}),
);
return (
<div className={className}>
@ -269,33 +315,57 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
/>
</InputSpinner>
<div css={[ tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3`, !expanded && tw`pointer-events-none` ]}>
{inputText !== '' && expanded &&
<svg css={tw`w-5 h-5 text-neutral-400 cursor-pointer`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
<div
css={[
tw`absolute inset-y-0 right-0 flex items-center pr-2 ml-3`,
!expanded && tw`pointer-events-none`,
]}
>
{inputText !== '' && expanded && (
<svg
css={tw`w-5 h-5 text-neutral-400 cursor-pointer`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
onMouseDown={e => {
e.preventDefault();
setInputText('');
}}
>
<path clipRule="evenodd" fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"/>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
/>
</svg>
}
<svg css={tw`w-5 h-5 text-neutral-400 pointer-events-none`} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path clipRule="evenodd" fillRule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"/>
)}
<svg
css={tw`w-5 h-5 text-neutral-400 pointer-events-none`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
clipRule="evenodd"
fillRule="evenodd"
d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
/>
</svg>
</div>
<Dropdown ref={itemsList} expanded={expanded}>
{items === null || items.length < 1 ?
items === null || inputText.length < 2 ?
{items === null || items.length < 1 ? (
items === null || inputText.length < 2 ? (
<div css={tw`flex flex-row items-center h-10 px-3`}>
<p css={tw`text-sm`}>Please type 2 or more characters.</p>
</div>
:
) : (
<div css={tw`flex flex-row items-center h-10 px-3`}>
<p css={tw`text-sm`}>No results found.</p>
</div>
:
)
) : (
<ul
tabIndex={-1}
role={id + '-select'}
@ -305,7 +375,7 @@ export const SearchableSelect = <T extends IdObj>({ id, name, label, placeholder
>
{c}
</ul>
}
)}
</Dropdown>
</div>
</div>

View file

@ -1,7 +1,22 @@
import { CSSObject } from '@emotion/serialize';
import { Field as FormikField, FieldProps } from 'formik';
import React, { forwardRef } from 'react';
import Select, { ContainerProps, ControlProps, GroupProps, IndicatorContainerProps, IndicatorProps, InputProps, MenuListComponentProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
import Select, {
ContainerProps,
ControlProps,
GroupProps,
IndicatorContainerProps,
IndicatorProps,
InputProps,
MenuListComponentProps,
MenuProps,
MultiValueProps,
OptionProps,
PlaceholderProps,
SingleValueProps,
StylesConfig,
ValueContainerProps,
} from 'react-select';
import Async from 'react-select/async';
import Creatable from 'react-select/creatable';
import tw, { theme } from 'twin.macro';
@ -42,10 +57,9 @@ export const SelectStyle: StylesConfig<T, any, any> = {
borderWidth: '2px',
color: theme`colors.neutral.200`,
cursor: 'pointer',
boxShadow: props.isFocused ?
'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(36, 135, 235, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px'
:
undefined,
boxShadow: props.isFocused
? 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(36, 135, 235, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px'
: undefined,
':hover': {
borderColor: !props.isFocused ? theme`colors.neutral.400` : theme`colors.primary.300`,
@ -228,22 +242,29 @@ interface SelectFieldProps {
isSearchable?: boolean;
isCreatable?: boolean;
isValidNewOption?: ((
inputValue: string,
value: ValueType<any, boolean>,
options: ReadonlyArray<any>,
) => boolean) | undefined;
isValidNewOption?:
| ((inputValue: string, value: ValueType<any, boolean>, options: ReadonlyArray<any>) => boolean)
| undefined;
className?: string;
}
const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
function Select2 ({ id, name, label, description, validate, className, isMulti, isCreatable, ...props }, ref) {
const SelectField = forwardRef<HTMLElement, SelectFieldProps>(function Select2(
{ id, name, label, description, validate, className, isMulti, isCreatable, ...props },
ref,
) {
const { options } = props;
const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
const onChange = (
options: Option | Option[],
name: string,
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void,
) => {
if (isMulti) {
setFieldValue(name, (options as Option[]).map(o => o.value));
setFieldValue(
name,
(options as Option[]).map(o => o.value),
);
return;
}
@ -255,7 +276,7 @@ const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
{({ field, form: { errors, touched, setFieldValue } }: FieldProps) => (
<div className={className}>
{label && <Label htmlFor={id}>{label}</Label>}
{isCreatable ?
{isCreatable ? (
<Creatable
{...field}
{...props}
@ -265,7 +286,7 @@ const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
:
) : (
<Select
{...field}
{...props}
@ -275,20 +296,20 @@ const SelectField = forwardRef<HTMLElement, SelectFieldProps>(
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
}
{touched[field.name] && errors[field.name] ?
)}
{touched[field.name] && errors[field.name] ? (
<p css={tw`text-red-200 text-xs mt-1`}>
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
{(errors[field.name] as string).charAt(0).toUpperCase() +
(errors[field.name] as string).slice(1)}
</p>
:
description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
}
) : description ? (
<p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p>
) : null}
</div>
)}
</FormikField>
);
}
);
});
interface AsyncSelectFieldProps {
id?: string;
@ -305,11 +326,20 @@ interface AsyncSelectFieldProps {
loadOptions(inputValue: string, callback: (options: Array<Option>) => void): void;
}
const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(
function AsyncSelect2 ({ id, name, label, description, validate, className, isMulti, ...props }, ref) {
const onChange = (options: Option | Option[], name: string, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void) => {
const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(function AsyncSelect2(
{ id, name, label, description, validate, className, isMulti, ...props },
ref,
) {
const onChange = (
options: Option | Option[],
name: string,
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void,
) => {
if (isMulti) {
setFieldValue(name, (options as Option[]).map(o => Number(o.value)));
setFieldValue(
name,
(options as Option[]).map(o => Number(o.value)),
);
return;
}
@ -329,19 +359,19 @@ const AsyncSelectField = forwardRef<HTMLElement, AsyncSelectFieldProps>(
onChange={o => onChange(o, name, setFieldValue)}
isMulti={isMulti}
/>
{touched[field.name] && errors[field.name] ?
{touched[field.name] && errors[field.name] ? (
<p css={tw`text-red-200 text-xs mt-1`}>
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
{(errors[field.name] as string).charAt(0).toUpperCase() +
(errors[field.name] as string).slice(1)}
</p>
:
description ? <p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p> : null
}
) : description ? (
<p css={tw`text-neutral-400 text-xs mt-1`}>{description}</p>
) : null}
</div>
)}
</FormikField>
);
}
);
});
export default SelectField;
export { AsyncSelectField };

View file

@ -44,13 +44,13 @@ export default ({ activity, children }: Props) => {
const properties = wrapProperties(activity.properties);
return (
<div className={'grid grid-cols-10 py-4 border-b-2 border-slate-800 last:rounded-b last:border-0 group'}>
<div className={'hidden sm:flex sm:col-span-1 items-center justify-center select-none'}>
<div className={'flex items-center w-10 h-10 rounded-full bg-slate-600 overflow-hidden'}>
<div className={'group grid grid-cols-10 border-b-2 border-slate-800 py-4 last:rounded-b last:border-0'}>
<div className={'hidden select-none items-center justify-center sm:col-span-1 sm:flex'}>
<div className={'flex h-10 w-10 items-center overflow-hidden rounded-full bg-slate-600'}>
<Avatar name={actor?.uuid || 'system'} />
</div>
</div>
<div className={'col-span-10 sm:col-span-9 flex'}>
<div className={'col-span-10 flex sm:col-span-9'}>
<div className={'flex-1 px-4 sm:px-0'}>
<div className={'flex items-center text-slate-50'}>
<Tooltip placement={'top'} content={actor?.email || 'System User'}>
@ -59,7 +59,7 @@ export default ({ activity, children }: Props) => {
<span className={'text-slate-400'}>&nbsp;&mdash;&nbsp;</span>
<Link
to={`#${pathTo({ event: activity.event })}`}
className={'transition-colors duration-75 active:text-cyan-400 hover:text-cyan-400'}
className={'transition-colors duration-75 hover:text-cyan-400 active:text-cyan-400'}
>
{activity.event}
</Link>

View file

@ -11,7 +11,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
<Dialog open={open} onClose={() => setOpen(false)} hideCloseIcon title={'Metadata'}>
<pre
className={
'bg-slate-900 rounded p-2 font-mono text-sm leading-relaxed overflow-x-scroll whitespace-pre-wrap'
'overflow-x-scroll whitespace-pre-wrap rounded bg-slate-900 p-2 font-mono text-sm leading-relaxed'
}
>
{JSON.stringify(meta, null, 2)}
@ -23,11 +23,11 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
<button
aria-describedby={'View additional event metadata'}
className={
'p-2 transition-colors duration-100 text-slate-400 group-hover:text-slate-300 group-hover:hover:text-slate-50'
'p-2 text-slate-400 transition-colors duration-100 group-hover:text-slate-300 group-hover:hover:text-slate-50'
}
onClick={() => setOpen(true)}
>
<ClipboardListIcon className={'w-5 h-5'} />
<ClipboardListIcon className={'h-5 w-5'} />
</button>
</div>
);

View file

@ -12,7 +12,7 @@ export default ({ type, className, children }: AlertProps) => {
return (
<div
className={classNames(
'flex items-center border-l-8 text-slate-50 rounded-md shadow px-4 py-3',
'flex items-center rounded-md border-l-8 px-4 py-3 text-slate-50 shadow',
{
['border-red-500 bg-red-500/25']: type === 'danger',
['border-yellow-500 bg-yellow-500/25']: type === 'warning',
@ -21,9 +21,9 @@ export default ({ type, className, children }: AlertProps) => {
)}
>
{type === 'danger' ? (
<ShieldExclamationIcon className={'w-6 h-6 text-red-400 mr-2'} />
<ShieldExclamationIcon className={'mr-2 h-6 w-6 text-red-400'} />
) : (
<ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
<ExclamationIcon className={'mr-2 h-6 w-6 text-yellow-500'} />
)}
{children}
</div>

View file

@ -73,8 +73,8 @@ export default ({
open={open}
onClose={onDialogClose}
>
<div className={'fixed inset-0 bg-slate-900/50 z-40'} />
<div className={'fixed inset-0 overflow-y-auto z-50'}>
<div className={'fixed inset-0 z-40 bg-slate-900/50'} />
<div className={'fixed inset-0 z-50 overflow-y-auto'}>
<div
ref={container}
className={styles.container}
@ -89,9 +89,9 @@ export default ({
variants={variants}
className={styles.panel}
>
<div className={'flex p-6 pb-0 overflow-y-auto'}>
<div className={'flex overflow-y-auto p-6 pb-0'}>
{iconPosition === 'container' && icon}
<div className={'flex-1 max-h-[70vh] min-w-0'}>
<div className={'max-h-[70vh] min-w-0 flex-1'}>
<div className={'flex items-center'}>
{iconPosition !== 'container' && icon}
<div>

View file

@ -8,7 +8,7 @@ export default ({ children }: { children: React.ReactNode }) => {
useDeepCompareEffect(() => {
setFooter(
<div className={'px-6 py-3 bg-slate-700 flex items-center justify-end space-x-3 rounded-b'}>
<div className={'flex items-center justify-end space-x-3 rounded-b bg-slate-700 px-6 py-3'}>
{children}
</div>,
);

View file

@ -18,7 +18,7 @@ export default ({ type, position, className }: DialogIconProps) => {
setIcon(
<div className={classNames(styles.dialog_icon, styles[type], className)}>
<Icon className={'w-6 h-6'} />
<Icon className={'h-6 w-6'} />
</div>,
);
}, [type, className]);

View file

@ -12,7 +12,7 @@ interface Props {
}
const DropdownGap = ({ invisible }: { invisible?: boolean }) => (
<div className={classNames('border m-2', { 'border-neutral-700': !invisible, 'border-transparent': invisible })} />
<div className={classNames('m-2 border', { 'border-neutral-700': !invisible, 'border-transparent': invisible })} />
);
type TypedChild = (React.ReactChild | React.ReactFragment | React.ReactPortal) & {

View file

@ -37,7 +37,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
});
return (
<div className={classNames('flex items-center justify-between my-2', className)}>
<div className={classNames('my-2 flex items-center justify-between', className)}>
<p className={'text-sm text-neutral-500'}>
Showing&nbsp;
<span className={'font-semibold text-neutral-400'}>
@ -50,7 +50,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
{pagination.totalPages > 1 && (
<div className={'flex space-x-1'}>
<Button.Text {...buttonProps(1)} disabled={pages.previous.length !== 2}>
<ChevronDoubleLeftIcon className={'w-3 h-3'} />
<ChevronDoubleLeftIcon className={'h-3 w-3'} />
</Button.Text>
{pages.previous.reverse().map(value => (
<Button.Text key={`previous-${value}`} {...buttonProps(value)}>
@ -66,7 +66,7 @@ const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
</Button.Text>
))}
<Button.Text {...buttonProps(total)} disabled={pages.next.length !== 2}>
<ChevronDoubleRightIcon className={'w-3 h-3'} />
<ChevronDoubleRightIcon className={'h-3 w-3'} />
</Button.Text>
</div>
)}

View file

@ -3,14 +3,18 @@ import { PaginationDataSet } from '@/api/http';
const TFootPaginated = ({ pagination, span }: { span: number; pagination: PaginationDataSet }) => {
const start = (pagination.currentPage - 1) * pagination.perPage;
const end = ((pagination.currentPage - 1) * pagination.perPage) + pagination.count;
const end = (pagination.currentPage - 1) * pagination.perPage + pagination.count;
return (
<tfoot>
<tr className={'bg-neutral-800'}>
<td scope={'col'} colSpan={span} className={'px-4 py-2'}>
<p className={'text-sm text-neutral-500'}>
Showing <span className={'font-semibold text-neutral-400'}>{Math.max(start, Math.min(pagination.total, 1))}</span> to&nbsp;
Showing{' '}
<span className={'font-semibold text-neutral-400'}>
{Math.max(start, Math.min(pagination.total, 1))}
</span>{' '}
to&nbsp;
<span className={'font-semibold text-neutral-400'}>{end}</span> of&nbsp;
<span className={'font-semibold text-neutral-400'}>{pagination.total}</span> results.
</p>

View file

@ -108,7 +108,7 @@ export default ({ children, ...props }: Props) => {
ay || 0,
)}px) rotate(45deg)`,
}}
className={classNames('absolute bg-slate-900 w-3 h-3', side)}
className={classNames('absolute h-3 w-3 bg-slate-900', side)}
/>
)}
</motion.div>

View file

@ -35,20 +35,20 @@ export default () => {
<ServerContentBlock title={'Activity Log'}>
<FlashMessageRender byKey={'server:activity'} />
{(filters.filters?.event || filters.filters?.ip) && (
<div className={'flex justify-end mb-2'}>
<div className={'mb-2 flex justify-end'}>
<Link
to={'#'}
className={classNames(btnStyles.button, btnStyles.text, 'w-full sm:w-auto')}
onClick={() => setFilters(value => ({ ...value, filters: {} }))}
>
Clear Filters <XCircleIcon className={'w-4 h-4 ml-2'} />
Clear Filters <XCircleIcon className={'ml-2 h-4 w-4'} />
</Link>
</div>
)}
{!data && isValidating ? (
<Spinner centered />
) : !data?.items.length ? (
<p className={'text-sm text-center text-slate-400'}>No activity logs available for this server.</p>
<p className={'text-center text-sm text-slate-400'}>No activity logs available for this server.</p>
) : (
<div className={'bg-slate-700'}>
{data?.items.map(activity => (

View file

@ -12,7 +12,7 @@ export default ({ title, legend, children }: ChartBlockProps) => (
<div className={classNames(styles.chart_container, 'group')}>
<div className={'flex items-center justify-between px-4 py-2'}>
<h3 className={'font-header transition-colors duration-100 group-hover:text-slate-50'}>{title}</h3>
{legend && <p className={'text-sm flex items-center'}>{legend}</p>}
{legend && <p className={'flex items-center text-sm'}>{legend}</p>}
</div>
<div className={'z-10 ml-2'}>{children}</div>
</div>

View file

@ -232,11 +232,11 @@ export default () => {
/>
<div
className={classNames(
'text-slate-100 peer-focus:text-slate-50 peer-focus:animate-pulse',
'text-slate-100 peer-focus:animate-pulse peer-focus:text-slate-50',
styles.command_icon,
)}
>
<ChevronDoubleRightIcon className={'w-4 h-4'} />
<ChevronDoubleRightIcon className={'h-4 w-4'} />
</div>
</div>
)}

View file

@ -33,26 +33,26 @@ function ServerConsoleContainer() {
: 'This server is currently being transferred to another node and all actions are unavailable.'}
</Alert>
)}
<div className={'grid grid-cols-4 gap-4 mb-4'}>
<div className={'hidden sm:block sm:col-span-2 lg:col-span-3 pr-4'}>
<h1 className={'font-header text-2xl text-slate-50 leading-relaxed line-clamp-1'}>{name}</h1>
<div className={'mb-4 grid grid-cols-4 gap-4'}>
<div className={'hidden pr-4 sm:col-span-2 sm:block lg:col-span-3'}>
<h1 className={'font-header text-2xl leading-relaxed text-slate-50 line-clamp-1'}>{name}</h1>
<p className={'text-sm line-clamp-2'}>{description}</p>
</div>
<div className={'col-span-4 sm:col-span-2 lg:col-span-1 self-end'}>
<div className={'col-span-4 self-end sm:col-span-2 lg:col-span-1'}>
<Can action={['control.start', 'control.stop', 'control.restart']} matchAny>
<PowerButtons className={'flex sm:justify-end space-x-2'} />
<PowerButtons className={'flex space-x-2 sm:justify-end'} />
</Can>
</div>
</div>
<div className={'grid grid-cols-4 gap-2 sm:gap-4 mb-4'}>
<div className={'flex col-span-4 lg:col-span-3'}>
<div className={'mb-4 grid grid-cols-4 gap-2 sm:gap-4'}>
<div className={'col-span-4 flex lg:col-span-3'}>
<Spinner.Suspense>
<Console />
</Spinner.Suspense>
</div>
<ServerDetailsBlock className={'col-span-4 lg:col-span-1 order-last lg:order-none'} />
<ServerDetailsBlock className={'order-last col-span-4 lg:order-none lg:col-span-1'} />
</div>
<div className={'grid grid-cols-1 md:grid-cols-3 gap-2 sm:gap-4'}>
<div className={'grid grid-cols-1 gap-2 sm:gap-4 md:grid-cols-3'}>
<Spinner.Suspense>
<StatGraphs />
</Spinner.Suspense>

View file

@ -38,7 +38,7 @@ function Limit({ limit, children }: { limit: string | null; children: ReactNode
return (
<>
{children}
<span className={'ml-1 text-slate-300 text-[70%] select-none'}>/ {limit || <>&infin;</>}</span>
<span className={'ml-1 select-none text-[70%] text-slate-300'}>/ {limit || <>&infin;</>}</span>
</>
);
}

View file

@ -33,11 +33,11 @@ function StatBlock({ title, copyOnClick, icon, color, className, children }: Sta
})}
/>
</div>
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
<p className={'font-header leading-tight text-xs md:text-sm text-slate-200'}>{title}</p>
<div className={'flex w-full flex-col justify-center overflow-hidden'}>
<p className={'font-header text-xs leading-tight text-slate-200 md:text-sm'}>{title}</p>
<div
ref={ref}
className={'h-[1.75rem] w-full font-semibold text-slate-50 truncate'}
className={'h-[1.75rem] w-full truncate font-semibold text-slate-50'}
style={{ fontSize }}
>
{children}

View file

@ -79,10 +79,10 @@ export default () => {
legend={
<>
<Tooltip arrow content={'Inbound'}>
<CloudDownloadIcon className={'mr-2 w-4 h-4 text-yellow-400'} />
<CloudDownloadIcon className={'mr-2 h-4 w-4 text-yellow-400'} />
</Tooltip>
<Tooltip arrow content={'Outbound'}>
<CloudUploadIcon className={'w-4 h-4 text-cyan-400'} />
<CloudUploadIcon className={'h-4 w-4 text-cyan-400'} />
</Tooltip>
</>
}

View file

@ -64,7 +64,7 @@ export default () => {
return (
<ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
<ErrorBoundary>
<div className={'flex flex-wrap-reverse md:flex-nowrap mb-4'}>
<div className={'mb-4 flex flex-wrap-reverse md:flex-nowrap'}>
<FileManagerBreadcrumbs
renderLeft={
<FileActionCheckbox

View file

@ -25,7 +25,7 @@ const Spinner = ({ progress, className }: { progress: number; className?: string
{...svgProps}
stroke={'white'}
strokeDasharray={28 * Math.PI}
className={'rotate-[-90deg] origin-[50%_50%] transition-[stroke-dashoffset] duration-300'}
className={'origin-[50%_50%] rotate-[-90deg] transition-[stroke-dashoffset] duration-300'}
style={{ strokeDashoffset: ((100 - progress) / 100) * 28 * Math.PI }}
/>
</svg>
@ -40,20 +40,20 @@ const FileUploadList = () => {
);
return (
<div className={'space-y-2 mt-6'}>
<div className={'mt-6 space-y-2'}>
{uploads.map(([name, file]) => (
<div key={name} className={'flex items-center space-x-3 bg-slate-700 p-3 rounded'}>
<div key={name} className={'flex items-center space-x-3 rounded bg-slate-700 p-3'}>
<Tooltip content={`${Math.floor((file.loaded / file.total) * 100)}%`} placement={'left'}>
<div className={'flex-shrink-0'}>
<Spinner progress={(file.loaded / file.total) * 100} className={'w-6 h-6'} />
<Spinner progress={(file.loaded / file.total) * 100} className={'h-6 w-6'} />
</div>
</Tooltip>
<Code className={'flex-1 truncate'}>{name}</Code>
<button
onClick={cancelFileUpload.bind(this, name)}
className={'text-slate-500 hover:text-slate-200 transition-colors duration-75'}
className={'text-slate-500 transition-colors duration-75 hover:text-slate-200'}
>
<XIcon className={'w-5 h-5'} />
<XIcon className={'h-5 w-5'} />
</button>
</div>
))}
@ -92,11 +92,11 @@ export default () => {
{count > 0 && (
<Tooltip content={`${count} files are uploading, click to view`}>
<button
className={'flex items-center justify-center w-10 h-10'}
className={'flex h-10 w-10 items-center justify-center'}
onClick={() => (open.value = true)}
>
<Spinner progress={(progress.uploaded / progress.total) * 100} className={'w-8 h-8'} />
<CloudUploadIcon className={'h-3 absolute mx-auto animate-pulse'} />
<Spinner progress={(progress.uploaded / progress.total) * 100} className={'h-8 w-8'} />
<CloudUploadIcon className={'absolute mx-auto h-3 animate-pulse'} />
</button>
</Tooltip>
)}

View file

@ -62,7 +62,7 @@ const MassActionsBar = () => {
return (
<>
<div className="pointer-events-none fixed bottom-0 z-20 left-0 right-0 flex justify-center">
<div className="pointer-events-none fixed bottom-0 left-0 right-0 z-20 flex justify-center">
<SpinnerOverlay visible={loading} size={'large'} fixed>
{loadingMessage}
</SpinnerOverlay>
@ -93,9 +93,9 @@ const MassActionsBar = () => {
/>
)}
<Portal>
<div className="fixed bottom-0 mb-6 flex justify-center w-full z-50">
<div className="fixed bottom-0 z-50 mb-6 flex w-full justify-center">
<FadeTransition duration="duration-75" show={selectedFiles.length > 0} appear unmount>
<div className="flex items-center space-x-4 pointer-events-auto rounded p-4 bg-black/50">
<div className="pointer-events-auto flex items-center space-x-4 rounded bg-black/50 p-4">
<Button onClick={() => setShowMove(true)}>Move</Button>
<Button onClick={onClickCompress}>Archive</Button>
<Button.Danger variant={Button.Variants.Secondary} onClick={() => setShowConfirm(true)}>

View file

@ -120,14 +120,14 @@ export default ({ className }: WithClassname) => {
onFileSubmission(e.dataTransfer.files);
}}
>
<div className={'w-full flex items-center justify-center pointer-events-none'}>
<div className={'pointer-events-none flex w-full items-center justify-center'}>
<div
className={
'flex items-center space-x-4 bg-black w-full ring-4 ring-blue-200 ring-opacity-60 rounded p-6 mx-10 max-w-sm'
'mx-10 flex w-full max-w-sm items-center space-x-4 rounded bg-black p-6 ring-4 ring-blue-200 ring-opacity-60'
}
>
<CloudUploadIcon className={'w-10 h-10 flex-shrink-0'} />
<p className={'font-header flex-1 text-lg text-neutral-100 text-center'}>
<CloudUploadIcon className={'h-10 w-10 flex-shrink-0'} />
<p className={'flex-1 text-center font-header text-lg text-neutral-100'}>
Drag and drop files to upload.
</p>
</div>

View file

@ -60,8 +60,8 @@ const AllocationRow = ({ allocation }: Props) => {
};
return (
<GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
<div className={'flex items-center w-full md:w-auto'}>
<GreyRowBox $hoverable={false} className={'mt-2 flex-wrap md:flex-nowrap'}>
<div className={'flex w-full items-center md:w-auto'}>
<div className={'pl-4 pr-6 text-neutral-400'}>
<FontAwesomeIcon icon={faNetworkWired} />
</div>
@ -79,24 +79,24 @@ const AllocationRow = ({ allocation }: Props) => {
)}
<Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
</div>
<div className={'w-16 md:w-24 overflow-hidden'}>
<div className={'w-16 overflow-hidden md:w-24'}>
<Code dark>{allocation.port}</Code>
<Label>Port</Label>
</div>
</div>
<div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
<div className={'mt-4 w-full md:mt-0 md:w-auto md:flex-1'}>
<InputSpinner visible={loading}>
<Textarea
className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
className={'border-transparent bg-neutral-800 hover:border-neutral-600'}
placeholder={'Notes'}
defaultValue={allocation.notes || undefined}
onChange={e => setAllocationNotes(e.currentTarget.value)}
/>
</InputSpinner>
</div>
<div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
<div className={'mt-4 flex w-full justify-end space-x-4 md:mt-0 md:w-48'}>
{allocation.isDefault ? (
<Button size={Button.Sizes.Small} className={'!text-slate-50 !bg-blue-600'} disabled>
<Button size={Button.Sizes.Small} className={'!bg-blue-600 !text-slate-50'} disabled>
Primary
</Button>
) : (

View file

@ -50,7 +50,7 @@ export default ({ scheduleId, onDeleted }: Props) => {
</Dialog.Confirm>
<Button.Danger
variant={Button.Variants.Secondary}
className={'flex-1 sm:flex-none mr-4 border-transparent'}
className={'mr-4 flex-1 border-transparent sm:flex-none'}
onClick={() => setVisible(true)}
>
Delete

View file

@ -8,25 +8,25 @@ interface Props {
const ScheduleCronRow = ({ cron, className }: Props) => (
<div className={classNames('flex', className)}>
<div className={'w-1/5 sm:w-auto text-center'}>
<div className={'w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.minute}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
<p className={'text-2xs uppercase text-neutral-500'}>Minute</p>
</div>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<div className={'ml-4 w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.hour}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
<p className={'text-2xs uppercase text-neutral-500'}>Hour</p>
</div>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<div className={'ml-4 w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.dayOfMonth}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
<p className={'text-2xs uppercase text-neutral-500'}>Day (Month)</p>
</div>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<div className={'ml-4 w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.month}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
<p className={'text-2xs uppercase text-neutral-500'}>Month</p>
</div>
<div className={'w-1/5 sm:w-auto text-center ml-4'}>
<div className={'ml-4 w-1/5 text-center sm:w-auto'}>
<p className={'font-medium'}>{cron.dayOfWeek}</p>
<p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
<p className={'text-2xs uppercase text-neutral-500'}>Day (Week)</p>
</div>
</div>
);

View file

@ -118,7 +118,7 @@ export default () => {
</div>
<div css={tw`flex sm:block mt-3 sm:mt-0`}>
<Can action={'schedule.update'}>
<Button.Text className={'flex-1 mr-4'} onClick={toggleEditModal}>
<Button.Text className={'mr-4 flex-1'} onClick={toggleEditModal}>
Edit
</Button.Text>
<NewTaskButton schedule={schedule} />

View file

@ -14,10 +14,13 @@ describe('@/helpers/extractSearchFilters.ts', function () {
['foo:1 bar:2 baz:3', { foo: ['1'], bar: ['2'] }],
['hello "world this" is quoted', {}],
['hello "world foo:123 is" quoted', {}],
[ 'hello foo:"this is quoted" bar:"this \\"is deeply\\" quoted" world foo:another', {
[
'hello foo:"this is quoted" bar:"this \\"is deeply\\" quoted" world foo:another',
{
foo: ['this is quoted', 'another'],
bar: ['this "is deeply" quoted'],
} ],
},
],
];
it.each(cases)('should return expected filters: [%s]', function (input, output) {
@ -27,7 +30,9 @@ describe('@/helpers/extractSearchFilters.ts', function () {
});
it('should allow modification of the default parameter', function () {
expect(extractSearchFilters('hello world', [ 'foo' ], { defaultFilter: 'default_param', returnUnmatched: true })).toStrictEqual({
expect(
extractSearchFilters('hello world', ['foo'], { defaultFilter: 'default_param', returnUnmatched: true }),
).toStrictEqual({
filters: {
default_param: ['hello world'],
},
@ -57,10 +62,12 @@ describe('@/helpers/extractSearchFilters.ts', function () {
['hello world foo:123 bar:456', { foo: ['123'], bar: ['456'], '*': ['hello', 'world'] }],
['hello world foo:123 another string', { foo: ['123'], '*': ['hello', 'world', 'another', 'string'] }],
])('should split unmatched parameters: %s', function (input, output) {
expect(extractSearchFilters(input, [ 'foo', 'bar' ], {
expect(
extractSearchFilters(input, ['foo', 'bar'], {
returnUnmatched: true,
splitUnmatched: true,
})).toStrictEqual({
}),
).toStrictEqual({
filters: output,
});
});

View file

@ -13,7 +13,7 @@ const extractSearchFilters = <T extends string, D extends string = '*'> (
options?: Options<D>,
): QueryBuilderParams<T> | QueryBuilderParams<D> | QueryBuilderParams<T & D> => {
const opts: Required<Options<D>> = {
defaultFilter: options?.defaultFilter || '*' as D,
defaultFilter: options?.defaultFilter || ('*' as D),
splitUnmatched: options?.splitUnmatched || false,
returnUnmatched: options?.returnUnmatched || false,
};

View file

@ -9,7 +9,7 @@ export default (str: string): string[] => {
let quoted = false;
const parts = [''] as string[];
for (const char of (str.trim().match(/\\?.|^$/g) || [])) {
for (const char of str.trim().match(/\\?.|^$/g) || []) {
if (char === '"') {
quoted = !quoted;
} else if (!quoted && char === ' ') {