') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); feat(clerk-js): Use `org:sys_domains:read` for improved fine grain control of the UI by panteliselef · Pull Request #1896 · clerk/javascript · GitHub
Skip to content

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

Merged
panteliselef merged 9 commits into
main-v4from
ORG-286
Oct 31, 2023
Merged

feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UI#1896
panteliselef merged 9 commits into
main-v4from
ORG-286

Conversation

@panteliselef

@panteliselefpanteliselef commented Oct 16, 2023

Copy link
Copy Markdown
Contributor

Description

This PR makes usage of org:sys_domains:read a permission that allows users to see a list of domains. Previously we were wrapping the whole functionality under the manage permission.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

@panteliselefpanteliselef self-assigned this Oct 16, 2023
@panteliselef
panteliselef requested a review from a team as a code ownerOctober 16, 2023 21:24
@changeset-bot

changeset-botBot commented Oct 16, 2023

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9a375d9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
NameType
@clerk/clerk-jsPatch
@clerk/typesPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
@clerk/backendPatch
@clerk/fastifyPatch
gatsby-plugin-clerkPatch
@clerk/localizationsPatch
@clerk/nextjsPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/clerk-sdk-nodePatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@panteliselefpanteliselef changed the title Org 286[WIP] Org 286Oct 17, 2023
@panteliselefpanteliselef changed the title [WIP] Org 286feat(clerk-js): Use org:sys_domains:read for improved fine grain control of the UIOct 17, 2023
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx Outdated
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx Outdated
},
]}
/>
showDotMenu ? (

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/>

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.

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?

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

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?

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

setData(null);
});
}, []);
}, [JSON.stringify(params)]);

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.

❓ Can you elaborate on this change? Is it necessary to be part of this PR?

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.

Previously useFetch would only fire once, "on mount", there was a bug where the Gate component would not hide the content while not having the necessary permission because the "fetch" wouldn't fire when the parameters changed.

For context we are using useFetch to handle the async logic of isAuthorized.

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.

Do we need to make a FAPI call every time the isAuthorized is invoked?

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 would only invoke a call if params change, not on every render.

Comment threadpackages/clerk-js/src/ui/utils/test/mockHelpers.ts Outdated
* @returns {string} Returns the string without leading slashes
* @param path
*/
export const trimLeadingSlash = (path: string): string => {

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.

Can we add a couple of tests for this util?

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.

Yeap, thanks for the reminder

@panteliselef
panteliselefforce-pushed the ORG-286 branch 2 times, most recently from a591162 to d19c8a0CompareOctober 18, 2023 13:21
Comment threadpackages/clerk-js/src/core/resources/Session.ts Outdated
Comment threadpackages/clerk-js/src/core/resources/Session.ts Outdated
Comment threadpackages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx Outdated
},
]}
/>
showDotMenu ? (

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?

setData(null);
});
}, []);
}, [JSON.stringify(params)]);

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.

Do we need to make a FAPI call every time the isAuthorized is invoked?

Comment threadpackages/clerk-js/src/ui/utils/test/mockHelpers.ts Outdated
},
]}
/>
showDotMenu ? (

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?

@panteliselef
panteliselef added this pull request to the merge queue Oct 31, 2023
Merged via the queue into main-v4 with commit f6f67f9Oct 31, 2023
@panteliselef
panteliselef deleted the ORG-286 branch October 31, 2023 17:05
@clerk-cookieclerk-cookie mentioned this pull request Oct 31, 2023
panteliselef added a commit that referenced this pull request Oct 31, 2023
github-merge-queueBot pushed a commit that referenced this pull request Oct 31, 2023
@clerk-cookieclerk-cookie mentioned this pull request Oct 31, 2023
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@SokratisVidros@desiprisg@clerk-cookie