fix: metadata decoding and encoding #9816 (#10024)

# Which Problems Are Solved
Metadata encoding and decoding on the organization detail page was
broken due to use of the old, generated gRPC client.

# How the Problems Are Solved
The metadata values are now correctly base64 decoded and encoded on the
organization detail page.

# Additional Changes
Refactored parts of the code to remove the dependency on the buffer npm
package, replacing it with the browser-native TextEncoder and
TextDecoder APIs.

# Additional Context
- Closes [#9816](https://github.com/zitadel/zitadel/issues/9816)

console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts

@@ -4,7 +4,6 @@ import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { ToastService } from 'src/app/services/toast.service';
 import { Metadata as MetadataV2 } from '@zitadel/proto/zitadel/metadata_pb';
 import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
-import { Buffer } from 'buffer';
 
 export type MetadataDialogData = {
   metadata: (Metadata.AsObject | MetadataV2)[];
@@ -26,9 +25,10 @@ export class MetadataDialogComponent {
     public dialogRef: MatDialogRef<MetadataDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: MetadataDialogData,
   ) {
+    const decoder = new TextDecoder();
     this.metadata = data.metadata.map(({ key, value }) => ({
       key,
-      value: typeof value === 'string' ? value : Buffer.from(value as unknown as string, 'base64').toString('utf8'),
+      value: typeof value === 'string' ? value : decoder.decode(value),
     }));
   }
 

console/src/app/modules/metadata/metadata/metadata.component.ts

@@ -5,7 +5,6 @@ import { Observable, ReplaySubject } from 'rxjs';
 import { Metadata as MetadataV2 } from '@zitadel/proto/zitadel/metadata_pb';
 import { map, startWith } from 'rxjs/operators';
 import { Metadata } from 'src/app/proto/generated/zitadel/metadata_pb';
-import { Buffer } from 'buffer';
 
 type StringMetadata = {
   key: string;
@@ -37,12 +36,13 @@ export class MetadataComponent implements OnInit {
 
   ngOnInit() {
     this.dataSource$ = this.metadata$.pipe(
-      map((metadata) =>
-        metadata.map(({ key, value }) => ({
+      map((metadata) => {
+        const decoder = new TextDecoder();
+        return metadata.map(({ key, value }) => ({
           key,
-          value: Buffer.from(value as any as string, 'base64').toString('utf-8'),
-        })),
-      ),
+          value: typeof value === 'string' ? value : decoder.decode(value),
+        }));
+      }),
       startWith([] as StringMetadata[]),
       map((metadata) => new MatTableDataSource(metadata)),
     );