Skip to content

feature/ui 2 columns #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Jelledb wants to merge 2 commits into from
Closed

feature/ui 2 columns #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd08cfd
Add tabbed UI for platform integration methods
Jelledb Mar 17, 2026
ceb0d47
Refactor platform integration to two-column layout
Jelledb Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 121 additions & 48 deletions website/src/app/features/platform-integration/platform-integration.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,8 @@
<div class="flex-1 flex flex-col gap-2">
<h1 class="text-2xl lg:text-3xl font-bold text-slate-900">Integrate {{ platform.name }} into meshStack</h1>
<p class="text-base text-slate-700 mb-1">{{ platform.description }}</p>

<!-- Benefits -->
<div *ngIf="platform.benefits && platform.benefits.length > 0" class="flex flex-wrap gap-4 mb-2">
<div *ngIf="platform.benefits && platform.benefits.length > 0" class="flex flex-wrap gap-4">
<span *ngFor="let benefit of platform.benefits" class="inline-flex items-center gap-1.5 text-sm text-slate-600">
<i class="fa-solid fa-circle-check text-green-600"></i>
<span>{{ benefit }}</span>
Expand All @@ -33,61 +32,135 @@ <h1 class="text-2xl lg:text-3xl font-bold text-slate-900">Integrate {{ platform.

<!-- Main Content -->
<div class="container mx-auto px-4 lg:px-8 py-8">
<!-- Integration Guide + How To + Terraform Snippet Combined -->
<div class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-[0.8fr_1.5fr] gap-6 items-start">
<mst-card label="Quick Start" class="h-fit">
<div class="px-5 py-6 max-w-none text-base" card-body>
<h2 class="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
<i class="fa-solid fa-rocket text-primary-600"></i>
Quick Start
</h2>
<div class="space-y-4">
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">1</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Add the OpenTofu snippet</div>
<div class="text-slate-600 text-sm">Copy the provided OpenTofu code from the right and add it to your infrastructure codebase.</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">2</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Provider setup and configure variables</div>
<div class="text-slate-600 text-sm">
Ensure you enter your API key in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">provider</span> block and update the required variables in the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">locals</span> block as needed for your environment.
</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-sm font-semibold">3</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Deploy with OpenTofu</div>
<div class="text-slate-600 text-sm">Run <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu init</span>, <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu plan</span>, and <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-sm">tofu apply</span> to provision the integration.</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-base font-bold">✓</div>
<div class="flex-1">
<div class="text-slate-700 font-medium mb-1 text-base">Success!</div>
<div class="text-slate-600 text-sm">The platform is now integrated and you can start using it to provision tenants, assign users and collect costs.</div>
</div>
</div>

<!-- ── Two-path layout ──────────────────────────────────────────── -->
<div class="flex flex-col md:flex-row bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">

<!-- ── Left: meshStack UI ──────────────────────────────────────── -->
<div class="p-8 flex flex-col gap-6 md:w-[32%] md:flex-shrink-0">
<!-- Header -->
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-lg bg-primary-100 flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-display text-primary-600"></i>
</div>
<div>
<div class="font-bold text-slate-900 leading-snug">meshStack UI</div>
<div class="text-xs text-slate-400">No code required</div>
</div>
<span class="ml-auto inline-flex items-center gap-1 text-xs font-medium text-slate-500 bg-slate-50 border border-slate-200 px-2.5 py-1 rounded-full">
No-code
</span>
</div>

<!-- Steps -->
<div class="space-y-5">
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs font-bold">1</div>
<div>
<div class="text-sm font-medium text-slate-700">Open the meshStack Admin Panel</div>
<div class="text-xs text-slate-500 mt-0.5">Navigate to <span class="font-mono bg-slate-100 px-1 py-0.5 rounded">Admin Area</span> in your meshStack instance.</div>
</div>
</div>
</mst-card>
<div class="relative w-full overflow-hidden">
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs font-bold">2</div>
<div>
<div class="text-sm font-medium text-slate-700">Platforms → Add Platform</div>
<div class="text-xs text-slate-500 mt-0.5">Select <strong>{{ platform.name }}</strong> from the platform list.</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs font-bold">3</div>
<div>
<div class="text-sm font-medium text-slate-700">Enter credentials &amp; endpoint</div>
<div class="text-xs text-slate-500 mt-0.5">Fill in the API endpoint and service account credentials.</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary-100 text-primary-600 flex items-center justify-center text-xs font-bold">4</div>
<div>
<div class="text-sm font-medium text-slate-700">Configure Landing Zones</div>
<div class="text-xs text-slate-500 mt-0.5">Define how meshStack provisions and governs tenants on this platform.</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-sm font-bold">✓</div>
<div>
<div class="text-sm font-medium text-slate-700">Publish &amp; you're done!</div>
<div class="text-xs text-slate-500 mt-0.5">Set availability to <span class="font-mono bg-slate-100 px-1 py-0.5 rounded">Public</span> — users can now self-service tenants on {{ platform.name }}.</div>
</div>
</div>
</div>

<!-- Footer hint -->
<div class="mt-auto pt-4 border-t border-slate-100 text-xs text-slate-400 flex items-center gap-2">
<i class="fa-solid fa-book text-slate-300 flex-shrink-0"></i>
<span>Need more detail? See the
<a href="https://docs.meshcloud.io/docs/meshstack.meshplatforms.html" target="_blank" rel="noopener noreferrer"
class="text-primary-600 hover:text-primary-700 underline">meshStack Platform docs</a>.
</span>
</div>
</div>

<!-- ── Right: OpenTofu / Terraform ────────────────────────────── -->
<div class="p-8 flex flex-col gap-6 flex-1 min-w-0 md:border-l md:border-slate-100"
[class.opacity-50]="!platform.terraformSnippet"
[class.pointer-events-none]="!platform.terraformSnippet">

<!-- Header -->
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-lg bg-slate-100 flex items-center justify-center flex-shrink-0">
<i class="fa-solid fa-code text-slate-500"></i>
</div>
<div>
<div class="font-bold text-slate-900 leading-snug">OpenTofu / Terraform</div>
<div class="text-xs text-slate-400">Infrastructure as Code</div>
</div>
<span class="ml-auto inline-flex items-center gap-1 text-xs font-semibold text-green-700 bg-green-50 border border-green-200 px-2.5 py-1 rounded-full">
<i class="fa-solid fa-star text-green-500 text-[9px]"></i> Recommended
</span>
<span *ngIf="!platform.terraformSnippet" class="text-xs font-medium text-slate-400 bg-slate-100 border border-slate-200 px-2.5 py-1 rounded-full">
Coming soon
</span>
</div>

<!-- Steps -->
<div class="space-y-3">
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center text-xs font-bold">1</div>
<div>
<div class="text-sm font-medium text-slate-700">Copy the snippet below into your codebase</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center text-xs font-bold">2</div>
<div>
<div class="text-sm font-medium text-slate-700">Set your API key &amp; update the <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-xs">locals</span> block</div>
</div>
</div>
<div class="flex gap-3 items-start">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center text-xs font-bold">3</div>
<div>
<div class="text-sm font-medium text-slate-700">Run <span class="font-mono bg-slate-100 px-1 py-0.5 rounded text-xs">tofu init &amp;&amp; tofu apply</span></div>
</div>
</div>
</div>

<!-- Code snippet -->
<div *ngIf="platform.terraformSnippet" class="relative w-full overflow-hidden flex-1 min-w-0">
<button
(click)="copyTerraform(platform.terraformSnippet!!)"
class="absolute top-3 right-4 btn btn-xs btn-primary z-10 font-bold flex items-center gap-2"
class="absolute top-3 right-3 btn btn-xs btn-primary z-10 font-bold flex items-center gap-1.5"
[class.btn-success]="copiedTerraform">
<i class="fa-solid" [class.fa-check]="copiedTerraform" [class.fa-copy]="!copiedTerraform"></i>
<i class="fa-solid text-xs" [class.fa-check]="copiedTerraform" [class.fa-copy]="!copiedTerraform"></i>
<span>{{ copiedTerraform ? 'Copied!' : 'Copy' }}</span>
</button>
<pre class="bg-slate-900 text-slate-100 p-2 md:p-3 rounded-xl border border-slate-200 overflow-x-auto text-xs md:text-sm mt-0 w-full whitespace-pre"><code class="language-hcl" highlight>{{ platform?.terraformSnippet }}</code></pre>
<pre class="bg-slate-900 text-slate-100 p-3 rounded-lg overflow-x-auto text-xs w-full whitespace-pre"><code class="language-hcl" highlight>{{ platform?.terraformSnippet }}</code></pre>
</div>

</div>
</div>

</div><!-- /two-path layout -->

</div>
</div>

Expand Down
3 changes: 1 addition & 2 deletions website/src/app/features/platform-integration/platform-integration.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { Observable, switchMap, of, map } from 'rxjs';
import { BreadcrumbComponent } from 'app/shared/breadcrumb';
import { BreadCrumbService } from 'app/shared/breadcrumb/bread-crumb.service';
import { BreadcrumbItem } from 'app/shared/breadcrumb/breadcrumb';
import { CardComponent } from 'app/shared/card';
import { PlatformService, Platform } from 'app/shared/platform';
import { extractLogoColor } from 'app/shared/util/logo-color.util';
import { HighlightDirective } from 'app/shared/directives';
Expand All @@ -15,7 +14,7 @@ const DEFAULT_HEADER_BG_COLOR = 'rgba(203,213,225,0.3)';

@Component({
selector: 'mst-platform-integration',
imports: [CommonModule, CardComponent, BreadcrumbComponent, RouterLink, HighlightDirective],
imports: [CommonModule, BreadcrumbComponent, RouterLink, HighlightDirective],
templateUrl: './platform-integration.component.html',
styleUrl: './platform-integration.component.scss',
standalone: true
Expand Down
Loading
Loading