Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style(console): update radio card style #6700

Merged
merged 3 commits into from
Oct 22, 2024
Merged

style(console): update radio card style #6700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
14e08f4
style(console): update radio card style
simeng-li Oct 21, 2024
70a067d
style(console,phrases): update selector styles (#6702)
simeng-li Oct 22, 2024
dc8263b
fix(console): add devFeatureGuard
simeng-li Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/console/src/ds-components/RadioGroup/Radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ import styles from './Radio.module.scss';

function Check() {
return (
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="10.8759" cy="10.5203" r="8.33333" fill="white" />
<circle cx="10.876" cy="10.5204" r="8" fill="white" />
<path
d="M8.66666 1.33334C4.99999 1.33334 1.99999 4.33334 1.99999 8.00001C1.99999 11.6667 4.99999 14.6667 8.66666 14.6667C12.3333 14.6667 15.3333 11.6667 15.3333 8.00001C15.3333 4.33334 12.3333 1.33334 8.66666 1.33334ZM11.4667 6.86668L8.26666 10.0667C7.99999 10.3333 7.59999 10.3333 7.33333 10.0667L5.86666 8.60001C5.59999 8.33334 5.59999 7.93334 5.86666 7.66668C6.13333 7.40001 6.53333 7.40001 6.79999 7.66668L7.79999 8.66668L10.5333 5.93334C10.8 5.66668 11.2 5.66668 11.4667 5.93334C11.7333 6.20001 11.7333 6.60001 11.4667 6.86668Z"
d="M10.8759 2.18701C6.2926 2.18701 2.5426 5.93701 2.5426 10.5203C2.5426 15.1037 6.2926 18.8537 10.8759 18.8537C15.4593 18.8537 19.2093 15.1037 19.2093 10.5203C19.2093 5.93701 15.4593 2.18701 10.8759 2.18701ZM14.3759 9.10368L10.3759 13.1037C10.0426 13.437 9.5426 13.437 9.20927 13.1037L7.37594 11.2703C7.0426 10.937 7.0426 10.437 7.37594 10.1037C7.70927 9.77035 8.20927 9.77035 8.5426 10.1037L9.7926 11.3537L13.2093 7.93701C13.5426 7.60368 14.0426 7.60368 14.3759 7.93701C14.7093 8.27035 14.7093 8.77035 14.3759 9.10368Z"
fill="#5D34F2"
/>
</svg>
Expand Down
13 changes: 11 additions & 2 deletions packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/ConfigForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable max-lines */
import {
type Application,
type SsoConnectorWithProviderConfig,
Expand Down Expand Up @@ -178,7 +179,14 @@ function ConfigForm({
)}
options={applications.map((application) => ({
value: application.id,
title: `${application.name} (${application.type}, ID: ${application.id})`,
title: (
<span>
{application.name}
<span className={styles.applicationDetails}>
({t(`guide.categories.${application.type}`)}, ID: {application.id})
</span>
</span>
),
}))}
value={value}
error={emptyApplicationsError ?? errors.config?.defaultApplicationId?.message}
Expand Down Expand Up @@ -215,7 +223,7 @@ function ConfigForm({
}_title`
)}
</div>
<div>
<div className={styles.radioCardBody}>
{t(
`enterprise_sso_details.idp_initiated_auth_config.auto_authentication_${
value ? 'enabled' : 'disabled'
Expand Down Expand Up @@ -315,3 +323,4 @@ function ConfigForm({
}

export default ConfigForm;
/* eslint-enable max-lines */
17 changes: 12 additions & 5 deletions packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,23 @@
}
}

.applicationDetails {
margin-inline-start: _.unit(2);
color: var(--color-text-secondary);
}

.radioCardTitle {
font: var(--font-label-2);
padding-inline-end: _.unit(5);
margin-bottom: _.unit(2);
}

.radioCardBody {
color: var(--color-text-secondary);
}

.radioCardFooter {
margin-top: _.unit(4);
font: var(--font-body-3);
color: var(--color-text-secondary);
}

Expand All @@ -30,8 +39,6 @@
}
}

div[class$='disabled'] {
.radioCardFooter {
color: var(--color-disabled);
}
div[class*='radio'][class*='disabled'] {
color: inherit;
}
3 changes: 2 additions & 1 deletion packages/console/src/pages/EnterpriseSsoDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import Skeleton from '@/components/DetailsPage/Skeleton';
import Drawer from '@/components/Drawer';
import PageMeta from '@/components/PageMeta';
import { EnterpriseSsoDetailsTabs } from '@/consts';
import { isCloud } from '@/consts/env';
import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
import ConfirmModal from '@/ds-components/ConfirmModal';
import DynamicT from '@/ds-components/DynamicT';
Expand Down Expand Up @@ -69,6 +69,7 @@ function EnterpriseSsoDetails() {

const isIdpInitiatedAuthConfigEnabled = useMemo(
() =>
isDevFeaturesEnabled &&
isCloud &&
ssoConnector?.providerType === SsoProviderType.SAML &&
currentSubscriptionQuota.idpInitiatedSsoEnabled,
Expand Down
11 changes: 5 additions & 6 deletions packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,14 @@ const enterprise_sso_details = {
'No applications found. Please add one in the <a>Applications</a> section.',
empty_applications_placeholder: 'No applications',
authentication_type: 'Authentication type',
auto_authentication_disabled_title: 'Redirect to client for SP-initiated SSO (Recommended)',
auto_authentication_disabled_title: 'Redirect to client for SP-initiated SSO',
auto_authentication_disabled_description:
'Redirect users to the client-side application to initiate a secure SP-initiated OIDC authentication. This will prevent the CSRF attack and increase the security of the authentication process.',
'Recommended. Redirect users to the client-side application to initiate a secure SP-initiated OIDC authentication. This will prevent the CSRF attacks.',
auto_authentication_enabled_title: 'Directly sign in using the IdP-initiated SSO',
auto_authentication_enabled_description:
'Sign in directly using IdP-initiated SSO authentication. After successful sign-in, users will be redirected to the specified Redirect URI with the authorization code. (Without state and PKCE validation)',
auto_authentication_disabled_app:
'For traditional web applications and single-page applications (SPA)',
auto_authentication_enabled_app: 'For traditional web applications only',
'After successful sign-in, users will be redirected to the specified Redirect URI with the authorization code (Without state and PKCE validation).',
auto_authentication_disabled_app: 'For traditional web app, single-page app (SPA)',
auto_authentication_enabled_app: 'For traditional web app',
idp_initiated_auth_callback_uri: 'Client callback URI',
idp_initiated_auth_callback_uri_tooltip:
'The client callback URI to initiate a SP-initiated SSO authentication flow. An ssoConnectorId will be appended to the URI as a query parameter. (e.g., https://your.domain/sso/callback?connectorId={{ssoConnectorId}})',
Expand Down
Loading