Home Page

README.md

@@ -78,13 +78,15 @@ Afterwards go into the "Website"-folder from VS Code and open the terminal (of t
 # Settings in pipeline
 The pipeline expects a variable group called `DataModel`. It must have the following variables. The app user only requires the `Environment Maker` security role.
 
+* AdoWikiName: Name of your wiki found under "Overview -> Wiki" in ADO. (will be encoded so dont worry about space)
+* AdoWikiPagePath: Path to the introduction page you wish to show in DMV. (will also be encoded so dont worry about spaces)
 * AzureClientId: Client id for an Azure App Registration with access to the Dataverse Environment.
 * AzureClientSecret: Client Secret for the above. Remember to set its variable type to "Secret"! 
 * AzureTenantId: Azure Tenant ID (where your App Regustration is placed and resource group will be placed).
 * AzureServiceConnectionName: Name of the Azure Resource Manager service connection created from ADO to Azure.
 * AzureLocation: Name of the location for the resource group in Azure (e.g. "westeurope" - not the display name which is "West Europe").
 * AzureResourceGroupName: Name of the Resource Group in Azure. If this matches an existing group in the location above that will be used for the DMV resources, if not a new resource group will be created.
-* DataverseUrl: URL for the Dataverse environment which the data model will be based on (e.g. "https://mySystem-dev.crm4.dynamics.com/".
+* DataverseUrl: URL for the Dataverse environment which the data model will be based on (e.g. "https://mySystem-dev.crm4.dynamics.com/").
 * DataverseSolutionNames: Comma-seperated list of solutions to based DMV on. Use the logical names (not display names).
 * WebsiteName: Used for the url of the web app presenting the data model to the user. The full URL will be in the format "https://wa-{WebsiteName}.azurewebsites.net/" and must be globally unique. 
 * WebsitePassword: Password used by DMV users to login to the generated site.
@@ -118,11 +120,20 @@ The `azure-pipelines-external.yml` file is a reusable Azure DevOps pipeline temp
    - Add a new "Azure Repos Git" pipeline in Azure DevOps and choose the `azure-pipelines-external.yml` file from your repository as the "Existing Azure Pipelines YAML file" to base the pipeline on.
    - Adjust the parameters in the YAML file as needed for your environment (usually only if you chose another name for the variable group than "Datamodel").
 
+> [!NOTE]
+> YAML file contains two properties you may want to change:
+> 1. Name of your ADO wiki repository
+> 2. Name of your variable group
+
 4. **Pipeline Execution**  
    - The first time the pipeline is run you will see a "This pipeline needs permission to access a resource..." click "View" and give it permission to access the variable group you have created.
    - The pipeline will clone the public DataModelViewer repository, build the application, and deploy it using the shared templates.
    - The pipeline is scheduled to run daily at 03:00 AM by default. You can adjust or remove the schedule as needed. You can of course also run the pipeline ad-hoc if you wish.
 
+5. **Possible Additional Steps**
+   - The Build Service needs at least READ-access to the repo (check at: Project Settings > Repositories > 'wiki-repo' > Security)
+     - In the same location also add the pipeline to the "Pipeline permissions" (this will stop any permission prompts on pipeline runs)
+
 ## Notes
 
 - The used Azure subscription must have "Microsoft.Web" registered as a "Resource provider" (namespace) otherwise the deploy will fail.

Website/app/about/page.tsx

@@ -1,12 +1,15 @@
 import { AboutView } from '@/components/aboutview/AboutView';
-import { TouchProvider } from '@/components/ui/hybridtooltop';
-import { Loading } from '@/components/ui/loading';
+import { TouchProvider } from '@/components/shared/ui/hybridtooltop';
+import { Loading } from '@/components/shared/ui/loading';
+import { TooltipProvider } from '@/components/shared/ui/tooltip';
 import React, { Suspense } from 'react'
 
 export default function About() {
   return <Suspense fallback={<Loading />}>
       <TouchProvider>
-        <AboutView />
+        <TooltipProvider>
+          <AboutView />
+        </TooltipProvider>
       </TouchProvider>
     </Suspense>
 }

Website/app/api/markdown/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server'
+import { readFileSync } from "fs";
+import { join } from "path";
+
+export async function GET() {
+    const generatedPath = join(process.cwd(), 'generated', 'Introduction.md');
+    const stubsPath = join(process.cwd(), 'stubs', 'Introduction.md');
+    let fileContent;
+    try {
+        fileContent = readFileSync(generatedPath, 'utf-8');
+    } catch (error) {
+        fileContent = readFileSync(stubsPath, 'utf-8');
+        console.error('Error reading generated wiki file, falling back to stubs:', error);
+    }
+    return NextResponse.json({ fileContent })
+}

Website/app/diagram/page.tsx

@@ -1,14 +1,17 @@
 "use client";
 
-import { TouchProvider } from "@/components/ui/hybridtooltop";
-import { Loading } from "@/components/ui/loading";
-import DiagramView from "@/components/diagram/DiagramView";
+import { TouchProvider } from "@/components/shared/ui/hybridtooltop";
+import { Loading } from "@/components/shared/ui/loading";
+import DiagramView from "@/components/diagramview/DiagramView";
 import { Suspense } from "react";
+import { TooltipProvider } from "@/components/shared/ui/tooltip";
 
 export default function Home() {
   return <Suspense fallback={<Loading />}>
       <TouchProvider>
-        <DiagramView />
+        <TooltipProvider>
+          <DiagramView />
+        </TooltipProvider>
       </TouchProvider>
     </Suspense>
 }

Website/app/login/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { Button } from "@/components/shared/ui/button";
+import { Input } from "@/components/shared/ui/input";
 import { createSession } from "@/lib/session";
 import { useRouter } from "next/navigation";
 import { FormEvent, useState, useEffect } from "react";

Website/app/metadata/page.tsx

@@ -0,0 +1,18 @@
+import { DatamodelView } from "@/components/datamodelview/DatamodelView";
+import { TouchProvider } from "@/components/shared/ui/hybridtooltop";
+import { Loading } from "@/components/shared/ui/loading";
+import { TooltipProvider } from "@/components/shared/ui/tooltip";
+import { DatamodelDataProvider } from "@/contexts/DatamodelDataContext";
+import { Suspense } from "react";
+
+export default function Data() {
+  return <Suspense fallback={<Loading />}>
+      <TouchProvider>
+        <TooltipProvider>
+          <DatamodelDataProvider>
+            <DatamodelView />
+          </DatamodelDataProvider>
+        </TooltipProvider>
+      </TouchProvider>
+    </Suspense>
+}

Website/app/page.tsx

@@ -1,15 +1,15 @@
-import { DatamodelView } from "@/components/datamodelview/DatamodelView";
-import { TouchProvider } from "@/components/ui/hybridtooltop";
-import { Loading } from "@/components/ui/loading";
-import { DatamodelDataProvider } from "@/contexts/DatamodelDataContext";
+import { HomeView } from "@/components/homeview/HomeView";
+import { TouchProvider } from "@/components/shared/ui/hybridtooltop";
+import { Loading } from "@/components/shared/ui/loading";
+import { TooltipProvider } from "@/components/shared/ui/tooltip";
 import { Suspense } from "react";
 
-export default function Home() {
+export default function Data() {
   return <Suspense fallback={<Loading />}>
       <TouchProvider>
-        <DatamodelDataProvider>
-          <DatamodelView />
-        </DatamodelDataProvider>
+        <TooltipProvider>
+            <HomeView />
+        </TooltipProvider>
       </TouchProvider>
     </Suspense>
 }

Website/components/aboutview/AboutView.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useEffect, useState } from 'react'
-import { AppSidebar } from '../AppSidebar'
+import { AppSidebar } from '../shared/AppSidebar'
 import { useSidebarDispatch } from '@/contexts/SidebarContext'
 import { TooltipProvider } from '@radix-ui/react-tooltip'
 import { LastSynched } from '@/generated/Data'
@@ -14,6 +14,7 @@ export const AboutView = ({}: IAboutViewProps) => {
 
   useEffect(() => {
     dispatch({ type: 'SET_ELEMENT', payload: <></> })
+    dispatch({ type: 'SET_SHOW_ELEMENT', payload: false });
     fetch('/api/version')
       .then((res) => res.json())
       .then((data) => setVersion(data.version))

Website/components/datamodelview/Attributes.tsx

@@ -1,23 +1,23 @@
 'use client'
 
 import { EntityType, AttributeType } from "@/lib/Types"
-import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table } from "../ui/table"
-import { Button } from "../ui/button"
+import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table } from "../shared/ui/table"
+import { Button } from "../shared/ui/button"
 import { useState } from "react"
 import { ArrowUpDown, ArrowUp, ArrowDown, EyeOff, Eye, Search, X } from "lucide-react"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./../ui/select"
-import { Input } from "../ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../shared/ui/select"
+import { Input } from "../shared/ui/input"
 import { AttributeDetails } from "./entity/AttributeDetails"
-import BooleanAttribute from "./../attributes/BooleanAttribute"
-import ChoiceAttribute from "./../attributes/ChoiceAttribute"
-import DateTimeAttribute from "./../attributes/DateTimeAttribute"
-import DecimalAttribute from "./../attributes/DecimalAttribute"
-import FileAttribute from "./../attributes/FileAttribute"
-import GenericAttribute from "./../attributes/GenericAttribute"
-import IntegerAttribute from "./../attributes/IntegerAttribute"
-import LookupAttribute from "./../attributes/LookupAttribute"
-import StatusAttribute from "./../attributes/StatusAttribute"
-import StringAttribute from "./../attributes/StringAttribute"
+import BooleanAttribute from "./attributes/BooleanAttribute"
+import ChoiceAttribute from "./attributes/ChoiceAttribute"
+import DateTimeAttribute from "./attributes/DateTimeAttribute"
+import DecimalAttribute from "./attributes/DecimalAttribute"
+import FileAttribute from "./attributes/FileAttribute"
+import GenericAttribute from "./attributes/GenericAttribute"
+import IntegerAttribute from "./attributes/IntegerAttribute"
+import LookupAttribute from "./attributes/LookupAttribute"
+import StatusAttribute from "./attributes/StatusAttribute"
+import StringAttribute from "./attributes/StringAttribute"
 import React from "react"
 import { highlightMatch } from "../datamodelview/List";
 

Website/components/datamodelview/DatamodelView.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { AppSidebar } from "../AppSidebar";
-import { TooltipProvider } from "../ui/tooltip";
+import { AppSidebar } from "../shared/AppSidebar";
+import { TooltipProvider } from "../shared/ui/tooltip";
 import { useSidebarDispatch } from "@/contexts/SidebarContext";
 import { SidebarDatamodelView } from "./SidebarDatamodelView";
 import { DatamodelViewProvider, useDatamodelView, useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext";
@@ -18,6 +18,7 @@ export function DatamodelView() {
 
     useEffect(() => {
         dispatch({ type: "SET_ELEMENT", payload: <SidebarDatamodelView /> });
+        dispatch({ type: 'SET_SHOW_ELEMENT', payload: true });
     }, []);
 
     return (

Website/components/datamodelview/Keys.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import { EntityType } from "@/lib/Types"
-import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table } from "../ui/table"
+import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table } from "../shared/ui/table"
 import { useState } from "react"
 import { ArrowUpDown, ArrowUp, ArrowDown, Search, X } from "lucide-react"
-import { Input } from "../ui/input"
-import { Button } from "../ui/button"
+import { Input } from "../shared/ui/input"
+import { Button } from "../shared/ui/button"
 import React from "react"
 import { highlightMatch } from "../datamodelview/List";
 

Website/components/datamodelview/Relationships.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import { EntityType } from "@/lib/Types"
-import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table } from "../ui/table"
-import { Button } from "../ui/button"
+import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table } from "../shared/ui/table"
+import { Button } from "../shared/ui/button"
 import { CascadeConfiguration } from "./entity/CascadeConfiguration"
 import { useState } from "react"
 import { ArrowUpDown, ArrowUp, ArrowDown, Search, X } from "lucide-react"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
-import { Input } from "../ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../shared/ui/select"
+import { Input } from "../shared/ui/input"
 import { useDatamodelView, useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext"
 import React from "react"
 import { highlightMatch } from "../datamodelview/List";

Website/components/datamodelview/Section.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { EntityType, GroupType } from "@/lib/Types"
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "../shared/ui/tabs"
 import { EntityHeader } from "./entity/EntityHeader"
 import { SecurityRoles } from "./entity/SecurityRoles"
 import Keys from "./Keys"

Website/components/datamodelview/SidebarDatamodelView.tsx

@@ -1,12 +1,12 @@
 import { EntityType, GroupType } from "@/lib/Types";
-import { useTouch } from '../ui/hybridtooltop';
+import { useTouch } from '../shared/ui/hybridtooltop';
 import { useSidebarDispatch } from '@/contexts/SidebarContext';
 import { cn } from "@/lib/utils";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@radix-ui/react-collapsible";
 import { Slot } from "@radix-ui/react-slot";
 import { ExternalLink, Puzzle, Search, X } from "lucide-react";
 import { useState, useEffect } from "react";
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/shared/ui/input";
 import { useDatamodelView, useDatamodelViewDispatch } from "@/contexts/DatamodelViewContext";
 import { useDatamodelData } from "@/contexts/DatamodelDataContext";
 

Website/components/datamodelview/TimeSlicedSearch.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { Input } from '../ui/input';
+import { Input } from '../shared/ui/input';
 import { Search, ChevronUp, ChevronDown, X } from 'lucide-react';
 import { useSidebar } from '@/contexts/SidebarContext';
 import { useIsMobile } from '@/hooks/use-mobile';

Website/components/datamodelview/entity/AttributeDetails.tsx

@@ -2,7 +2,7 @@
 
 import { AttributeType, CalculationMethods, RequiredLevel } from "@/lib/Types";
 import { Calculator, CircleAlert, CirclePlus, Eye, Lock, Sigma, Zap } from "lucide-react";
-import { HybridTooltip, HybridTooltipContent, HybridTooltipTrigger } from "../../ui/hybridtooltop";
+import { HybridTooltip, HybridTooltipContent, HybridTooltipTrigger } from "../../shared/ui/hybridtooltop";
 
 export function AttributeDetails({ attribute }: { attribute: AttributeType }) {
     const details = [];

Website/components/datamodelview/entity/EntityDetails.tsx

@@ -2,7 +2,7 @@
 
 import { EntityType, OwnershipType } from "@/lib/Types";
 import { Eye, ClipboardList, Paperclip, Building, Users } from "lucide-react";
-import { HybridTooltip, HybridTooltipContent, HybridTooltipTrigger } from "../../ui/hybridtooltop";
+import { HybridTooltip, HybridTooltipContent, HybridTooltipTrigger } from "../../shared/ui/hybridtooltop";
 
 type EntityDetailType = {
     icon: JSX.Element;

Website/components/datamodelview/entity/SecurityRoles.tsx

@@ -2,7 +2,7 @@
 
 import { SecurityRole, PrivilegeDepth } from "@/lib/Types";
 import { Ban, User, Users, Boxes, Building2, Minus } from "lucide-react";
-import { HybridTooltip, HybridTooltipContent, HybridTooltipTrigger } from "../../ui/hybridtooltop";
+import { HybridTooltip, HybridTooltipContent, HybridTooltipTrigger } from "../../shared/ui/hybridtooltop";
 
 export function SecurityRoles({ roles }: { roles: SecurityRole[] }) {
     return (

Website/components/diagram/DiagramControls.tsx → Website/components/diagramview/DiagramControls.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/shared/ui/button';
+import { Separator } from '@/components/shared/ui/separator';
 import { 
     ZoomIn, 
     ZoomOut, 

Website/components/diagram/DiagramRenderer.ts → Website/components/diagramview/DiagramRenderer.ts

@@ -1,6 +1,6 @@
 import { dia } from '@joint/core';
 import { AttributeType, EntityType } from '@/lib/Types';
-import { EntityElement } from '@/components/diagram/elements/EntityElement';
+import { EntityElement } from '@/components/diagramview/elements/EntityElement';
 
 export type IPortMap = Record<string, string>;
 

Website/components/diagram/DiagramResetButton.tsx → Website/components/diagramview/DiagramResetButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/shared/ui/button';
 import { RotateCcw } from 'lucide-react';
 
 interface DiagramResetButtonProps {

Website/components/diagram/DiagramView.tsx → Website/components/diagramview/DiagramView.tsx

@@ -3,17 +3,17 @@
 import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react'
 import { dia, util } from '@joint/core'
 import { Groups } from "../../generated/Data"
-import { SquareElement } from '@/components/diagram/elements/SquareElement';
-import { TextElement } from '@/components/diagram/elements/TextElement';
-import { DiagramCanvas } from '@/components/diagram/DiagramCanvas';
-import { ZoomCoordinateIndicator } from '@/components/diagram/ZoomCoordinateIndicator';
-import { EntityActionsPane, LinkPropertiesPane, LinkProperties } from '@/components/diagram/panes';
+import { SquareElement } from '@/components/diagramview/elements/SquareElement';
+import { TextElement } from '@/components/diagramview/elements/TextElement';
+import { DiagramCanvas } from '@/components/diagramview/DiagramCanvas';
+import { ZoomCoordinateIndicator } from '@/components/diagramview/ZoomCoordinateIndicator';
+import { EntityActionsPane, LinkPropertiesPane, LinkProperties } from '@/components/diagramview/panes';
 import { entityStyleManager } from '@/lib/entity-styling';
-import { SquarePropertiesPane } from '@/components/diagram/panes/SquarePropertiesPane';
-import { TextPropertiesPane } from '@/components/diagram/panes/TextPropertiesPane';
-import { calculateGridLayout, getDefaultLayoutOptions, calculateEntityHeight, estimateEntityDimensions } from '@/components/diagram/GridLayoutManager';
+import { SquarePropertiesPane } from '@/components/diagramview/panes/SquarePropertiesPane';
+import { TextPropertiesPane } from '@/components/diagramview/panes/TextPropertiesPane';
+import { calculateGridLayout, getDefaultLayoutOptions, calculateEntityHeight, estimateEntityDimensions } from '@/components/diagramview/GridLayoutManager';
 import { AttributeType } from '@/lib/Types';
-import { AppSidebar } from '../AppSidebar';
+import { AppSidebar } from '../shared/AppSidebar';
 import { DiagramViewProvider, useDiagramViewContext } from '@/contexts/DiagramViewContext';
 import { SidebarDiagramView } from './SidebarDiagramView';
 import { useSidebarDispatch } from '@/contexts/SidebarContext';
@@ -877,6 +877,7 @@ export default function DiagramView({ }: IDiagramView) {
 
     useEffect(() => {
         dispatch({ type: "SET_ELEMENT", payload: <SidebarDiagramView /> })
+        dispatch({ type: 'SET_SHOW_ELEMENT', payload: true });
     }, [])
 
     return (

Website/components/diagram/GridLayoutManager.ts → Website/components/diagramview/GridLayoutManager.ts

@@ -1,5 +1,5 @@
 import { EntityType } from '@/lib/Types';
-import { EntityElement } from '@/components/diagram/elements/EntityElement';
+import { EntityElement } from '@/components/diagramview/elements/EntityElement';
 
 export type DiagramType = 'simple' | 'detailed';
 

Website/components/diagram/GroupSelector.tsx → Website/components/diagramview/GroupSelector.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GroupType } from '@/lib/Types';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/shared/ui/button';
+import { Separator } from '@/components/shared/ui/separator';
 import { FolderOpen, Folder } from 'lucide-react';
 import { cn } from '@/lib/utils';