Skip to content

Commit

Permalink
Update core config API
Browse files Browse the repository at this point in the history
  • Loading branch information
@prateek3255
prateek3255 committed Apr 11, 2024
1 parent 5367055 commit a103a7e
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 106 deletions.
1 change: 1 addition & 0 deletions src/api/tenants/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export type CoreConfigOption = {
isNullable: boolean;
defaultValue: string | number | boolean | null;
isPluginProperty: boolean;
isPluginPropertyEditable: boolean;
};

export type TenantDashboardView =
Expand Down
13 changes: 11 additions & 2 deletions src/ui/components/deleteCrossButton/DeleteCrossButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
* License for the specific language governing permissions and limitations
* under the License.
*/
import { useState } from "react";
import { useEffect, useState } from "react";
import { ReactComponent as CloseIconActive } from "../../../assets/close-active.svg";
import { ReactComponent as CloseIconDefault } from "../../../assets/close-inactive.svg";

Expand All @@ -28,14 +28,23 @@ export const DeleteCrossButton = ({
disabled?: boolean;
}) => {
const [isHovered, setIsHovered] = useState(false);

useEffect(() => {
if (disabled) {
setIsHovered(false);
}
}, [disabled]);

return (
<button
className="delete-cross-button"
onClick={onClick}
disabled={disabled}
aria-label={label}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
onMouseLeave={() => setIsHovered(false)}
onMouseOver={() => setIsHovered(true)}
onMouseOut={() => setIsHovered(false)}>
{isHovered && !disabled ? <CloseIconActive /> : <CloseIconDefault />}
</button>
);
Expand Down
24 changes: 14 additions & 10 deletions src/ui/components/tenants/tenantDetail/CoreConfigSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const CoreConfigSection = () => {
let databaseType: "postgres" | "mysql" | null = null;

if (hasPluginProperties) {
if (tenantInfo.coreConfig.some((property) => property.key.startsWith("postgres_"))) {
if (tenantInfo.coreConfig.some((property) => property.key.startsWith("postgresql_"))) {
databaseType = "postgres";
} else if (tenantInfo.coreConfig.some((property) => property.key.startsWith("mysql_"))) {
databaseType = "mysql";
Expand Down Expand Up @@ -72,6 +72,7 @@ export const CoreConfigSection = () => {
isDifferentAcrossTenants={config.isDifferentAcrossTenants}
isModifyableOnlyViaConfigYaml={config.isModifyableOnlyViaConfigYaml}
isPluginProperty={config.isPluginProperty}
isPluginPropertyEditable={config.isPluginPropertyEditable}
possibleValues={config.possibleValues}
/>
);
Expand All @@ -84,8 +85,9 @@ export const CoreConfigSection = () => {
</h2>
<hr className="tenant-detail__core-config-table__plugin-properties-divider" />
<p className="tenant-detail__core-config-table__plugin-properties-description">
Some of these properties cannot be directly modified from the UI, instead you can make
an API request to core to modify these properties.{" "}
Some of these properties need to be modified together, hence they cannot be directly
modified from the UI, instead you can make an API request to core to modify these
properties.{" "}
<button
onClick={() => setShowPluginDialog(true)}
className="tenant-detail__core-config-table__button-link">
Expand All @@ -110,6 +112,7 @@ export const CoreConfigSection = () => {
isDifferentAcrossTenants={config.isDifferentAcrossTenants}
isModifyableOnlyViaConfigYaml={config.isModifyableOnlyViaConfigYaml}
isPluginProperty={config.isPluginProperty}
isPluginPropertyEditable={config.isPluginPropertyEditable}
possibleValues={config.possibleValues}
/>
);
Expand Down Expand Up @@ -141,6 +144,7 @@ type CoreConfigTableRowProps = {
isDifferentAcrossTenants: boolean;
isModifyableOnlyViaConfigYaml: boolean;
isPluginProperty: boolean;
isPluginPropertyEditable: boolean;
};

const isUsingSaaS = localStorage.getItem("isUsingSaaS") === "true";
Expand All @@ -152,12 +156,12 @@ const CoreConfigTableRow = ({
tooltip,
type,
isNullable,
defaultValue,
possibleValues,
isSaaSProtected,
isDifferentAcrossTenants,
isModifyableOnlyViaConfigYaml,
isPluginProperty,
isPluginPropertyEditable,
}: CoreConfigTableRowProps) => {
const [isEditing, setIsEditing] = useState(false);
const [currentValue, setCurrentValue] = useState(value);
Expand All @@ -171,7 +175,7 @@ const CoreConfigTableRow = ({

const isUneditable =
isPublicTenant ||
isPluginProperty ||
(isPluginProperty && !isPluginPropertyEditable) ||
isModifyableOnlyViaConfigYaml ||
(isUsingSaaS && isSaaSProtected) ||
(!isPublicTenant && !isDifferentAcrossTenants);
Expand Down Expand Up @@ -264,10 +268,6 @@ const CoreConfigTableRow = ({
};

const renderUneditablePropertyReason = () => {
if (isPluginProperty) {
return "This property is a database property cannot be modified from the UI. Checkout the description for this section for more details.";
}

if (isModifyableOnlyViaConfigYaml && isUsingSaaS) {
return "This property cannot be modified since you are using the managed service.";
}
Expand Down Expand Up @@ -297,6 +297,10 @@ const CoreConfigTableRow = ({
);
}

if (isPluginProperty && !isPluginPropertyEditable) {
return "This property is a database property that cannot be directly modified from the UI. Checkout the description for this section for more details.";
}

return isUsingSaaS
? "You can modify this property via the SaaS dashboard."
: "This property is modifyable only via the config.yaml file or via Docker env variables.";
Expand All @@ -312,7 +316,7 @@ const CoreConfigTableRow = ({
<div className="tenant-detail__core-config-table__row-info">
<div className="tenant-detail__core-config-table__row-name">
{tooltip && (
<TooltipContainer tooltip={`${tooltip} \n Default Value: ${defaultValue}`}>
<TooltipContainer tooltip={`${tooltip}`}>
<InfoIcon />
</TooltipContainer>
)}
Expand Down
8 changes: 4 additions & 4 deletions src/ui/components/tenants/tenantDetail/editPluginPropertyDialog/EditPluginPropertyDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ ${commonHeaders.trim()}
"${databaseType === "mysql" ? "mysql_port" : "postgresql_port"}": 5432,
"${databaseType === "mysql" ? "mysql_user" : "postgresql_user"}": "root",
"${databaseType === "mysql" ? "mysql_password" : "postgresql_password"}": "root",
"${databaseType === "mysql" ? "mysql_database_name" : "postgresql_database_name"}": "supertokens"
"${databaseType === "mysql" ? "mysql_database_name" : "postgresql_database_name"}": "supertokens"
}
}'`;

Expand All @@ -70,12 +70,12 @@ ${commonHeaders.trim()}

return (
<Dialog
title="Edit Plugin Property"
title="Edit Database Properties"
onCloseDialog={onCloseDialog}
className="dialog-container-600">
className="dialog-container-650">
<DialogContent>
<DialogConfirmText>
Use the following curl request to modify multiple plugin properties at once.
Use the following curl request to modify multiple database properties at once.
</DialogConfirmText>
<div className="command-container">
<code
Expand Down
6 changes: 3 additions & 3 deletions ...ui/components/tenants/tenantDetail/editPluginPropertyDialog/editPluginPropertyDialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
* under the License.
*/

.dialog-container-600 {
max-width: 600px;
.dialog-container-650 {
max-width: 650px;
}

.command-container {
Expand Down Expand Up @@ -49,7 +49,7 @@
line-height: 1.6;
color: var(--color-command);
flex: 1;
max-height: 250px;
max-height: 300px;
overflow-y: scroll;

.hljs-string {
Expand Down
19 changes: 12 additions & 7 deletions src/ui/components/tenants/tenantDetail/keyValueInput/KeyValueInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ type KeyValueInputProps = {

export const KeyValueInput = (props: KeyValueInputProps) => {
const { label, value, tooltip, isRequired, name, fixedFields, isOverridden } = props;
const hasOnlyOneEmptyKeyValuePair = value.length === 1 && value[0][0]?.trim() === "" && value[0][1]?.trim() === "";
return (
<div className="key-value-input-container">
<ThirdPartyProviderInputLabel
Expand Down Expand Up @@ -76,13 +77,17 @@ export const KeyValueInput = (props: KeyValueInputProps) => {
name={`value-${name}-${index}`}
type="text"
/>
{value.length > 1 && (
<DeleteCrossButton
onClick={() => props.onChange(props.value.filter((_, i) => i !== index))}
label="Delete"
disabled={fixedFields?.includes(pair[0])}
/>
)}
<DeleteCrossButton
onClick={() => {
if (value.length === 1) {
props.onChange([["", ""]]);
} else {
props.onChange(props.value.filter((_, i) => i !== index));
}
}}
label="Delete"
disabled={fixedFields?.includes(pair[0]) || hasOnlyOneEmptyKeyValuePair}
/>
</div>
);
})}
Expand Down
86 changes: 6 additions & 80 deletions src/ui/components/tenants/tenantDetail/thirdPartyPage/ThirdPartyPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,12 @@
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { useGetThirdPartyProviderInfo } from "../../../../../api/tenants";
import { ProviderConfigResponse, TenantDashboardView } from "../../../../../api/tenants/types";
import { IN_BUILT_THIRD_PARTY_PROVIDERS, SAML_PROVIDER_ID } from "../../../../../constants";
import { getImageUrl, isValidHttpUrl } from "../../../../../utils";
import Button from "../../../button";
import { Loader } from "../../../loader/Loader";
import { useTenantDetailContext } from "../TenantDetailContext";
import { TenantDetailHeader } from "../TenantDetailHeader";
import { PanelHeader, PanelHeaderTitleWithTooltip, PanelRoot } from "../tenantDetailPanel/TenantDetailPanel";
import { ThirdPartyProviderButton } from "../thirdPartyProviderButton/ThirdPartyProviderButton";
import { ProviderInfoForm } from "../thirdPartyProviderConfig/ProviderInfoForm";
import { ThirdPartyProviderInput } from "../thirdPartyProviderInput/ThirdPartyProviderInput";
import "./thirdPartyPage.scss";
Expand Down Expand Up @@ -134,84 +132,6 @@ const ProviderInfo = ({
);
};

const ThirdPartyProvidersList = ({ setViewObj }: { setViewObj: Dispatch<SetStateAction<TenantDashboardView>> }) => {
const handleAddNewInBuiltProvider = (providerId: string) => {
window.scrollTo(0, 0);
setViewObj({
view: "add-or-edit-third-party-provider",
thirdPartyId: providerId,
isAddingNewProvider: true,
});
};

return (
<PanelRoot>
<PanelHeader>
<PanelHeaderTitleWithTooltip>Add new Social / Enterprise Login Provider</PanelHeaderTitleWithTooltip>
</PanelHeader>
<div className="provider-list-header">
Select the Provider that you want to add for you tenant from the list below
</div>
<div className="provider-list-container">
<h2 className="provider-list-container__header-with-divider">Enterprise Providers</h2>
<div className="provider-list-container__providers-grid">
{IN_BUILT_THIRD_PARTY_PROVIDERS.filter((provider) => provider.isEnterprise).map((provider) => {
return (
<ThirdPartyProviderButton
key={provider.id}
title={provider.label}
icon={provider.icon}
onClick={() => handleAddNewInBuiltProvider(provider.id)}
/>
);
})}
</div>
<h2 className="provider-list-container__header-with-divider provider-list-container__header-with-divider--margin-top-30">
Social Providers
</h2>
<div className="provider-list-container__providers-grid">
{IN_BUILT_THIRD_PARTY_PROVIDERS.filter((provider) => !provider.isEnterprise).map((provider) => {
return (
<ThirdPartyProviderButton
key={provider.id}
title={provider.label}
icon={provider.icon}
onClick={() => handleAddNewInBuiltProvider(provider.id)}
/>
);
})}
</div>
<h2 className="provider-list-container__header-with-divider provider-list-container__header-with-divider--margin-top-30">
Custom OAuth Providers
</h2>
<div className="provider-list-container__providers-grid">
<ThirdPartyProviderButton
title="Add Custom Provider"
type="without-icon"
onClick={() => {
window.scrollTo(0, 0);
setViewObj({
view: "add-or-edit-third-party-provider",
isAddingNewProvider: true,
});
}}
/>
</div>
<h2 className="provider-list-container__header-with-divider provider-list-container__header-with-divider--margin-top-30">
SAML
</h2>
<div className="provider-list-container__providers-grid">
<ThirdPartyProviderButton
title="Add SAML Provider"
type="without-icon"
onClick={() => handleAddNewInBuiltProvider(SAML_PROVIDER_ID)}
/>
</div>
</div>
</PanelRoot>
);
};

const ProviderAdditionalConfigForm = ({
providerId,
fetchProviderInfo,
Expand Down Expand Up @@ -379,6 +299,10 @@ const ActiveDirectoryForm = ({ handleContinue, handleGoBack }: AdditionalConfigF
/>
</div>

<p className="additional-config-container__note">
For example: <code>97f9a564-fcee-4b88-ae34-a1fbc4656593</code>
</p>

<hr className="provider-config-divider" />
<div className="additional-config-footer">
<div />
Expand Down Expand Up @@ -426,6 +350,8 @@ const OktaForm = ({ handleContinue, handleGoBack }: AdditionalConfigFormProps) =
/>
</div>

<p className="additional-config-container__note">For example: https://dev-123456.okta.com</p>

<hr className="provider-config-divider" />
<div className="additional-config-footer">
<div />
Expand Down

0 comments on commit a103a7e

Please sign in to comment.