Security — Data Flow

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface DataZone {
  icon: typeof Building2
  label: string
  detail: string
  holds: string[]
}

Files installed (2)

• src/app/components/blocks/security-data-flow/security-data-flow.component.ts5.7 kB

  Copy

  // Diagram of what crosses the trust boundary and what never does: three labelled
  // zones joined by arrows, with a legend separating metadata from customer rows.
  // Port of the React block 1:1.
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, Building2, Cloud, Lock, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  interface DataZone {
    icon: typeof Building2
    label: string
    detail: string
    holds: string[]
  }
  
  // The point of the diagram is the second list: naming what never crosses is
  // more reassuring than any number of things that do.
  const zones: DataZone[] = [
    {
      icon: Building2,
      label: 'Your warehouse',
      detail: 'Snowflake, BigQuery, Redshift, Postgres',
      holds: ['Customer rows', 'PII and PHI', 'Raw event history'],
    },
    {
      icon: Cloud,
      label: 'Northwind',
      detail: 'Your chosen region',
      holds: ['Metric definitions', 'Query plans and timings', 'Access decisions'],
    },
    {
      icon: Lock,
      label: 'Your viewers',
      detail: 'Scoped per identity',
      holds: ['Aggregated results only', 'Nothing cached in the browser'],
    },
  ]
  
  const crosses = ['Column names and types', 'Aggregate results, scoped', 'Query metadata and timings']
  const neverCrosses = ['Customer rows', 'Primary keys', 'Free-text fields', 'Anything you have not modelled']
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-security-data-flow, [ui-security-data-flow]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiSeparatorComponent,
    ],
    template: `
      <section data-slot="security-data-flow" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
          <div class="max-w-2xl">
            <span ui-badge variant="secondary">Data flow</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">What crosses the boundary</h2>
            <p class="text-muted-foreground mt-3 text-lg">
              And, more usefully, what never does. Both lists are below the diagram.
            </p>
          </div>
  
          <div ui-card class="mt-10">
            <div ui-card-content class="p-6 lg:p-8">
              <div class="grid items-stretch gap-4 lg:grid-cols-[1fr_auto_1fr_auto_1fr]">
                @for (zone of zones; track zone.label; let index = $index) {
                  <div class="border-border bg-muted/30 rounded-lg border p-5">
                    <span
                      class="border-border bg-background text-muted-foreground flex size-9 items-center justify-center rounded-lg border"
                      aria-hidden="true"
                    >
                      <lucide-icon [img]="zone.icon" class="size-4" />
                    </span>
                    <p class="mt-4 text-sm font-semibold">{{ zone.label }}</p>
                    <p class="text-muted-foreground mt-0.5 text-xs">{{ zone.detail }}</p>
                    <ul class="mt-3 space-y-1">
                      @for (item of zone.holds; track item) {
                        <li class="text-muted-foreground font-mono text-xs">
                          {{ item }}
                        </li>
                      }
                    </ul>
                  </div>
  
                  @if (index < zones.length - 1) {
                    <div class="text-muted-foreground/50 flex items-center justify-center lg:px-2" aria-hidden="true">
                      <lucide-icon [img]="ArrowRight" class="size-4 rotate-90 lg:rotate-0" />
                    </div>
                  }
                }
              </div>
  
              <ui-separator class="my-8" />
  
              <div class="grid gap-8 sm:grid-cols-2">
                <div>
                  <p class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">Crosses the boundary</p>
                  <ul class="mt-3 space-y-2">
                    @for (item of crosses; track item) {
                      <li class="flex items-center gap-2.5 text-sm">
                        <span class="bg-primary size-1.5 shrink-0 rounded-full" aria-hidden="true"></span>
                        <span>{{ item }}</span>
                      </li>
                    }
                  </ul>
                </div>
  
                <div>
                  <p class="text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase">Never crosses</p>
                  <ul class="mt-3 space-y-2">
                    @for (item of neverCrosses; track item) {
                      <li class="flex items-center gap-2.5 text-sm">
                        <span class="bg-muted-foreground/40 size-1.5 shrink-0 rounded-full" aria-hidden="true"></span>
                        <span class="text-muted-foreground">{{ item }}</span>
                      </li>
                    }
                  </ul>
                </div>
              </div>
            </div>
          </div>
  
          <button ui-button variant="outline" class="mt-6">Read the architecture note</button>
        </div>
      </section>
    `,
  })
  export class UiSecurityDataFlowComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly zones = zones
    protected readonly crosses = crosses
    protected readonly neverCrosses = neverCrosses
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/security-data-flow/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/security-data-flow.json