feat(platform): preview project name on top of DSN

also fixes a "copied" feedback z-index issue

closes #13015

Author: a-hariti

src/components/codeBlock/code-blocks.module.scss

@@ -152,4 +152,5 @@
   border: none;
   color: var(--white);
   transition: opacity 150ms;
+  z-index: 10000;
 }

src/components/codeBlock/index.tsx

@@ -14,6 +14,31 @@ export interface CodeBlockProps {
   title?: string;
 }
 
+/**
+ *
+ * Copy `element`'s text children as long as long as they are not `.no-copy`
+ */
+function getCopiableText(element: HTMLDivElement) {
+  let text = '';
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
+    acceptNode: function (node) {
+      // Skip if parent has .no-copy class
+      if (node.parentElement?.classList.contains('no-copy')) {
+        return NodeFilter.FILTER_REJECT;
+      }
+      return NodeFilter.FILTER_ACCEPT;
+    },
+  });
+
+  let node: Node | null;
+  // eslint-disable-next-line no-cond-assign
+  while ((node = walker.nextNode())) {
+    text += node.textContent;
+  }
+
+  return text.trim();
+}
+
 export function CodeBlock({filename, language, children}: CodeBlockProps) {
   const [showCopied, setShowCopied] = useState(false);
   const codeRef = useRef<HTMLDivElement>(null);
@@ -32,7 +57,9 @@ export function CodeBlock({filename, language, children}: CodeBlockProps) {
       return;
     }
 
-    const code = cleanCodeSnippet(codeRef.current.innerText, {language});
+    const code = cleanCodeSnippet(getCopiableText(codeRef.current), {
+      language,
+    });
 
     try {
       await navigator.clipboard.writeText(code);

src/components/codeKeywords/keywordSelector.tsx

@@ -24,6 +24,7 @@ import {
   Selections,
 } from './styles.css';
 import {dropdownPopperOptions} from './utils';
+import {relative} from 'node:path/posix';
 
 type KeywordSelectorProps = {
   group: string;
@@ -137,6 +138,7 @@ export function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
             // correctly overlap during animations, but this must be removed
             // after so copy-paste correctly works.
             display: isAnimating ? 'inline-grid' : undefined,
+            position: 'relative',
           }}
         >
           <AnimatePresence initial={false}>
@@ -148,6 +150,28 @@ export function KeywordSelector({keyword, group, index}: KeywordSelectorProps) {
               {currentSelection[keyword]}
             </Keyword>
           </AnimatePresence>
+          {!isOpen && currentSelection?.title && (
+            <div
+              className='no-copy'
+              style={{
+                position: 'absolute',
+                top: '-24px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                fontSize: '12px',
+                backgroundColor: '#333',
+                color: '#fff',
+                padding: '2px 6px',
+                borderRadius: '3px',
+                pointerEvents: 'none',
+                whiteSpace: 'nowrap',
+                opacity: 0.9,
+                userSelect: 'none',
+              }}
+            >
+              {currentSelection.title}
+            </div>
+          )}
         </span>
       </KeywordDropdown>
       {isMounted &&