improvements: minor UI/labeling adjustments, only show tags loading if can read, and remove rounded bottom on overview table

This commit is contained in:
Scott Wilson
2024-11-20 11:50:10 -08:00
parent 300372fa98
commit e5d4677fd6
6 changed files with 36 additions and 27 deletions
@@ -17,11 +17,11 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({
environmentsUsed: 0, environmentsUsed: 0,
identityLimit: null, identityLimit: null,
identitiesUsed: 0, identitiesUsed: 0,
dynamicSecret: false, dynamicSecret: true,
secretVersioning: true, secretVersioning: true,
pitRecovery: false, pitRecovery: false,
ipAllowlisting: false, ipAllowlisting: false,
rbac: false, rbac: true,
customRateLimits: false, customRateLimits: false,
customAlerts: false, customAlerts: false,
auditLogs: false, auditLogs: false,
@@ -34,12 +34,12 @@ export enum PermissionConditionOperators {
} }
export const formatedConditionsOperatorNames: { [K in PermissionConditionOperators]: string } = { export const formatedConditionsOperatorNames: { [K in PermissionConditionOperators]: string } = {
[PermissionConditionOperators.$EQ]: "equal", [PermissionConditionOperators.$EQ]: "equal to",
[PermissionConditionOperators.$IN]: "containing", [PermissionConditionOperators.$IN]: "contains",
[PermissionConditionOperators.$ALL]: "contains all", [PermissionConditionOperators.$ALL]: "contains all",
[PermissionConditionOperators.$NEQ]: "not equal", [PermissionConditionOperators.$NEQ]: "not equal to",
[PermissionConditionOperators.$GLOB]: "glob matching", [PermissionConditionOperators.$GLOB]: "matches glob pattern",
[PermissionConditionOperators.$REGEX]: "regex" [PermissionConditionOperators.$REGEX]: "matches regex pattern"
}; };
export type TPermissionConditionOperators = { export type TPermissionConditionOperators = {
+26 -17
View File
@@ -94,11 +94,13 @@ export const queryClient = new QueryClient({
> >
<div> <div>
{el.inverted ? "Cannot" : "Can"}{" "} {el.inverted ? "Cannot" : "Can"}{" "}
<span className="text-primary-600">{el.action.toString()}</span>{" "} <span className="text-yellow-600">
{el.subject.toString()} {hasConditions && "with conditions"} {el.action.toString().replaceAll(",", ", ")}
</span>{" "}
{el.subject.toString()} {hasConditions && "with conditions:"}
</div> </div>
{hasConditions && ( {hasConditions && (
<div className="flex flex-col gap-1 pt-2 text-sm"> <ul className="flex list-disc flex-col gap-1 pl-5 pt-2 text-sm">
{Object.keys(el.conditions || {}).flatMap((field, fieldIndex) => { {Object.keys(el.conditions || {}).flatMap((field, fieldIndex) => {
const operators = ( const operators = (
el.conditions as Record< el.conditions as Record<
@@ -111,38 +113,45 @@ export const queryClient = new QueryClient({
const formattedFieldName = camelCaseToSpaces(field).toLowerCase(); const formattedFieldName = camelCaseToSpaces(field).toLowerCase();
if (typeof operators === "string") { if (typeof operators === "string") {
return ( return (
<div <li
key={`Forbidden-error-details-${index + 1}-${ key={`Forbidden-error-details-${index + 1}-${
fieldIndex + 1 fieldIndex + 1
}`} }`}
> >
{formattedFieldName} equal{" "} <span className="font-bold capitalize">
<span className="text-primary-600">{operators}</span> {formattedFieldName}
</div> </span>{" "}
<span className="text-mineshaft-200">equal to</span>{" "}
<span className="text-yellow-600">{operators}</span>
</li>
); );
} }
return Object.keys(operators).map((operator, operatorIndex) => ( return Object.keys(operators).map((operator, operatorIndex) => (
<div <li
key={`Forbidden-error-details-${index + 1}-${ key={`Forbidden-error-details-${index + 1}-${
fieldIndex + 1 fieldIndex + 1
}-${operatorIndex + 1}`} }-${operatorIndex + 1}`}
> >
<span className="capitalize">{formattedFieldName}</span>{" "} <span className="font-bold capitalize">
{ {formattedFieldName}
formatedConditionsOperatorNames[ </span>{" "}
operator as PermissionConditionOperators <span className="text-mineshaft-200">
] {
}{" "} formatedConditionsOperatorNames[
<span className="text-primary-600"> operator as PermissionConditionOperators
]
}
</span>{" "}
<span className="text-yellow-600">
{operators[ {operators[
operator as PermissionConditionOperators operator as PermissionConditionOperators
].toString()} ].toString()}
</span> </span>
</div> </li>
)); ));
})} })}
</div> </ul>
)} )}
</div> </div>
); );
@@ -154,7 +154,7 @@ export const CreateSecretForm = ({
isMulti isMulti
name="tagIds" name="tagIds"
isDisabled={!canReadTags} isDisabled={!canReadTags}
isLoading={isTagsLoading} isLoading={isTagsLoading && canReadTags}
options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))} options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
value={field.value} value={field.value}
onChange={field.onChange} onChange={field.onChange}
@@ -867,7 +867,7 @@ export const SecretOverviewPage = () => {
<div className="thin-scrollbar mt-4"> <div className="thin-scrollbar mt-4">
<TableContainer <TableContainer
onScroll={(e) => setScrollOffset(e.currentTarget.scrollLeft)} onScroll={(e) => setScrollOffset(e.currentTarget.scrollLeft)}
className="thin-scrollbar" className="thin-scrollbar rounded-b-none"
> >
<Table> <Table>
<THead> <THead>
@@ -255,7 +255,7 @@ export const CreateSecretForm = ({ secretPath = "/", getSecretByKey, onClose }:
isMulti isMulti
name="tagIds" name="tagIds"
isDisabled={!canReadTags} isDisabled={!canReadTags}
isLoading={isTagsLoading} isLoading={isTagsLoading && canReadTags}
options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))} options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
value={field.value} value={field.value}
onChange={field.onChange} onChange={field.onChange}