chore: Add obfuscate to TextSelectCopy, add Credentials to Plugin type (#55833)

- Allow obfuscating value of TextSelectCopy and replacing with bullets
- Add `Credentials` field to Plugin type, get OAuthCredentials on Plugin
  creation if present

Author: kiosion

web/packages/shared/components/TextSelectCopy/TextSelectCopy.story.tsx

@@ -29,3 +29,9 @@ export const BashCommand = () => {
 export const NonBash = () => {
   return <Component text="some text to be copied" bash={false} />;
 };
+
+export const Obfuscated = () => {
+  return (
+    <Component text="Super-secret-donot-tell-anyone" bash={false} obfuscate />
+  );
+};

web/packages/shared/components/TextSelectCopy/TextSelectCopy.tsx

@@ -30,12 +30,17 @@ export function TextSelectCopy({
   allowMultiline,
   onCopy,
   bash = true,
+  obfuscate = false,
   ...styles
 }: Props) {
   const font = fontFamily || useTheme().fonts.mono;
   const ref = useRef(undefined);
   const abortControllerRef = useRef<AbortController>(undefined);
   const [copyCmd, setCopyCmd] = useState(() => 'Copy');
+  const [isObfuscated, setIsObfuscated] = useState(false);
+
+  const displayText =
+    obfuscate && !bash && !isObfuscated ? obfuscateText(text) : text;
 
   function onCopyClick() {
     abortControllerRef.current?.abort();
@@ -84,20 +89,36 @@ export function TextSelectCopy({
     >
       <Flex mr="2" style={boxStyles}>
         {bash && <Box mr="1" style={{ userSelect: 'none' }}>{`$`}</Box>}
-        <div ref={ref}>{text}</div>
+        <div ref={ref}>{displayText}</div>
+      </Flex>
+      <Flex gap={2} alignItems="center">
+        {obfuscate && (
+          <ButtonPrimary
+            onClick={() => setIsObfuscated(!isObfuscated)}
+            style={{
+              maxWidth: '48px',
+              width: '100%',
+              padding: '4px 8px',
+              minHeight: '10px',
+              fontSize: '10px',
+            }}
+          >
+            {isObfuscated ? 'Hide' : 'Show'}
+          </ButtonPrimary>
+        )}
+        <ButtonPrimary
+          onClick={onCopyClick}
+          style={{
+            maxWidth: '48px',
+            width: '100%',
+            padding: '4px 8px',
+            minHeight: '10px',
+            fontSize: '10px',
+          }}
+        >
+          {copyCmd}
+        </ButtonPrimary>
       </Flex>
-      <ButtonPrimary
-        onClick={onCopyClick}
-        style={{
-          maxWidth: '48px',
-          width: '100%',
-          padding: '4px 8px',
-          minHeight: '10px',
-          fontSize: '10px',
-        }}
-      >
-        {copyCmd}
-      </ButtonPrimary>
     </Flex>
   );
 }
@@ -109,4 +130,16 @@ type Props = {
   allowMultiline?: boolean;
   // handles styles
   [key: string]: any;
-};
+  // only one of `bash`/`obfuscate` should be set at a time
+} & (
+  | {
+      bash: false;
+      obfuscate?: true;
+    }
+  | {
+      bash?: true;
+      obfuscate?: false;
+    }
+);
+
+const obfuscateText = (value: string): string => '•'.repeat(value.length);

web/packages/teleport/src/services/integrations/types.ts

@@ -70,6 +70,7 @@ export type IntegrationTemplate<
   details?: string;
   statusCode: IntegrationStatusCode;
   status?: SD;
+  credentials?: PluginCredentials;
 };
 // IntegrationKind string values should be in sync
 // with the backend value for defining the integration
@@ -228,6 +229,26 @@ export type PluginStatus<D = any> = {
    * contains provider-specific status information
    */
   details?: D;
+  /**
+   * credentials contains information about the plugin's credentials,
+   * if applicable, only on creation.
+   */
+  credentials?: PluginCredentials;
+};
+
+export type PluginCredentials = {
+  OAuthCredentials?: PluginOAuthCredentials;
+};
+
+type PluginOAuthCredentials = {
+  /**
+   * clientId is the OAuth client ID
+   */
+  clientId: string;
+  /**
+   * clientSecret is the OAuth client secret
+   */
+  clientSecret: string;
 };
 
 /**