feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896

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

Merged
panteliselef merged 9 commits into from
Oct 31, 2023
Merged

feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI #1896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
74a2cbe
fix(clerk-js): Correct initial ref value for form feedback (#1933)
desiprisg Oct 25, 2023
28ec80d
chore(clerk-js): Use `org:sys_domains:read`
panteliselef Oct 16, 2023
c5622fb
test(clerk-js): Use `org:sys_domains:read`
panteliselef Oct 16, 2023
8fb7cd2
chore(clerk-js): Add changeset
panteliselef Oct 17, 2023
b4eb751
chore(clerk-js): UseDomainList
panteliselef Oct 17, 2023
c3092fd
feat(clerk-js): Session.isAuthorized now support the `any` parameter
panteliselef Oct 17, 2023
d8acfa8
chore(clerk-js): Improve relative url creation in DomainList
panteliselef Oct 18, 2023
01f9db6
test(clerk-js): Test cases for trimLeadingSlash
panteliselef Oct 18, 2023
9a375d9
chore(clerk-js): Address Pr comments
panteliselef Oct 25, 2023
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: 6 additions & 0 deletions .changeset/curly-news-push.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Shows list of domains if member has the `org:sys_domain:read` permission.
2 changes: 2 additions & 0 deletions .changeset/odd-lemons-reply.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---
19 changes: 17 additions & 2 deletions packages/clerk-js/src/core/resources/Session.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export class Session extends BaseResource implements SessionResource {
* @experimental The method is experimental and subject to change in future releases.
*/
isAuthorized: IsAuthorized = async params => {
return new Promise(resolve => {
return new Promise((resolve, reject) => {
// if there is no active organization user can not be authorized
if (!this.lastActiveOrganizationId || !this.user) {
return resolve(false);
Expand All@@ -106,7 +106,22 @@ export class Session extends BaseResource implements SessionResource {
if (params.role) {
return resolve(activeOrganizationRole === params.role);
}
return resolve(false);

if (params.any) {
return resolve(
!!params.any.find(permObj => {
if (permObj.permission) {
return activeOrganizationPermissions.includes(permObj.permission);
}
if (permObj.role) {
return activeOrganizationRole === permObj.role;
}
return false;
}),
);
}

return reject();
});
};

Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/core/test/fixtures.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ import type {
export const mockJwt =
'eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yR0lvUWhiVXB5MGhYN0IyY1ZrdVRNaW5Yb0QiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovL2FjY291bnRzLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsImV4cCI6MTY2NjY0ODMxMCwiaWF0IjoxNjY2NjQ4MjUwLCJpc3MiOiJodHRwczovL2NsZXJrLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsIm5iZiI6MTY2NjY0ODI0MCwic2lkIjoic2Vzc18yR2JEQjRlbk5kQ2E1dlMxenBDM1h6Zzl0SzkiLCJzdWIiOiJ1c2VyXzJHSXBYT0VwVnlKdzUxcmtabjlLbW5jNlN4ciJ9.n1Usc-DLDftqA0Xb-_2w8IGs4yjCmwc5RngwbSRvwevuZOIuRoeHmE2sgCdEvjfJEa7ewL6EVGVcM557TWPW--g_J1XQPwBy8tXfz7-S73CEuyRFiR97L2AHRdvRtvGtwR-o6l8aHaFxtlmfWbQXfg4kFJz2UGe9afmh3U9-f_4JOZ5fa3mI98UMy1-bo20vjXeWQ9aGrqaxHQxjnzzC-1Kpi5LdPvhQ16H0dPB8MHRTSM5TAuLKTpPV7wqixmbtcc2-0k6b9FKYZNqRVTaIyV-lifZloBvdzlfOF8nW1VVH_fx-iW5Q3hovHFcJIULHEC1kcAYTubbxzpgeVQepGg';

type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };
export type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };

type WithUserParams = Omit<
Partial<UserJSON>,
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/common/Gate.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
import type { IsAuthorized, OrganizationPermission } from '@clerk/types';
import type { IsAuthorized } from '@clerk/types';
import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
import React, { useEffect } from 'react';

import { useCoreSession } from '../contexts';
import { useFetch } from '../hooks';
import { useRouter } from '../router';

type GateParams = Omit<Parameters<IsAuthorized>[0], 'permission'> & { permission: OrganizationPermission };
type GateParams = Parameters<IsAuthorized>[0];
type GateProps = PropsWithChildren<
GateParams & {
fallback?: ReactNode;
Expand Down
89 changes: 66 additions & 23 deletions packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
import type { GetDomainsParams, OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
import type { OrganizationDomainVerificationStatus } from '@clerk/types';
import React, { useMemo } from 'react';

import { withGate } from '../../common';
import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
import { useGate, withGate } from '../../common';
import { useCoreOrganization } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import { Box, Col, localizationKeys, Spinner } from '../../customizables';
import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
import { useInView } from '../../hooks';
Expand All@@ -17,10 +19,61 @@ type DomainListProps = GetDomainsParams & {
* Enables internal links to navigate to the correct page
* based on when this component is used
*/
redirectSubPath: string;
redirectSubPath: 'organization-settings/domain' | 'domain';
fallback?: React.ReactNode;
};

const useDomainList = () => {
const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
Comment thread
SokratisVidros marked this conversation as resolved.
const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });

return {
showDotMenu: canDeleteDomain || canVerifyDomain,
canVerifyDomain,
canDeleteDomain,
};
};

const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));

const useMenuActions = (
parentPath: string,
domainId: string,
): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
const { canDeleteDomain, canVerifyDomain } = useDomainList();
const { navigate } = useRouter();

const menuActions = [];

if (canVerifyDomain) {
menuActions.push({
label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
});
}

if (canDeleteDomain) {
menuActions.push({
label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
isDestructive: true,
onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
});
}

return menuActions;
};

const DomainListDotMenu = ({
redirectSubPath,
domainId,
}: Pick<DomainListProps, 'redirectSubPath'> & {
domainId: OrganizationDomainResource['id'];
}) => {
const actions = useMenuActions(redirectSubPath, domainId);
return <ThreeDotsMenu actions={actions} />;
};

export const DomainList = withGate(
(props: DomainListProps) => {
const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
Expand All@@ -31,6 +84,7 @@ export const DomainList = withGate(
},
});

const { showDotMenu } = useDomainList();
const { ref } = useInView({
threshold: 0,
onChange: inView => {
Expand DownExpand Up@@ -69,7 +123,7 @@ export const DomainList = withGate(
<Col>
{domainList.length === 0 && !domains?.isLoading && fallback}
{domainList.map(d => {
if (!(d.verification && d.verification.status === 'verified')) {
if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
return (
<BlockWithTrailingComponent
key={d.id}
Expand All@@ -82,23 +136,12 @@ export const DomainList = withGate(
})}
badge={<EnrollmentBadge organizationDomain={d} />}
trailingComponent={
<ThreeDotsMenu
actions={[
{
label: localizationKeys(
'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
),
onClick: () => navigate(`${redirectSubPath}${d.id}/verify`),
},
{
label: localizationKeys(
'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
),
isDestructive: true,
onClick: () => navigate(`${redirectSubPath}${d.id}/remove`),
},
]}
/>
showDotMenu ? (

@SokratisVidrosSokratisVidrosOct 17, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 showDotMeny && <JSX/>

@panteliselefpanteliselefOct 18, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tried that, seems like trailingComponent does not accept null, I didn't want to mess with the signature of the component.

@SokratisVidrosSokratisVidrosOct 25, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we update its types?

@panteliselefpanteliselefOct 25, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following has type of false | EmotionJSX.Element | null

showDotMenu&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)

So i would have to do

(showDotMenu||null)&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)

Which i'm not convinced it is better

@SokratisVidrosSokratisVidrosOct 31, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand what you are talking about. Is this the type?

@panteliselefpanteliselefOct 31, 2023

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the TS error
image

<DomainListDotMenu
redirectSubPath={redirectSubPath}
domainId={d.id}
/>
) : undefined
}
>
{d.name}
Expand All@@ -116,7 +159,7 @@ export const DomainList = withGate(
padding: `${t.space.$3} ${t.space.$4}`,
minHeight: t.sizes.$10,
})}
onClick={() => navigate(`${redirectSubPath}${d.id}`)}
onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
>
{d.name}
</ArrowBlockButton>
Expand DownExpand Up@@ -154,6 +197,6 @@ export const DomainList = withGate(
);
},
{
permission: 'org:sys_domains:manage',
permission: 'org:sys_domains:read',
},
);
2 changes: 1 addition & 1 deletion ...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const OrganizationMembersTabInvitations = () => {
onClick={() => navigate('organization-settings/domain')}
/>
}
redirectSubPath={'organization-settings/domain/'}
redirectSubPath={'organization-settings/domain'}
verificationStatus={'verified'}
enrollmentMode={'automatic_invitation'}
/>
Expand Down
82 changes: 45 additions & 37 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { BlockButton } from '../../common';
import { useOrganizationProfileContext } from '../../contexts';
import { BlockButton, Gate } from '../../common';
import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
import { Col, Flex, localizationKeys } from '../../customizables';
import { Header } from '../../elements';
import { useRouter } from '../../router';
Expand All@@ -8,10 +8,13 @@ import { MembershipWidget } from './MembershipWidget';
import { RequestToJoinList } from './RequestToJoinList';

export const OrganizationMembersTabRequests = () => {
const { organizationSettings } = useEnvironment();
const { navigate } = useRouter();
//@ts-expect-error
const { __unstable_manageBillingUrl } = useOrganizationProfileContext();

const isDomainsEnabled = organizationSettings?.domains?.enabled;

return (
<Col
gap={8}
Expand All@@ -20,42 +23,47 @@ export const OrganizationMembersTabRequests = () => {
}}
>
{__unstable_manageBillingUrl && <MembershipWidget />}
<Col
gap={2}
sx={{
width: '100%',
}}
>
<Header.Root>
<Header.Title
localizationKey={localizationKeys(
'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
)}
textVariant='largeMedium'
/>
<Header.Subtitle
localizationKey={localizationKeys(
'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
)}
variant='regularRegular'
/>
</Header.Root>
<DomainList
fallback={
<BlockButton
colorScheme='primary'
textLocalizationKey={localizationKeys(
'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
)}
id='manageVerifiedDomains'
onClick={() => navigate('organization-settings/domain')}

{isDomainsEnabled && (
<Gate permission='org:sys_domains:manage'>
<Col
gap={2}
sx={{
width: '100%',
}}
>
<Header.Root>
<Header.Title
localizationKey={localizationKeys(
'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
)}
textVariant='largeMedium'
/>
<Header.Subtitle
localizationKey={localizationKeys(
'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
)}
variant='regularRegular'
/>
</Header.Root>
<DomainList
fallback={
<BlockButton
colorScheme='primary'
textLocalizationKey={localizationKeys(
'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
)}
id='manageVerifiedDomains'
onClick={() => navigate('organization-settings/domain')}
/>
}
redirectSubPath={'organization-settings/domain'}
verificationStatus={'verified'}
enrollmentMode={'automatic_suggestion'}
/>
}
redirectSubPath={'organization-settings/domain/'}
verificationStatus={'verified'}
enrollmentMode={'automatic_suggestion'}
/>
</Col>
</Col>
</Gate>
)}

<Flex
direction='col'
Expand Down
2 changes: 1 addition & 1 deletion packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
</Route>
<Route path=':id'>
<Gate
permission={'org:sys_domains:manage'}
any={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
redirectTo='../../'
>
<VerifiedDomainPage />
Expand Down
4 changes: 2 additions & 2 deletions packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export const OrganizationSettings = () => {
<Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
</Header.Root>
<OrganizationProfileSection />
<Gate permission='org:sys_domains:manage'>
<Gate permission='org:sys_domains:read'>
<OrganizationDomainsSection />
</Gate>
<OrganizationDangerSection />
Expand DownExpand Up@@ -85,7 +85,7 @@ const OrganizationDomainsSection = () => {
subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
id='organizationDomains'
>
<DomainList redirectSubPath={'domain/'} />
<DomainList redirectSubPath={'domain'} />

<AddBlockButton
textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896

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

 Merged

panteliselef
merged 9 commits into

from

Oct 31, 2023
 Merged


feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI
#1896
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
74a2cbe

fix(clerk-js): Correct initial ref value for form feedback (#1933)


desiprisg Oct 25, 2023
28ec80d

chore(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
c5622fb

test(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
8fb7cd2

chore(clerk-js): Add changeset


panteliselef Oct 17, 2023
b4eb751

chore(clerk-js): UseDomainList


panteliselef Oct 17, 2023
c3092fd

feat(clerk-js): Session.isAuthorized now support the `any` parameter


panteliselef Oct 17, 2023
d8acfa8

chore(clerk-js): Improve relative url creation in DomainList


panteliselef Oct 18, 2023
01f9db6

test(clerk-js): Test cases for trimLeadingSlash


panteliselef Oct 18, 2023
9a375d9

chore(clerk-js): Address Pr comments


panteliselef Oct 25, 2023

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: 6 additions & 0 deletions
.changeset/curly-news-push.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Shows list of domains if member has the `org:sys_domain:read` permission.

2 changes: 2 additions & 0 deletions
.changeset/odd-lemons-reply.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

19 changes: 17 additions & 2 deletions
packages/clerk-js/src/core/resources/Session.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export class Session extends BaseResource implements SessionResource {
 * @experimental The method is experimental and subject to change in future releases.
 */
 isAuthorized: IsAuthorized = async params => {
 return new Promise(resolve => {
 return new Promise((resolve, reject) => {
 // if there is no active organization user can not be authorized
 if (!this.lastActiveOrganizationId || !this.user) {
 return resolve(false);
Expand All@@ -106,7 +106,22 @@ export class Session extends BaseResource implements SessionResource {
 if (params.role) {
 return resolve(activeOrganizationRole === params.role);
 }
 return resolve(false);

 if (params.any) {
 return resolve(
 !!params.any.find(permObj => {
 if (permObj.permission) {
 return activeOrganizationPermissions.includes(permObj.permission);
 }
 if (permObj.role) {
 return activeOrganizationRole === permObj.role;
 }
 return false;
 }),
 );
 }

 return reject();
 });
 };

Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/test/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ import type {
export const mockJwt =
 'eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yR0lvUWhiVXB5MGhYN0IyY1ZrdVRNaW5Yb0QiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovL2FjY291bnRzLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsImV4cCI6MTY2NjY0ODMxMCwiaWF0IjoxNjY2NjQ4MjUwLCJpc3MiOiJodHRwczovL2NsZXJrLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsIm5iZiI6MTY2NjY0ODI0MCwic2lkIjoic2Vzc18yR2JEQjRlbk5kQ2E1dlMxenBDM1h6Zzl0SzkiLCJzdWIiOiJ1c2VyXzJHSXBYT0VwVnlKdzUxcmtabjlLbW5jNlN4ciJ9.n1Usc-DLDftqA0Xb-_2w8IGs4yjCmwc5RngwbSRvwevuZOIuRoeHmE2sgCdEvjfJEa7ewL6EVGVcM557TWPW--g_J1XQPwBy8tXfz7-S73CEuyRFiR97L2AHRdvRtvGtwR-o6l8aHaFxtlmfWbQXfg4kFJz2UGe9afmh3U9-f_4JOZ5fa3mI98UMy1-bo20vjXeWQ9aGrqaxHQxjnzzC-1Kpi5LdPvhQ16H0dPB8MHRTSM5TAuLKTpPV7wqixmbtcc2-0k6b9FKYZNqRVTaIyV-lifZloBvdzlfOF8nW1VVH_fx-iW5Q3hovHFcJIULHEC1kcAYTubbxzpgeVQepGg';

type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };
export type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };

type WithUserParams = Omit<
 Partial<UserJSON>,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/Gate.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
import type { IsAuthorized, OrganizationPermission } from '@clerk/types';
import type { IsAuthorized } from '@clerk/types';
import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
import React, { useEffect } from 'react';

import { useCoreSession } from '../contexts';
import { useFetch } from '../hooks';
import { useRouter } from '../router';

type GateParams = Omit<Parameters<IsAuthorized>[0], 'permission'> & { permission: OrganizationPermission };
type GateParams = Parameters<IsAuthorized>[0];
type GateProps = PropsWithChildren<
 GateParams & {
 fallback?: ReactNode;
Expand Down

89 changes: 66 additions & 23 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
import type { GetDomainsParams, OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
import type { OrganizationDomainVerificationStatus } from '@clerk/types';
import React, { useMemo } from 'react';

import { withGate } from '../../common';
import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
import { useGate, withGate } from '../../common';
import { useCoreOrganization } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import { Box, Col, localizationKeys, Spinner } from '../../customizables';
import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
import { useInView } from '../../hooks';
Expand All@@ -17,10 +19,61 @@ type DomainListProps = GetDomainsParams & {
 * Enables internal links to navigate to the correct page
 * based on when this component is used
 */
 redirectSubPath: string;
 redirectSubPath: 'organization-settings/domain' | 'domain';
 fallback?: React.ReactNode;
};

const useDomainList = () => {
 const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
Comment thread
SokratisVidros marked this conversation as resolved.

 const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });

 return {
 showDotMenu: canDeleteDomain || canVerifyDomain,
 canVerifyDomain,
 canDeleteDomain,
 };
};

const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
 trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));

const useMenuActions = (
 parentPath: string,
 domainId: string,
): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
 const { canDeleteDomain, canVerifyDomain } = useDomainList();
 const { navigate } = useRouter();

 const menuActions = [];

 if (canVerifyDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
 });
 }

 if (canDeleteDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
 isDestructive: true,
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
 });
 }

 return menuActions;
};

const DomainListDotMenu = ({
 redirectSubPath,
 domainId,
}: Pick<DomainListProps, 'redirectSubPath'> & {
 domainId: OrganizationDomainResource['id'];
}) => {
 const actions = useMenuActions(redirectSubPath, domainId);
 return <ThreeDotsMenu actions={actions} />;
};

export const DomainList = withGate(
 (props: DomainListProps) => {
 const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
Expand All@@ -31,6 +84,7 @@ export const DomainList = withGate(
 },
 });

 const { showDotMenu } = useDomainList();
 const { ref } = useInView({
 threshold: 0,
 onChange: inView => {
Expand DownExpand Up@@ -69,7 +123,7 @@ export const DomainList = withGate(
 <Col>
 {domainList.length === 0 && !domains?.isLoading && fallback}
 {domainList.map(d => {
 if (!(d.verification && d.verification.status === 'verified')) {
 if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
 return (
 <BlockWithTrailingComponent
 key={d.id}
Expand All@@ -82,23 +136,12 @@ export const DomainList = withGate(
 })}
 badge={<EnrollmentBadge organizationDomain={d} />}
 trailingComponent={
 <ThreeDotsMenu
 actions={[
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
 ),
 onClick: () => navigate(`${redirectSubPath}${d.id}/verify`),
 },
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
 ),
 isDestructive: true,
 onClick: () => navigate(`${redirectSubPath}${d.id}/remove`),
 },
 ]}
 />
 showDotMenu ? (
@SokratisVidrosSokratisVidrosOct 17, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 showDotMeny && <JSX/>
@panteliselefpanteliselefOct 18, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tried that, seems like trailingComponent does not accept null, I didn't want to mess with the signature of the component.
@SokratisVidrosSokratisVidrosOct 25, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we update its types?
@panteliselefpanteliselefOct 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following has type of  false | EmotionJSX.Element | null
showDotMenu&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
So i would have to do
(showDotMenu||null)&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
Which i'm not convinced it is better
@SokratisVidrosSokratisVidrosOct 31, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand what you are talking about. Is this the type?
@panteliselefpanteliselefOct 31, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the TS error
image
 <DomainListDotMenu
 redirectSubPath={redirectSubPath}
 domainId={d.id}
 />
 ) : undefined
 }
 >
 {d.name}
Expand All@@ -116,7 +159,7 @@ export const DomainList = withGate(
 padding: `${t.space.$3} ${t.space.$4}`,
 minHeight: t.sizes.$10,
 })}
 onClick={() => navigate(`${redirectSubPath}${d.id}`)}
 onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
 >
 {d.name}
 </ArrowBlockButton>
Expand DownExpand Up@@ -154,6 +197,6 @@ export const DomainList = withGate(
 );
 },
 {
 permission: 'org:sys_domains:manage',
 permission: 'org:sys_domains:read',
 },
);

2 changes: 1 addition & 1 deletion
...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const OrganizationMembersTabInvitations = () => {
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_invitation'}
 />
Expand Down

82 changes: 45 additions & 37 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { BlockButton } from '../../common';
import { useOrganizationProfileContext } from '../../contexts';
import { BlockButton, Gate } from '../../common';
import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
import { Col, Flex, localizationKeys } from '../../customizables';
import { Header } from '../../elements';
import { useRouter } from '../../router';
Expand All@@ -8,10 +8,13 @@ import { MembershipWidget } from './MembershipWidget';
import { RequestToJoinList } from './RequestToJoinList';

export const OrganizationMembersTabRequests = () => {
 const { organizationSettings } = useEnvironment();
 const { navigate } = useRouter();
 //@ts-expect-error
 const { __unstable_manageBillingUrl } = useOrganizationProfileContext();

 const isDomainsEnabled = organizationSettings?.domains?.enabled;

 return (
 <Col
 gap={8}
Expand All@@ -20,42 +23,47 @@ export const OrganizationMembersTabRequests = () => {
 }}
 >
 {__unstable_manageBillingUrl && <MembershipWidget />}
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}

 {isDomainsEnabled && (
 <Gate permission='org:sys_domains:manage'>
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 </Col>
 </Col>
 </Gate>
 )}

 <Flex
 direction='col'
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
 </Route>
 <Route path=':id'>
 <Gate
permission={'org:sys_domains:manage'}
any={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
 redirectTo='../../'
 >
 <VerifiedDomainPage />
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export const OrganizationSettings = () => {
 <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
 </Header.Root>
 <OrganizationProfileSection />
 <Gate permission='org:sys_domains:manage'>
 <Gate permission='org:sys_domains:read'>
 <OrganizationDomainsSection />
 </Gate>
 <OrganizationDangerSection />
Expand DownExpand Up@@ -85,7 +85,7 @@ const OrganizationDomainsSection = () => {
 subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
 id='organizationDomains'
 >
 <DomainList redirectSubPath={'domain/'} />
 <DomainList redirectSubPath={'domain'} />

 <AddBlockButton
 textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896

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

 Merged

panteliselef
merged 9 commits into

from

Oct 31, 2023
 Merged


feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI
#1896
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
74a2cbe

fix(clerk-js): Correct initial ref value for form feedback (#1933)


desiprisg Oct 25, 2023
28ec80d

chore(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
c5622fb

test(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
8fb7cd2

chore(clerk-js): Add changeset


panteliselef Oct 17, 2023
b4eb751

chore(clerk-js): UseDomainList


panteliselef Oct 17, 2023
c3092fd

feat(clerk-js): Session.isAuthorized now support the `any` parameter


panteliselef Oct 17, 2023
d8acfa8

chore(clerk-js): Improve relative url creation in DomainList


panteliselef Oct 18, 2023
01f9db6

test(clerk-js): Test cases for trimLeadingSlash


panteliselef Oct 18, 2023
9a375d9

chore(clerk-js): Address Pr comments


panteliselef Oct 25, 2023

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: 6 additions & 0 deletions
.changeset/curly-news-push.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Shows list of domains if member has the `org:sys_domain:read` permission.

2 changes: 2 additions & 0 deletions
.changeset/odd-lemons-reply.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

19 changes: 17 additions & 2 deletions
packages/clerk-js/src/core/resources/Session.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export class Session extends BaseResource implements SessionResource {
 * @experimental The method is experimental and subject to change in future releases.
 */
 isAuthorized: IsAuthorized = async params => {
 return new Promise(resolve => {
 return new Promise((resolve, reject) => {
 // if there is no active organization user can not be authorized
 if (!this.lastActiveOrganizationId || !this.user) {
 return resolve(false);
Expand All@@ -106,7 +106,22 @@ export class Session extends BaseResource implements SessionResource {
 if (params.role) {
 return resolve(activeOrganizationRole === params.role);
 }
 return resolve(false);

 if (params.any) {
 return resolve(
 !!params.any.find(permObj => {
 if (permObj.permission) {
 return activeOrganizationPermissions.includes(permObj.permission);
 }
 if (permObj.role) {
 return activeOrganizationRole === permObj.role;
 }
 return false;
 }),
 );
 }

 return reject();
 });
 };

Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/test/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ import type {
export const mockJwt =
 'eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yR0lvUWhiVXB5MGhYN0IyY1ZrdVRNaW5Yb0QiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovL2FjY291bnRzLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsImV4cCI6MTY2NjY0ODMxMCwiaWF0IjoxNjY2NjQ4MjUwLCJpc3MiOiJodHRwczovL2NsZXJrLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsIm5iZiI6MTY2NjY0ODI0MCwic2lkIjoic2Vzc18yR2JEQjRlbk5kQ2E1dlMxenBDM1h6Zzl0SzkiLCJzdWIiOiJ1c2VyXzJHSXBYT0VwVnlKdzUxcmtabjlLbW5jNlN4ciJ9.n1Usc-DLDftqA0Xb-_2w8IGs4yjCmwc5RngwbSRvwevuZOIuRoeHmE2sgCdEvjfJEa7ewL6EVGVcM557TWPW--g_J1XQPwBy8tXfz7-S73CEuyRFiR97L2AHRdvRtvGtwR-o6l8aHaFxtlmfWbQXfg4kFJz2UGe9afmh3U9-f_4JOZ5fa3mI98UMy1-bo20vjXeWQ9aGrqaxHQxjnzzC-1Kpi5LdPvhQ16H0dPB8MHRTSM5TAuLKTpPV7wqixmbtcc2-0k6b9FKYZNqRVTaIyV-lifZloBvdzlfOF8nW1VVH_fx-iW5Q3hovHFcJIULHEC1kcAYTubbxzpgeVQepGg';

type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };
export type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };

type WithUserParams = Omit<
 Partial<UserJSON>,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/Gate.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
import type { IsAuthorized, OrganizationPermission } from '@clerk/types';
import type { IsAuthorized } from '@clerk/types';
import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
import React, { useEffect } from 'react';

import { useCoreSession } from '../contexts';
import { useFetch } from '../hooks';
import { useRouter } from '../router';

type GateParams = Omit<Parameters<IsAuthorized>[0], 'permission'> & { permission: OrganizationPermission };
type GateParams = Parameters<IsAuthorized>[0];
type GateProps = PropsWithChildren<
 GateParams & {
 fallback?: ReactNode;
Expand Down

89 changes: 66 additions & 23 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
import type { GetDomainsParams, OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
import type { OrganizationDomainVerificationStatus } from '@clerk/types';
import React, { useMemo } from 'react';

import { withGate } from '../../common';
import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
import { useGate, withGate } from '../../common';
import { useCoreOrganization } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import { Box, Col, localizationKeys, Spinner } from '../../customizables';
import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
import { useInView } from '../../hooks';
Expand All@@ -17,10 +19,61 @@ type DomainListProps = GetDomainsParams & {
 * Enables internal links to navigate to the correct page
 * based on when this component is used
 */
 redirectSubPath: string;
 redirectSubPath: 'organization-settings/domain' | 'domain';
 fallback?: React.ReactNode;
};

const useDomainList = () => {
 const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
Comment thread
SokratisVidros marked this conversation as resolved.

 const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });

 return {
 showDotMenu: canDeleteDomain || canVerifyDomain,
 canVerifyDomain,
 canDeleteDomain,
 };
};

const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
 trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));

const useMenuActions = (
 parentPath: string,
 domainId: string,
): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
 const { canDeleteDomain, canVerifyDomain } = useDomainList();
 const { navigate } = useRouter();

 const menuActions = [];

 if (canVerifyDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
 });
 }

 if (canDeleteDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
 isDestructive: true,
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
 });
 }

 return menuActions;
};

const DomainListDotMenu = ({
 redirectSubPath,
 domainId,
}: Pick<DomainListProps, 'redirectSubPath'> & {
 domainId: OrganizationDomainResource['id'];
}) => {
 const actions = useMenuActions(redirectSubPath, domainId);
 return <ThreeDotsMenu actions={actions} />;
};

export const DomainList = withGate(
 (props: DomainListProps) => {
 const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
Expand All@@ -31,6 +84,7 @@ export const DomainList = withGate(
 },
 });

 const { showDotMenu } = useDomainList();
 const { ref } = useInView({
 threshold: 0,
 onChange: inView => {
Expand DownExpand Up@@ -69,7 +123,7 @@ export const DomainList = withGate(
 <Col>
 {domainList.length === 0 && !domains?.isLoading && fallback}
 {domainList.map(d => {
 if (!(d.verification && d.verification.status === 'verified')) {
 if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
 return (
 <BlockWithTrailingComponent
 key={d.id}
Expand All@@ -82,23 +136,12 @@ export const DomainList = withGate(
 })}
 badge={<EnrollmentBadge organizationDomain={d} />}
 trailingComponent={
 <ThreeDotsMenu
 actions={[
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
 ),
 onClick: () => navigate(`${redirectSubPath}${d.id}/verify`),
 },
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
 ),
 isDestructive: true,
 onClick: () => navigate(`${redirectSubPath}${d.id}/remove`),
 },
 ]}
 />
 showDotMenu ? (
@SokratisVidrosSokratisVidrosOct 17, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 showDotMeny && <JSX/>
@panteliselefpanteliselefOct 18, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tried that, seems like trailingComponent does not accept null, I didn't want to mess with the signature of the component.
@SokratisVidrosSokratisVidrosOct 25, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we update its types?
@panteliselefpanteliselefOct 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following has type of  false | EmotionJSX.Element | null
showDotMenu&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
So i would have to do
(showDotMenu||null)&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
Which i'm not convinced it is better
@SokratisVidrosSokratisVidrosOct 31, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand what you are talking about. Is this the type?
@panteliselefpanteliselefOct 31, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the TS error
image
 <DomainListDotMenu
 redirectSubPath={redirectSubPath}
 domainId={d.id}
 />
 ) : undefined
 }
 >
 {d.name}
Expand All@@ -116,7 +159,7 @@ export const DomainList = withGate(
 padding: `${t.space.$3} ${t.space.$4}`,
 minHeight: t.sizes.$10,
 })}
 onClick={() => navigate(`${redirectSubPath}${d.id}`)}
 onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
 >
 {d.name}
 </ArrowBlockButton>
Expand DownExpand Up@@ -154,6 +197,6 @@ export const DomainList = withGate(
 );
 },
 {
 permission: 'org:sys_domains:manage',
 permission: 'org:sys_domains:read',
 },
);

2 changes: 1 addition & 1 deletion
...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const OrganizationMembersTabInvitations = () => {
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_invitation'}
 />
Expand Down

82 changes: 45 additions & 37 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { BlockButton } from '../../common';
import { useOrganizationProfileContext } from '../../contexts';
import { BlockButton, Gate } from '../../common';
import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
import { Col, Flex, localizationKeys } from '../../customizables';
import { Header } from '../../elements';
import { useRouter } from '../../router';
Expand All@@ -8,10 +8,13 @@ import { MembershipWidget } from './MembershipWidget';
import { RequestToJoinList } from './RequestToJoinList';

export const OrganizationMembersTabRequests = () => {
 const { organizationSettings } = useEnvironment();
 const { navigate } = useRouter();
 //@ts-expect-error
 const { __unstable_manageBillingUrl } = useOrganizationProfileContext();

 const isDomainsEnabled = organizationSettings?.domains?.enabled;

 return (
 <Col
 gap={8}
Expand All@@ -20,42 +23,47 @@ export const OrganizationMembersTabRequests = () => {
 }}
 >
 {__unstable_manageBillingUrl && <MembershipWidget />}
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}

 {isDomainsEnabled && (
 <Gate permission='org:sys_domains:manage'>
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 </Col>
 </Col>
 </Gate>
 )}

 <Flex
 direction='col'
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
 </Route>
 <Route path=':id'>
 <Gate
permission={'org:sys_domains:manage'}
any={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
 redirectTo='../../'
 >
 <VerifiedDomainPage />
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export const OrganizationSettings = () => {
 <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
 </Header.Root>
 <OrganizationProfileSection />
 <Gate permission='org:sys_domains:manage'>
 <Gate permission='org:sys_domains:read'>
 <OrganizationDomainsSection />
 </Gate>
 <OrganizationDangerSection />
Expand DownExpand Up@@ -85,7 +85,7 @@ const OrganizationDomainsSection = () => {
 subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
 id='organizationDomains'
 >
 <DomainList redirectSubPath={'domain/'} />
 <DomainList redirectSubPath={'domain'} />

 <AddBlockButton
 textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896

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

 Merged

panteliselef
merged 9 commits into

from

Oct 31, 2023
 Merged


feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI
#1896
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
74a2cbe

fix(clerk-js): Correct initial ref value for form feedback (#1933)


desiprisg Oct 25, 2023
28ec80d

chore(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
c5622fb

test(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
8fb7cd2

chore(clerk-js): Add changeset


panteliselef Oct 17, 2023
b4eb751

chore(clerk-js): UseDomainList


panteliselef Oct 17, 2023
c3092fd

feat(clerk-js): Session.isAuthorized now support the `any` parameter


panteliselef Oct 17, 2023
d8acfa8

chore(clerk-js): Improve relative url creation in DomainList


panteliselef Oct 18, 2023
01f9db6

test(clerk-js): Test cases for trimLeadingSlash


panteliselef Oct 18, 2023
9a375d9

chore(clerk-js): Address Pr comments


panteliselef Oct 25, 2023

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: 6 additions & 0 deletions
.changeset/curly-news-push.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Shows list of domains if member has the `org:sys_domain:read` permission.

2 changes: 2 additions & 0 deletions
.changeset/odd-lemons-reply.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

19 changes: 17 additions & 2 deletions
packages/clerk-js/src/core/resources/Session.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export class Session extends BaseResource implements SessionResource {
 * @experimental The method is experimental and subject to change in future releases.
 */
 isAuthorized: IsAuthorized = async params => {
 return new Promise(resolve => {
 return new Promise((resolve, reject) => {
 // if there is no active organization user can not be authorized
 if (!this.lastActiveOrganizationId || !this.user) {
 return resolve(false);
Expand All@@ -106,7 +106,22 @@ export class Session extends BaseResource implements SessionResource {
 if (params.role) {
 return resolve(activeOrganizationRole === params.role);
 }
 return resolve(false);

 if (params.any) {
 return resolve(
 !!params.any.find(permObj => {
 if (permObj.permission) {
 return activeOrganizationPermissions.includes(permObj.permission);
 }
 if (permObj.role) {
 return activeOrganizationRole === permObj.role;
 }
 return false;
 }),
 );
 }

 return reject();
 });
 };

Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/test/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ import type {
export const mockJwt =
 'eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yR0lvUWhiVXB5MGhYN0IyY1ZrdVRNaW5Yb0QiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovL2FjY291bnRzLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsImV4cCI6MTY2NjY0ODMxMCwiaWF0IjoxNjY2NjQ4MjUwLCJpc3MiOiJodHRwczovL2NsZXJrLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsIm5iZiI6MTY2NjY0ODI0MCwic2lkIjoic2Vzc18yR2JEQjRlbk5kQ2E1dlMxenBDM1h6Zzl0SzkiLCJzdWIiOiJ1c2VyXzJHSXBYT0VwVnlKdzUxcmtabjlLbW5jNlN4ciJ9.n1Usc-DLDftqA0Xb-_2w8IGs4yjCmwc5RngwbSRvwevuZOIuRoeHmE2sgCdEvjfJEa7ewL6EVGVcM557TWPW--g_J1XQPwBy8tXfz7-S73CEuyRFiR97L2AHRdvRtvGtwR-o6l8aHaFxtlmfWbQXfg4kFJz2UGe9afmh3U9-f_4JOZ5fa3mI98UMy1-bo20vjXeWQ9aGrqaxHQxjnzzC-1Kpi5LdPvhQ16H0dPB8MHRTSM5TAuLKTpPV7wqixmbtcc2-0k6b9FKYZNqRVTaIyV-lifZloBvdzlfOF8nW1VVH_fx-iW5Q3hovHFcJIULHEC1kcAYTubbxzpgeVQepGg';

type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };
export type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };

type WithUserParams = Omit<
 Partial<UserJSON>,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/Gate.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
import type { IsAuthorized, OrganizationPermission } from '@clerk/types';
import type { IsAuthorized } from '@clerk/types';
import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
import React, { useEffect } from 'react';

import { useCoreSession } from '../contexts';
import { useFetch } from '../hooks';
import { useRouter } from '../router';

type GateParams = Omit<Parameters<IsAuthorized>[0], 'permission'> & { permission: OrganizationPermission };
type GateParams = Parameters<IsAuthorized>[0];
type GateProps = PropsWithChildren<
 GateParams & {
 fallback?: ReactNode;
Expand Down

89 changes: 66 additions & 23 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
import type { GetDomainsParams, OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
import type { OrganizationDomainVerificationStatus } from '@clerk/types';
import React, { useMemo } from 'react';

import { withGate } from '../../common';
import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
import { useGate, withGate } from '../../common';
import { useCoreOrganization } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import { Box, Col, localizationKeys, Spinner } from '../../customizables';
import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
import { useInView } from '../../hooks';
Expand All@@ -17,10 +19,61 @@ type DomainListProps = GetDomainsParams & {
 * Enables internal links to navigate to the correct page
 * based on when this component is used
 */
 redirectSubPath: string;
 redirectSubPath: 'organization-settings/domain' | 'domain';
 fallback?: React.ReactNode;
};

const useDomainList = () => {
 const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
Comment thread
SokratisVidros marked this conversation as resolved.

 const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });

 return {
 showDotMenu: canDeleteDomain || canVerifyDomain,
 canVerifyDomain,
 canDeleteDomain,
 };
};

const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
 trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));

const useMenuActions = (
 parentPath: string,
 domainId: string,
): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
 const { canDeleteDomain, canVerifyDomain } = useDomainList();
 const { navigate } = useRouter();

 const menuActions = [];

 if (canVerifyDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
 });
 }

 if (canDeleteDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
 isDestructive: true,
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
 });
 }

 return menuActions;
};

const DomainListDotMenu = ({
 redirectSubPath,
 domainId,
}: Pick<DomainListProps, 'redirectSubPath'> & {
 domainId: OrganizationDomainResource['id'];
}) => {
 const actions = useMenuActions(redirectSubPath, domainId);
 return <ThreeDotsMenu actions={actions} />;
};

export const DomainList = withGate(
 (props: DomainListProps) => {
 const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
Expand All@@ -31,6 +84,7 @@ export const DomainList = withGate(
 },
 });

 const { showDotMenu } = useDomainList();
 const { ref } = useInView({
 threshold: 0,
 onChange: inView => {
Expand DownExpand Up@@ -69,7 +123,7 @@ export const DomainList = withGate(
 <Col>
 {domainList.length === 0 && !domains?.isLoading && fallback}
 {domainList.map(d => {
 if (!(d.verification && d.verification.status === 'verified')) {
 if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
 return (
 <BlockWithTrailingComponent
 key={d.id}
Expand All@@ -82,23 +136,12 @@ export const DomainList = withGate(
 })}
 badge={<EnrollmentBadge organizationDomain={d} />}
 trailingComponent={
 <ThreeDotsMenu
 actions={[
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
 ),
 onClick: () => navigate(`${redirectSubPath}${d.id}/verify`),
 },
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
 ),
 isDestructive: true,
 onClick: () => navigate(`${redirectSubPath}${d.id}/remove`),
 },
 ]}
 />
 showDotMenu ? (
@SokratisVidrosSokratisVidrosOct 17, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 showDotMeny && <JSX/>
@panteliselefpanteliselefOct 18, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tried that, seems like trailingComponent does not accept null, I didn't want to mess with the signature of the component.
@SokratisVidrosSokratisVidrosOct 25, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we update its types?
@panteliselefpanteliselefOct 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following has type of  false | EmotionJSX.Element | null
showDotMenu&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
So i would have to do
(showDotMenu||null)&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
Which i'm not convinced it is better
@SokratisVidrosSokratisVidrosOct 31, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand what you are talking about. Is this the type?
@panteliselefpanteliselefOct 31, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the TS error
image
 <DomainListDotMenu
 redirectSubPath={redirectSubPath}
 domainId={d.id}
 />
 ) : undefined
 }
 >
 {d.name}
Expand All@@ -116,7 +159,7 @@ export const DomainList = withGate(
 padding: `${t.space.$3} ${t.space.$4}`,
 minHeight: t.sizes.$10,
 })}
 onClick={() => navigate(`${redirectSubPath}${d.id}`)}
 onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
 >
 {d.name}
 </ArrowBlockButton>
Expand DownExpand Up@@ -154,6 +197,6 @@ export const DomainList = withGate(
 );
 },
 {
 permission: 'org:sys_domains:manage',
 permission: 'org:sys_domains:read',
 },
);

2 changes: 1 addition & 1 deletion
...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const OrganizationMembersTabInvitations = () => {
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_invitation'}
 />
Expand Down

82 changes: 45 additions & 37 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { BlockButton } from '../../common';
import { useOrganizationProfileContext } from '../../contexts';
import { BlockButton, Gate } from '../../common';
import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
import { Col, Flex, localizationKeys } from '../../customizables';
import { Header } from '../../elements';
import { useRouter } from '../../router';
Expand All@@ -8,10 +8,13 @@ import { MembershipWidget } from './MembershipWidget';
import { RequestToJoinList } from './RequestToJoinList';

export const OrganizationMembersTabRequests = () => {
 const { organizationSettings } = useEnvironment();
 const { navigate } = useRouter();
 //@ts-expect-error
 const { __unstable_manageBillingUrl } = useOrganizationProfileContext();

 const isDomainsEnabled = organizationSettings?.domains?.enabled;

 return (
 <Col
 gap={8}
Expand All@@ -20,42 +23,47 @@ export const OrganizationMembersTabRequests = () => {
 }}
 >
 {__unstable_manageBillingUrl && <MembershipWidget />}
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}

 {isDomainsEnabled && (
 <Gate permission='org:sys_domains:manage'>
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 </Col>
 </Col>
 </Gate>
 )}

 <Flex
 direction='col'
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
 </Route>
 <Route path=':id'>
 <Gate
permission={'org:sys_domains:manage'}
any={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
 redirectTo='../../'
 >
 <VerifiedDomainPage />
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export const OrganizationSettings = () => {
 <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
 </Header.Root>
 <OrganizationProfileSection />
 <Gate permission='org:sys_domains:manage'>
 <Gate permission='org:sys_domains:read'>
 <OrganizationDomainsSection />
 </Gate>
 <OrganizationDangerSection />
Expand DownExpand Up@@ -85,7 +85,7 @@ const OrganizationDomainsSection = () => {
 subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
 id='organizationDomains'
 >
 <DomainList redirectSubPath={'domain/'} />
 <DomainList redirectSubPath={'domain'} />

 <AddBlockButton
 textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896

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

 Merged

panteliselef
merged 9 commits into

from

Oct 31, 2023
 Merged


feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI
#1896
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
74a2cbe

fix(clerk-js): Correct initial ref value for form feedback (#1933)


desiprisg Oct 25, 2023
28ec80d

chore(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
c5622fb

test(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
8fb7cd2

chore(clerk-js): Add changeset


panteliselef Oct 17, 2023
b4eb751

chore(clerk-js): UseDomainList


panteliselef Oct 17, 2023
c3092fd

feat(clerk-js): Session.isAuthorized now support the `any` parameter


panteliselef Oct 17, 2023
d8acfa8

chore(clerk-js): Improve relative url creation in DomainList


panteliselef Oct 18, 2023
01f9db6

test(clerk-js): Test cases for trimLeadingSlash


panteliselef Oct 18, 2023
9a375d9

chore(clerk-js): Address Pr comments


panteliselef Oct 25, 2023

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: 6 additions & 0 deletions
.changeset/curly-news-push.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Shows list of domains if member has the `org:sys_domain:read` permission.

2 changes: 2 additions & 0 deletions
.changeset/odd-lemons-reply.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

19 changes: 17 additions & 2 deletions
packages/clerk-js/src/core/resources/Session.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export class Session extends BaseResource implements SessionResource {
 * @experimental The method is experimental and subject to change in future releases.
 */
 isAuthorized: IsAuthorized = async params => {
 return new Promise(resolve => {
 return new Promise((resolve, reject) => {
 // if there is no active organization user can not be authorized
 if (!this.lastActiveOrganizationId || !this.user) {
 return resolve(false);
Expand All@@ -106,7 +106,22 @@ export class Session extends BaseResource implements SessionResource {
 if (params.role) {
 return resolve(activeOrganizationRole === params.role);
 }
 return resolve(false);

 if (params.any) {
 return resolve(
 !!params.any.find(permObj => {
 if (permObj.permission) {
 return activeOrganizationPermissions.includes(permObj.permission);
 }
 if (permObj.role) {
 return activeOrganizationRole === permObj.role;
 }
 return false;
 }),
 );
 }

 return reject();
 });
 };

Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/test/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ import type {
export const mockJwt =
 'eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yR0lvUWhiVXB5MGhYN0IyY1ZrdVRNaW5Yb0QiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovL2FjY291bnRzLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsImV4cCI6MTY2NjY0ODMxMCwiaWF0IjoxNjY2NjQ4MjUwLCJpc3MiOiJodHRwczovL2NsZXJrLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsIm5iZiI6MTY2NjY0ODI0MCwic2lkIjoic2Vzc18yR2JEQjRlbk5kQ2E1dlMxenBDM1h6Zzl0SzkiLCJzdWIiOiJ1c2VyXzJHSXBYT0VwVnlKdzUxcmtabjlLbW5jNlN4ciJ9.n1Usc-DLDftqA0Xb-_2w8IGs4yjCmwc5RngwbSRvwevuZOIuRoeHmE2sgCdEvjfJEa7ewL6EVGVcM557TWPW--g_J1XQPwBy8tXfz7-S73CEuyRFiR97L2AHRdvRtvGtwR-o6l8aHaFxtlmfWbQXfg4kFJz2UGe9afmh3U9-f_4JOZ5fa3mI98UMy1-bo20vjXeWQ9aGrqaxHQxjnzzC-1Kpi5LdPvhQ16H0dPB8MHRTSM5TAuLKTpPV7wqixmbtcc2-0k6b9FKYZNqRVTaIyV-lifZloBvdzlfOF8nW1VVH_fx-iW5Q3hovHFcJIULHEC1kcAYTubbxzpgeVQepGg';

type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };
export type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };

type WithUserParams = Omit<
 Partial<UserJSON>,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/Gate.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
import type { IsAuthorized, OrganizationPermission } from '@clerk/types';
import type { IsAuthorized } from '@clerk/types';
import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
import React, { useEffect } from 'react';

import { useCoreSession } from '../contexts';
import { useFetch } from '../hooks';
import { useRouter } from '../router';

type GateParams = Omit<Parameters<IsAuthorized>[0], 'permission'> & { permission: OrganizationPermission };
type GateParams = Parameters<IsAuthorized>[0];
type GateProps = PropsWithChildren<
 GateParams & {
 fallback?: ReactNode;
Expand Down

89 changes: 66 additions & 23 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
import type { GetDomainsParams, OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
import type { OrganizationDomainVerificationStatus } from '@clerk/types';
import React, { useMemo } from 'react';

import { withGate } from '../../common';
import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
import { useGate, withGate } from '../../common';
import { useCoreOrganization } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import { Box, Col, localizationKeys, Spinner } from '../../customizables';
import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
import { useInView } from '../../hooks';
Expand All@@ -17,10 +19,61 @@ type DomainListProps = GetDomainsParams & {
 * Enables internal links to navigate to the correct page
 * based on when this component is used
 */
 redirectSubPath: string;
 redirectSubPath: 'organization-settings/domain' | 'domain';
 fallback?: React.ReactNode;
};

const useDomainList = () => {
 const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
Comment thread
SokratisVidros marked this conversation as resolved.

 const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });

 return {
 showDotMenu: canDeleteDomain || canVerifyDomain,
 canVerifyDomain,
 canDeleteDomain,
 };
};

const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
 trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));

const useMenuActions = (
 parentPath: string,
 domainId: string,
): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
 const { canDeleteDomain, canVerifyDomain } = useDomainList();
 const { navigate } = useRouter();

 const menuActions = [];

 if (canVerifyDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
 });
 }

 if (canDeleteDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
 isDestructive: true,
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
 });
 }

 return menuActions;
};

const DomainListDotMenu = ({
 redirectSubPath,
 domainId,
}: Pick<DomainListProps, 'redirectSubPath'> & {
 domainId: OrganizationDomainResource['id'];
}) => {
 const actions = useMenuActions(redirectSubPath, domainId);
 return <ThreeDotsMenu actions={actions} />;
};

export const DomainList = withGate(
 (props: DomainListProps) => {
 const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
Expand All@@ -31,6 +84,7 @@ export const DomainList = withGate(
 },
 });

 const { showDotMenu } = useDomainList();
 const { ref } = useInView({
 threshold: 0,
 onChange: inView => {
Expand DownExpand Up@@ -69,7 +123,7 @@ export const DomainList = withGate(
 <Col>
 {domainList.length === 0 && !domains?.isLoading && fallback}
 {domainList.map(d => {
 if (!(d.verification && d.verification.status === 'verified')) {
 if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
 return (
 <BlockWithTrailingComponent
 key={d.id}
Expand All@@ -82,23 +136,12 @@ export const DomainList = withGate(
 })}
 badge={<EnrollmentBadge organizationDomain={d} />}
 trailingComponent={
 <ThreeDotsMenu
 actions={[
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
 ),
 onClick: () => navigate(`${redirectSubPath}${d.id}/verify`),
 },
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
 ),
 isDestructive: true,
 onClick: () => navigate(`${redirectSubPath}${d.id}/remove`),
 },
 ]}
 />
 showDotMenu ? (
@SokratisVidrosSokratisVidrosOct 17, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 showDotMeny && <JSX/>
@panteliselefpanteliselefOct 18, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tried that, seems like trailingComponent does not accept null, I didn't want to mess with the signature of the component.
@SokratisVidrosSokratisVidrosOct 25, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we update its types?
@panteliselefpanteliselefOct 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following has type of  false | EmotionJSX.Element | null
showDotMenu&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
So i would have to do
(showDotMenu||null)&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
Which i'm not convinced it is better
@SokratisVidrosSokratisVidrosOct 31, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand what you are talking about. Is this the type?
@panteliselefpanteliselefOct 31, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the TS error
image
 <DomainListDotMenu
 redirectSubPath={redirectSubPath}
 domainId={d.id}
 />
 ) : undefined
 }
 >
 {d.name}
Expand All@@ -116,7 +159,7 @@ export const DomainList = withGate(
 padding: `${t.space.$3} ${t.space.$4}`,
 minHeight: t.sizes.$10,
 })}
 onClick={() => navigate(`${redirectSubPath}${d.id}`)}
 onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
 >
 {d.name}
 </ArrowBlockButton>
Expand DownExpand Up@@ -154,6 +197,6 @@ export const DomainList = withGate(
 );
 },
 {
 permission: 'org:sys_domains:manage',
 permission: 'org:sys_domains:read',
 },
);

2 changes: 1 addition & 1 deletion
...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const OrganizationMembersTabInvitations = () => {
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_invitation'}
 />
Expand Down

82 changes: 45 additions & 37 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { BlockButton } from '../../common';
import { useOrganizationProfileContext } from '../../contexts';
import { BlockButton, Gate } from '../../common';
import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
import { Col, Flex, localizationKeys } from '../../customizables';
import { Header } from '../../elements';
import { useRouter } from '../../router';
Expand All@@ -8,10 +8,13 @@ import { MembershipWidget } from './MembershipWidget';
import { RequestToJoinList } from './RequestToJoinList';

export const OrganizationMembersTabRequests = () => {
 const { organizationSettings } = useEnvironment();
 const { navigate } = useRouter();
 //@ts-expect-error
 const { __unstable_manageBillingUrl } = useOrganizationProfileContext();

 const isDomainsEnabled = organizationSettings?.domains?.enabled;

 return (
 <Col
 gap={8}
Expand All@@ -20,42 +23,47 @@ export const OrganizationMembersTabRequests = () => {
 }}
 >
 {__unstable_manageBillingUrl && <MembershipWidget />}
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}

 {isDomainsEnabled && (
 <Gate permission='org:sys_domains:manage'>
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 </Col>
 </Col>
 </Gate>
 )}

 <Flex
 direction='col'
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
 </Route>
 <Route path=':id'>
 <Gate
permission={'org:sys_domains:manage'}
any={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
 redirectTo='../../'
 >
 <VerifiedDomainPage />
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export const OrganizationSettings = () => {
 <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
 </Header.Root>
 <OrganizationProfileSection />
 <Gate permission='org:sys_domains:manage'>
 <Gate permission='org:sys_domains:read'>
 <OrganizationDomainsSection />
 </Gate>
 <OrganizationDangerSection />
Expand DownExpand Up@@ -85,7 +85,7 @@ const OrganizationDomainsSection = () => {
 subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
 id='organizationDomains'
 >
 <DomainList redirectSubPath={'domain/'} />
 <DomainList redirectSubPath={'domain'} />

 <AddBlockButton
 textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896

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

 Merged

panteliselef
merged 9 commits into

from

Oct 31, 2023
 Merged


feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI
#1896
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
74a2cbe

fix(clerk-js): Correct initial ref value for form feedback (#1933)


desiprisg Oct 25, 2023
28ec80d

chore(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
c5622fb

test(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
8fb7cd2

chore(clerk-js): Add changeset


panteliselef Oct 17, 2023
b4eb751

chore(clerk-js): UseDomainList


panteliselef Oct 17, 2023
c3092fd

feat(clerk-js): Session.isAuthorized now support the `any` parameter


panteliselef Oct 17, 2023
d8acfa8

chore(clerk-js): Improve relative url creation in DomainList


panteliselef Oct 18, 2023
01f9db6

test(clerk-js): Test cases for trimLeadingSlash


panteliselef Oct 18, 2023
9a375d9

chore(clerk-js): Address Pr comments


panteliselef Oct 25, 2023

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: 6 additions & 0 deletions
.changeset/curly-news-push.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Shows list of domains if member has the `org:sys_domain:read` permission.

2 changes: 2 additions & 0 deletions
.changeset/odd-lemons-reply.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

19 changes: 17 additions & 2 deletions
packages/clerk-js/src/core/resources/Session.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export class Session extends BaseResource implements SessionResource {
 * @experimental The method is experimental and subject to change in future releases.
 */
 isAuthorized: IsAuthorized = async params => {
 return new Promise(resolve => {
 return new Promise((resolve, reject) => {
 // if there is no active organization user can not be authorized
 if (!this.lastActiveOrganizationId || !this.user) {
 return resolve(false);
Expand All@@ -106,7 +106,22 @@ export class Session extends BaseResource implements SessionResource {
 if (params.role) {
 return resolve(activeOrganizationRole === params.role);
 }
 return resolve(false);

 if (params.any) {
 return resolve(
 !!params.any.find(permObj => {
 if (permObj.permission) {
 return activeOrganizationPermissions.includes(permObj.permission);
 }
 if (permObj.role) {
 return activeOrganizationRole === permObj.role;
 }
 return false;
 }),
 );
 }

 return reject();
 });
 };

Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/test/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ import type {
export const mockJwt =
 'eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yR0lvUWhiVXB5MGhYN0IyY1ZrdVRNaW5Yb0QiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovL2FjY291bnRzLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsImV4cCI6MTY2NjY0ODMxMCwiaWF0IjoxNjY2NjQ4MjUwLCJpc3MiOiJodHRwczovL2NsZXJrLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsIm5iZiI6MTY2NjY0ODI0MCwic2lkIjoic2Vzc18yR2JEQjRlbk5kQ2E1dlMxenBDM1h6Zzl0SzkiLCJzdWIiOiJ1c2VyXzJHSXBYT0VwVnlKdzUxcmtabjlLbW5jNlN4ciJ9.n1Usc-DLDftqA0Xb-_2w8IGs4yjCmwc5RngwbSRvwevuZOIuRoeHmE2sgCdEvjfJEa7ewL6EVGVcM557TWPW--g_J1XQPwBy8tXfz7-S73CEuyRFiR97L2AHRdvRtvGtwR-o6l8aHaFxtlmfWbQXfg4kFJz2UGe9afmh3U9-f_4JOZ5fa3mI98UMy1-bo20vjXeWQ9aGrqaxHQxjnzzC-1Kpi5LdPvhQ16H0dPB8MHRTSM5TAuLKTpPV7wqixmbtcc2-0k6b9FKYZNqRVTaIyV-lifZloBvdzlfOF8nW1VVH_fx-iW5Q3hovHFcJIULHEC1kcAYTubbxzpgeVQepGg';

type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };
export type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };

type WithUserParams = Omit<
 Partial<UserJSON>,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/Gate.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
import type { IsAuthorized, OrganizationPermission } from '@clerk/types';
import type { IsAuthorized } from '@clerk/types';
import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
import React, { useEffect } from 'react';

import { useCoreSession } from '../contexts';
import { useFetch } from '../hooks';
import { useRouter } from '../router';

type GateParams = Omit<Parameters<IsAuthorized>[0], 'permission'> & { permission: OrganizationPermission };
type GateParams = Parameters<IsAuthorized>[0];
type GateProps = PropsWithChildren<
 GateParams & {
 fallback?: ReactNode;
Expand Down

89 changes: 66 additions & 23 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
import type { GetDomainsParams, OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
import type { OrganizationDomainVerificationStatus } from '@clerk/types';
import React, { useMemo } from 'react';

import { withGate } from '../../common';
import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
import { useGate, withGate } from '../../common';
import { useCoreOrganization } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import { Box, Col, localizationKeys, Spinner } from '../../customizables';
import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
import { useInView } from '../../hooks';
Expand All@@ -17,10 +19,61 @@ type DomainListProps = GetDomainsParams & {
 * Enables internal links to navigate to the correct page
 * based on when this component is used
 */
 redirectSubPath: string;
 redirectSubPath: 'organization-settings/domain' | 'domain';
 fallback?: React.ReactNode;
};

const useDomainList = () => {
 const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
Comment thread
SokratisVidros marked this conversation as resolved.

 const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });

 return {
 showDotMenu: canDeleteDomain || canVerifyDomain,
 canVerifyDomain,
 canDeleteDomain,
 };
};

const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
 trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));

const useMenuActions = (
 parentPath: string,
 domainId: string,
): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
 const { canDeleteDomain, canVerifyDomain } = useDomainList();
 const { navigate } = useRouter();

 const menuActions = [];

 if (canVerifyDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
 });
 }

 if (canDeleteDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
 isDestructive: true,
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
 });
 }

 return menuActions;
};

const DomainListDotMenu = ({
 redirectSubPath,
 domainId,
}: Pick<DomainListProps, 'redirectSubPath'> & {
 domainId: OrganizationDomainResource['id'];
}) => {
 const actions = useMenuActions(redirectSubPath, domainId);
 return <ThreeDotsMenu actions={actions} />;
};

export const DomainList = withGate(
 (props: DomainListProps) => {
 const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
Expand All@@ -31,6 +84,7 @@ export const DomainList = withGate(
 },
 });

 const { showDotMenu } = useDomainList();
 const { ref } = useInView({
 threshold: 0,
 onChange: inView => {
Expand DownExpand Up@@ -69,7 +123,7 @@ export const DomainList = withGate(
 <Col>
 {domainList.length === 0 && !domains?.isLoading && fallback}
 {domainList.map(d => {
 if (!(d.verification && d.verification.status === 'verified')) {
 if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
 return (
 <BlockWithTrailingComponent
 key={d.id}
Expand All@@ -82,23 +136,12 @@ export const DomainList = withGate(
 })}
 badge={<EnrollmentBadge organizationDomain={d} />}
 trailingComponent={
 <ThreeDotsMenu
 actions={[
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
 ),
 onClick: () => navigate(`${redirectSubPath}${d.id}/verify`),
 },
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
 ),
 isDestructive: true,
 onClick: () => navigate(`${redirectSubPath}${d.id}/remove`),
 },
 ]}
 />
 showDotMenu ? (
@SokratisVidrosSokratisVidrosOct 17, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 showDotMeny && <JSX/>
@panteliselefpanteliselefOct 18, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tried that, seems like trailingComponent does not accept null, I didn't want to mess with the signature of the component.
@SokratisVidrosSokratisVidrosOct 25, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we update its types?
@panteliselefpanteliselefOct 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following has type of  false | EmotionJSX.Element | null
showDotMenu&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
So i would have to do
(showDotMenu||null)&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
Which i'm not convinced it is better
@SokratisVidrosSokratisVidrosOct 31, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand what you are talking about. Is this the type?
@panteliselefpanteliselefOct 31, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the TS error
image
 <DomainListDotMenu
 redirectSubPath={redirectSubPath}
 domainId={d.id}
 />
 ) : undefined
 }
 >
 {d.name}
Expand All@@ -116,7 +159,7 @@ export const DomainList = withGate(
 padding: `${t.space.$3} ${t.space.$4}`,
 minHeight: t.sizes.$10,
 })}
 onClick={() => navigate(`${redirectSubPath}${d.id}`)}
 onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
 >
 {d.name}
 </ArrowBlockButton>
Expand DownExpand Up@@ -154,6 +197,6 @@ export const DomainList = withGate(
 );
 },
 {
 permission: 'org:sys_domains:manage',
 permission: 'org:sys_domains:read',
 },
);

2 changes: 1 addition & 1 deletion
...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const OrganizationMembersTabInvitations = () => {
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_invitation'}
 />
Expand Down

82 changes: 45 additions & 37 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { BlockButton } from '../../common';
import { useOrganizationProfileContext } from '../../contexts';
import { BlockButton, Gate } from '../../common';
import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
import { Col, Flex, localizationKeys } from '../../customizables';
import { Header } from '../../elements';
import { useRouter } from '../../router';
Expand All@@ -8,10 +8,13 @@ import { MembershipWidget } from './MembershipWidget';
import { RequestToJoinList } from './RequestToJoinList';

export const OrganizationMembersTabRequests = () => {
 const { organizationSettings } = useEnvironment();
 const { navigate } = useRouter();
 //@ts-expect-error
 const { __unstable_manageBillingUrl } = useOrganizationProfileContext();

 const isDomainsEnabled = organizationSettings?.domains?.enabled;

 return (
 <Col
 gap={8}
Expand All@@ -20,42 +23,47 @@ export const OrganizationMembersTabRequests = () => {
 }}
 >
 {__unstable_manageBillingUrl && <MembershipWidget />}
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}

 {isDomainsEnabled && (
 <Gate permission='org:sys_domains:manage'>
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 </Col>
 </Col>
 </Gate>
 )}

 <Flex
 direction='col'
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
 </Route>
 <Route path=':id'>
 <Gate
permission={'org:sys_domains:manage'}
any={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
 redirectTo='../../'
 >
 <VerifiedDomainPage />
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export const OrganizationSettings = () => {
 <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
 </Header.Root>
 <OrganizationProfileSection />
 <Gate permission='org:sys_domains:manage'>
 <Gate permission='org:sys_domains:read'>
 <OrganizationDomainsSection />
 </Gate>
 <OrganizationDangerSection />
Expand DownExpand Up@@ -85,7 +85,7 @@ const OrganizationDomainsSection = () => {
 subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
 id='organizationDomains'
 >
 <DomainList redirectSubPath={'domain/'} />
 <DomainList redirectSubPath={'domain'} />

 <AddBlockButton
 textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896

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

 Merged

panteliselef
merged 9 commits into

from

Oct 31, 2023
 Merged


feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI
#1896
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
74a2cbe

fix(clerk-js): Correct initial ref value for form feedback (#1933)


desiprisg Oct 25, 2023
28ec80d

chore(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
c5622fb

test(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
8fb7cd2

chore(clerk-js): Add changeset


panteliselef Oct 17, 2023
b4eb751

chore(clerk-js): UseDomainList


panteliselef Oct 17, 2023
c3092fd

feat(clerk-js): Session.isAuthorized now support the `any` parameter


panteliselef Oct 17, 2023
d8acfa8

chore(clerk-js): Improve relative url creation in DomainList


panteliselef Oct 18, 2023
01f9db6

test(clerk-js): Test cases for trimLeadingSlash


panteliselef Oct 18, 2023
9a375d9

chore(clerk-js): Address Pr comments


panteliselef Oct 25, 2023

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: 6 additions & 0 deletions
.changeset/curly-news-push.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Shows list of domains if member has the `org:sys_domain:read` permission.

2 changes: 2 additions & 0 deletions
.changeset/odd-lemons-reply.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

19 changes: 17 additions & 2 deletions
packages/clerk-js/src/core/resources/Session.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export class Session extends BaseResource implements SessionResource {
 * @experimental The method is experimental and subject to change in future releases.
 */
 isAuthorized: IsAuthorized = async params => {
 return new Promise(resolve => {
 return new Promise((resolve, reject) => {
 // if there is no active organization user can not be authorized
 if (!this.lastActiveOrganizationId || !this.user) {
 return resolve(false);
Expand All@@ -106,7 +106,22 @@ export class Session extends BaseResource implements SessionResource {
 if (params.role) {
 return resolve(activeOrganizationRole === params.role);
 }
 return resolve(false);

 if (params.any) {
 return resolve(
 !!params.any.find(permObj => {
 if (permObj.permission) {
 return activeOrganizationPermissions.includes(permObj.permission);
 }
 if (permObj.role) {
 return activeOrganizationRole === permObj.role;
 }
 return false;
 }),
 );
 }

 return reject();
 });
 };

Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/test/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ import type {
export const mockJwt =
 'eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yR0lvUWhiVXB5MGhYN0IyY1ZrdVRNaW5Yb0QiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovL2FjY291bnRzLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsImV4cCI6MTY2NjY0ODMxMCwiaWF0IjoxNjY2NjQ4MjUwLCJpc3MiOiJodHRwczovL2NsZXJrLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsIm5iZiI6MTY2NjY0ODI0MCwic2lkIjoic2Vzc18yR2JEQjRlbk5kQ2E1dlMxenBDM1h6Zzl0SzkiLCJzdWIiOiJ1c2VyXzJHSXBYT0VwVnlKdzUxcmtabjlLbW5jNlN4ciJ9.n1Usc-DLDftqA0Xb-_2w8IGs4yjCmwc5RngwbSRvwevuZOIuRoeHmE2sgCdEvjfJEa7ewL6EVGVcM557TWPW--g_J1XQPwBy8tXfz7-S73CEuyRFiR97L2AHRdvRtvGtwR-o6l8aHaFxtlmfWbQXfg4kFJz2UGe9afmh3U9-f_4JOZ5fa3mI98UMy1-bo20vjXeWQ9aGrqaxHQxjnzzC-1Kpi5LdPvhQ16H0dPB8MHRTSM5TAuLKTpPV7wqixmbtcc2-0k6b9FKYZNqRVTaIyV-lifZloBvdzlfOF8nW1VVH_fx-iW5Q3hovHFcJIULHEC1kcAYTubbxzpgeVQepGg';

type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };
export type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };

type WithUserParams = Omit<
 Partial<UserJSON>,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/Gate.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
import type { IsAuthorized, OrganizationPermission } from '@clerk/types';
import type { IsAuthorized } from '@clerk/types';
import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
import React, { useEffect } from 'react';

import { useCoreSession } from '../contexts';
import { useFetch } from '../hooks';
import { useRouter } from '../router';

type GateParams = Omit<Parameters<IsAuthorized>[0], 'permission'> & { permission: OrganizationPermission };
type GateParams = Parameters<IsAuthorized>[0];
type GateProps = PropsWithChildren<
 GateParams & {
 fallback?: ReactNode;
Expand Down

89 changes: 66 additions & 23 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
import type { GetDomainsParams, OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
import type { OrganizationDomainVerificationStatus } from '@clerk/types';
import React, { useMemo } from 'react';

import { withGate } from '../../common';
import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
import { useGate, withGate } from '../../common';
import { useCoreOrganization } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import { Box, Col, localizationKeys, Spinner } from '../../customizables';
import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
import { useInView } from '../../hooks';
Expand All@@ -17,10 +19,61 @@ type DomainListProps = GetDomainsParams & {
 * Enables internal links to navigate to the correct page
 * based on when this component is used
 */
 redirectSubPath: string;
 redirectSubPath: 'organization-settings/domain' | 'domain';
 fallback?: React.ReactNode;
};

const useDomainList = () => {
 const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
Comment thread
SokratisVidros marked this conversation as resolved.

 const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });

 return {
 showDotMenu: canDeleteDomain || canVerifyDomain,
 canVerifyDomain,
 canDeleteDomain,
 };
};

const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
 trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));

const useMenuActions = (
 parentPath: string,
 domainId: string,
): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
 const { canDeleteDomain, canVerifyDomain } = useDomainList();
 const { navigate } = useRouter();

 const menuActions = [];

 if (canVerifyDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
 });
 }

 if (canDeleteDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
 isDestructive: true,
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
 });
 }

 return menuActions;
};

const DomainListDotMenu = ({
 redirectSubPath,
 domainId,
}: Pick<DomainListProps, 'redirectSubPath'> & {
 domainId: OrganizationDomainResource['id'];
}) => {
 const actions = useMenuActions(redirectSubPath, domainId);
 return <ThreeDotsMenu actions={actions} />;
};

export const DomainList = withGate(
 (props: DomainListProps) => {
 const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
Expand All@@ -31,6 +84,7 @@ export const DomainList = withGate(
 },
 });

 const { showDotMenu } = useDomainList();
 const { ref } = useInView({
 threshold: 0,
 onChange: inView => {
Expand DownExpand Up@@ -69,7 +123,7 @@ export const DomainList = withGate(
 <Col>
 {domainList.length === 0 && !domains?.isLoading && fallback}
 {domainList.map(d => {
 if (!(d.verification && d.verification.status === 'verified')) {
 if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
 return (
 <BlockWithTrailingComponent
 key={d.id}
Expand All@@ -82,23 +136,12 @@ export const DomainList = withGate(
 })}
 badge={<EnrollmentBadge organizationDomain={d} />}
 trailingComponent={
 <ThreeDotsMenu
 actions={[
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
 ),
 onClick: () => navigate(`${redirectSubPath}${d.id}/verify`),
 },
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
 ),
 isDestructive: true,
 onClick: () => navigate(`${redirectSubPath}${d.id}/remove`),
 },
 ]}
 />
 showDotMenu ? (
@SokratisVidrosSokratisVidrosOct 17, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 showDotMeny && <JSX/>
@panteliselefpanteliselefOct 18, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tried that, seems like trailingComponent does not accept null, I didn't want to mess with the signature of the component.
@SokratisVidrosSokratisVidrosOct 25, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we update its types?
@panteliselefpanteliselefOct 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following has type of  false | EmotionJSX.Element | null
showDotMenu&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
So i would have to do
(showDotMenu||null)&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
Which i'm not convinced it is better
@SokratisVidrosSokratisVidrosOct 31, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand what you are talking about. Is this the type?
@panteliselefpanteliselefOct 31, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the TS error
image
 <DomainListDotMenu
 redirectSubPath={redirectSubPath}
 domainId={d.id}
 />
 ) : undefined
 }
 >
 {d.name}
Expand All@@ -116,7 +159,7 @@ export const DomainList = withGate(
 padding: `${t.space.$3} ${t.space.$4}`,
 minHeight: t.sizes.$10,
 })}
 onClick={() => navigate(`${redirectSubPath}${d.id}`)}
 onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
 >
 {d.name}
 </ArrowBlockButton>
Expand DownExpand Up@@ -154,6 +197,6 @@ export const DomainList = withGate(
 );
 },
 {
 permission: 'org:sys_domains:manage',
 permission: 'org:sys_domains:read',
 },
);

2 changes: 1 addition & 1 deletion
...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const OrganizationMembersTabInvitations = () => {
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_invitation'}
 />
Expand Down

82 changes: 45 additions & 37 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { BlockButton } from '../../common';
import { useOrganizationProfileContext } from '../../contexts';
import { BlockButton, Gate } from '../../common';
import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
import { Col, Flex, localizationKeys } from '../../customizables';
import { Header } from '../../elements';
import { useRouter } from '../../router';
Expand All@@ -8,10 +8,13 @@ import { MembershipWidget } from './MembershipWidget';
import { RequestToJoinList } from './RequestToJoinList';

export const OrganizationMembersTabRequests = () => {
 const { organizationSettings } = useEnvironment();
 const { navigate } = useRouter();
 //@ts-expect-error
 const { __unstable_manageBillingUrl } = useOrganizationProfileContext();

 const isDomainsEnabled = organizationSettings?.domains?.enabled;

 return (
 <Col
 gap={8}
Expand All@@ -20,42 +23,47 @@ export const OrganizationMembersTabRequests = () => {
 }}
 >
 {__unstable_manageBillingUrl && <MembershipWidget />}
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}

 {isDomainsEnabled && (
 <Gate permission='org:sys_domains:manage'>
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 </Col>
 </Col>
 </Gate>
 )}

 <Flex
 direction='col'
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
 </Route>
 <Route path=':id'>
 <Gate
permission={'org:sys_domains:manage'}
any={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
 redirectTo='../../'
 >
 <VerifiedDomainPage />
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export const OrganizationSettings = () => {
 <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
 </Header.Root>
 <OrganizationProfileSection />
 <Gate permission='org:sys_domains:manage'>
 <Gate permission='org:sys_domains:read'>
 <OrganizationDomainsSection />
 </Gate>
 <OrganizationDangerSection />
Expand DownExpand Up@@ -85,7 +85,7 @@ const OrganizationDomainsSection = () => {
 subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
 id='organizationDomains'
 >
 <DomainList redirectSubPath={'domain/'} />
 <DomainList redirectSubPath={'domain'} />

 <AddBlockButton
 textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896

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

 Merged

panteliselef
merged 9 commits into

from

Oct 31, 2023
 Merged


feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI
#1896
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
74a2cbe

fix(clerk-js): Correct initial ref value for form feedback (#1933)


desiprisg Oct 25, 2023
28ec80d

chore(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
c5622fb

test(clerk-js): Use `org:sys_domains:read`


panteliselef Oct 16, 2023
8fb7cd2

chore(clerk-js): Add changeset


panteliselef Oct 17, 2023
b4eb751

chore(clerk-js): UseDomainList


panteliselef Oct 17, 2023
c3092fd

feat(clerk-js): Session.isAuthorized now support the `any` parameter


panteliselef Oct 17, 2023
d8acfa8

chore(clerk-js): Improve relative url creation in DomainList


panteliselef Oct 18, 2023
01f9db6

test(clerk-js): Test cases for trimLeadingSlash


panteliselef Oct 18, 2023
9a375d9

chore(clerk-js): Address Pr comments


panteliselef Oct 25, 2023

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: 6 additions & 0 deletions
.changeset/curly-news-push.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
---
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Shows list of domains if member has the `org:sys_domain:read` permission.

2 changes: 2 additions & 0 deletions
.changeset/odd-lemons-reply.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

19 changes: 17 additions & 2 deletions
packages/clerk-js/src/core/resources/Session.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ export class Session extends BaseResource implements SessionResource {
 * @experimental The method is experimental and subject to change in future releases.
 */
 isAuthorized: IsAuthorized = async params => {
 return new Promise(resolve => {
 return new Promise((resolve, reject) => {
 // if there is no active organization user can not be authorized
 if (!this.lastActiveOrganizationId || !this.user) {
 return resolve(false);
Expand All@@ -106,7 +106,22 @@ export class Session extends BaseResource implements SessionResource {
 if (params.role) {
 return resolve(activeOrganizationRole === params.role);
 }
 return resolve(false);

 if (params.any) {
 return resolve(
 !!params.any.find(permObj => {
 if (permObj.permission) {
 return activeOrganizationPermissions.includes(permObj.permission);
 }
 if (permObj.role) {
 return activeOrganizationRole === permObj.role;
 }
 return false;
 }),
 );
 }

 return reject();
 });
 };

Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/core/test/fixtures.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -13,7 +13,7 @@ import type {
export const mockJwt =
 'eyJhbGciOiJSUzI1NiIsImtpZCI6Imluc18yR0lvUWhiVXB5MGhYN0IyY1ZrdVRNaW5Yb0QiLCJ0eXAiOiJKV1QifQ.eyJhenAiOiJodHRwczovL2FjY291bnRzLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsImV4cCI6MTY2NjY0ODMxMCwiaWF0IjoxNjY2NjQ4MjUwLCJpc3MiOiJodHRwczovL2NsZXJrLmluc3BpcmVkLnB1bWEtNzQubGNsLmRldiIsIm5iZiI6MTY2NjY0ODI0MCwic2lkIjoic2Vzc18yR2JEQjRlbk5kQ2E1dlMxenBDM1h6Zzl0SzkiLCJzdWIiOiJ1c2VyXzJHSXBYT0VwVnlKdzUxcmtabjlLbW5jNlN4ciJ9.n1Usc-DLDftqA0Xb-_2w8IGs4yjCmwc5RngwbSRvwevuZOIuRoeHmE2sgCdEvjfJEa7ewL6EVGVcM557TWPW--g_J1XQPwBy8tXfz7-S73CEuyRFiR97L2AHRdvRtvGtwR-o6l8aHaFxtlmfWbQXfg4kFJz2UGe9afmh3U9-f_4JOZ5fa3mI98UMy1-bo20vjXeWQ9aGrqaxHQxjnzzC-1Kpi5LdPvhQ16H0dPB8MHRTSM5TAuLKTpPV7wqixmbtcc2-0k6b9FKYZNqRVTaIyV-lifZloBvdzlfOF8nW1VVH_fx-iW5Q3hovHFcJIULHEC1kcAYTubbxzpgeVQepGg';

type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };
export type OrgParams = Partial<OrganizationJSON> & { role?: MembershipRole; permissions?: OrganizationPermission[] };

type WithUserParams = Omit<
 Partial<UserJSON>,
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/common/Gate.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
import type { IsAuthorized, OrganizationPermission } from '@clerk/types';
import type { IsAuthorized } from '@clerk/types';
import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
import React, { useEffect } from 'react';

import { useCoreSession } from '../contexts';
import { useFetch } from '../hooks';
import { useRouter } from '../router';

type GateParams = Omit<Parameters<IsAuthorized>[0], 'permission'> & { permission: OrganizationPermission };
type GateParams = Parameters<IsAuthorized>[0];
type GateProps = PropsWithChildren<
 GateParams & {
 fallback?: ReactNode;
Expand Down

89 changes: 66 additions & 23 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
import type { GetDomainsParams, OrganizationEnrollmentMode } from '@clerk/types';
import type { GetDomainsParams, OrganizationDomainResource, OrganizationEnrollmentMode } from '@clerk/types';
import type { OrganizationDomainVerificationStatus } from '@clerk/types';
import React, { useMemo } from 'react';

import { withGate } from '../../common';
import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
import { useGate, withGate } from '../../common';
import { useCoreOrganization } from '../../contexts';
import type { LocalizationKey } from '../../customizables';
import { Box, Col, localizationKeys, Spinner } from '../../customizables';
import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
import { useInView } from '../../hooks';
Expand All@@ -17,10 +19,61 @@ type DomainListProps = GetDomainsParams & {
 * Enables internal links to navigate to the correct page
 * based on when this component is used
 */
 redirectSubPath: string;
 redirectSubPath: 'organization-settings/domain' | 'domain';
 fallback?: React.ReactNode;
};

const useDomainList = () => {
 const { isAuthorizedUser: canDeleteDomain } = useGate({ permission: 'org:sys_domains:delete' });
Comment thread
SokratisVidros marked this conversation as resolved.

 const { isAuthorizedUser: canVerifyDomain } = useGate({ permission: 'org:sys_domains:manage' });

 return {
 showDotMenu: canDeleteDomain || canVerifyDomain,
 canVerifyDomain,
 canDeleteDomain,
 };
};

const buildDomainListRelativeURL = (parentPath: string, domainId: string, mode?: 'verify' | 'remove') =>
 trimLeadingSlash(stripOrigin(toURL(`${parentPath}/${domainId}/${mode || ''}`)));

const useMenuActions = (
 parentPath: string,
 domainId: string,
): { label: LocalizationKey; onClick: () => Promise<unknown>; isDestructive?: boolean }[] => {
 const { canDeleteDomain, canVerifyDomain } = useDomainList();
 const { navigate } = useRouter();

 const menuActions = [];

 if (canVerifyDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify'),
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'verify')),
 });
 }

 if (canDeleteDomain) {
 menuActions.push({
 label: localizationKeys('organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove'),
 isDestructive: true,
 onClick: () => navigate(buildDomainListRelativeURL(parentPath, domainId, 'remove')),
 });
 }

 return menuActions;
};

const DomainListDotMenu = ({
 redirectSubPath,
 domainId,
}: Pick<DomainListProps, 'redirectSubPath'> & {
 domainId: OrganizationDomainResource['id'];
}) => {
 const actions = useMenuActions(redirectSubPath, domainId);
 return <ThreeDotsMenu actions={actions} />;
};

export const DomainList = withGate(
 (props: DomainListProps) => {
 const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
Expand All@@ -31,6 +84,7 @@ export const DomainList = withGate(
 },
 });

 const { showDotMenu } = useDomainList();
 const { ref } = useInView({
 threshold: 0,
 onChange: inView => {
Expand DownExpand Up@@ -69,7 +123,7 @@ export const DomainList = withGate(
 <Col>
 {domainList.length === 0 && !domains?.isLoading && fallback}
 {domainList.map(d => {
 if (!(d.verification && d.verification.status === 'verified')) {
 if (!(d.verification && d.verification.status === 'verified') || !showDotMenu) {
 return (
 <BlockWithTrailingComponent
 key={d.id}
Expand All@@ -82,23 +136,12 @@ export const DomainList = withGate(
 })}
 badge={<EnrollmentBadge organizationDomain={d} />}
 trailingComponent={
 <ThreeDotsMenu
 actions={[
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__verify',
 ),
 onClick: () => navigate(`${redirectSubPath}${d.id}/verify`),
 },
 {
 label: localizationKeys(
 'organizationProfile.profilePage.domainSection.unverifiedDomain_menuAction__remove',
 ),
 isDestructive: true,
 onClick: () => navigate(`${redirectSubPath}${d.id}/remove`),
 },
 ]}
 />
 showDotMenu ? (
@SokratisVidrosSokratisVidrosOct 17, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙃 showDotMeny && <JSX/>
@panteliselefpanteliselefOct 18, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already tried that, seems like trailingComponent does not accept null, I didn't want to mess with the signature of the component.
@SokratisVidrosSokratisVidrosOct 25, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we update its types?
@panteliselefpanteliselefOct 25, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The following has type of  false | EmotionJSX.Element | null
showDotMenu&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
So i would have to do
(showDotMenu||null)&&(<DomainListDotMenuredirectSubPath={redirectSubPath}domainId={d.id}/>)
Which i'm not convinced it is better
@SokratisVidrosSokratisVidrosOct 31, 2023

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure I understand what you are talking about. Is this the type?
@panteliselefpanteliselefOct 31, 2023

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the TS error
image
 <DomainListDotMenu
 redirectSubPath={redirectSubPath}
 domainId={d.id}
 />
 ) : undefined
 }
 >
 {d.name}
Expand All@@ -116,7 +159,7 @@ export const DomainList = withGate(
 padding: `${t.space.$3} ${t.space.$4}`,
 minHeight: t.sizes.$10,
 })}
 onClick={() => navigate(`${redirectSubPath}${d.id}`)}
 onClick={() => navigate(buildDomainListRelativeURL(redirectSubPath, d.id))}
 >
 {d.name}
 </ArrowBlockButton>
Expand DownExpand Up@@ -154,6 +197,6 @@ export const DomainList = withGate(
 );
 },
 {
 permission: 'org:sys_domains:manage',
 permission: 'org:sys_domains:read',
 },
);

2 changes: 1 addition & 1 deletion
...ages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -58,7 +58,7 @@ export const OrganizationMembersTabInvitations = () => {
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_invitation'}
 />
Expand Down

82 changes: 45 additions & 37 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { BlockButton } from '../../common';
import { useOrganizationProfileContext } from '../../contexts';
import { BlockButton, Gate } from '../../common';
import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
import { Col, Flex, localizationKeys } from '../../customizables';
import { Header } from '../../elements';
import { useRouter } from '../../router';
Expand All@@ -8,10 +8,13 @@ import { MembershipWidget } from './MembershipWidget';
import { RequestToJoinList } from './RequestToJoinList';

export const OrganizationMembersTabRequests = () => {
 const { organizationSettings } = useEnvironment();
 const { navigate } = useRouter();
 //@ts-expect-error
 const { __unstable_manageBillingUrl } = useOrganizationProfileContext();

 const isDomainsEnabled = organizationSettings?.domains?.enabled;

 return (
 <Col
 gap={8}
Expand All@@ -20,42 +23,47 @@ export const OrganizationMembersTabRequests = () => {
 }}
 >
 {__unstable_manageBillingUrl && <MembershipWidget />}
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}

 {isDomainsEnabled && (
 <Gate permission='org:sys_domains:manage'>
 <Col
 gap={2}
 sx={{
 width: '100%',
 }}
 >
 <Header.Root>
 <Header.Title
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerTitle',
 )}
 textVariant='largeMedium'
 />
 <Header.Subtitle
 localizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.headerSubtitle',
 )}
 variant='regularRegular'
 />
 </Header.Root>
 <DomainList
 fallback={
 <BlockButton
 colorScheme='primary'
 textLocalizationKey={localizationKeys(
 'organizationProfile.membersPage.requestsTab.autoSuggestions.primaryButton',
 )}
 id='manageVerifiedDomains'
 onClick={() => navigate('organization-settings/domain')}
 />
 }
 redirectSubPath={'organization-settings/domain'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 }
 redirectSubPath={'organization-settings/domain/'}
 verificationStatus={'verified'}
 enrollmentMode={'automatic_suggestion'}
 />
 </Col>
 </Col>
 </Gate>
 )}

 <Flex
 direction='col'
Expand Down

2 changes: 1 addition & 1 deletion
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -77,7 +77,7 @@ export const OrganizationProfileRoutes = (props: PropsOfComponent<typeof Profile
 </Route>
 <Route path=':id'>
 <Gate
permission={'org:sys_domains:manage'}
any={[{ permission: 'org:sys_domains:manage' }, { permission: 'org:sys_domains:delete' }]}
 redirectTo='../../'
 >
 <VerifiedDomainPage />
Expand Down

4 changes: 2 additions & 2 deletions
packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationSettings.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -26,7 +26,7 @@ export const OrganizationSettings = () => {
 <Header.Subtitle localizationKey={localizationKeys('organizationProfile.start.headerSubtitle__settings')} />
 </Header.Root>
 <OrganizationProfileSection />
 <Gate permission='org:sys_domains:manage'>
 <Gate permission='org:sys_domains:read'>
 <OrganizationDomainsSection />
 </Gate>
 <OrganizationDangerSection />
Expand DownExpand Up@@ -85,7 +85,7 @@ const OrganizationDomainsSection = () => {
 subtitle={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
 id='organizationDomains'
 >
 <DomainList redirectSubPath={'domain/'} />
 <DomainList redirectSubPath={'domain'} />

 <AddBlockButton
 textLocalizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
Expand Down
Loading