create-hhmi-example 1.0.0

package/template/hhmiexample.client/src/pages/Example/ExampleHomePage.tsx

@@ -0,0 +1,23 @@
+import { makeStyles, Text } from "@fluentui/react-components";
+
+const useStyles = makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px",
+  },
+  title: {
+    fontWeight: "600",
+  },
+});
+
+export default function ExampleHomePage() {
+  const styles = useStyles();
+  return (
+    <div className={styles.container}>
+      <Text className={styles.title} as="h1">Home</Text>
+      <Text>This is the default module home. Replace with your own content.</Text>
+    </div>
+  );
+}

package/template/hhmiexample.client/src/pages/LandingPage.tsx

@@ -0,0 +1,36 @@
+import { useNavigate } from "react-router";
+import { type IHHMIHomeIcon } from "../components/Global/HHMIControls";
+import { HHMIHomeIcons } from "../components/Global/HHMIControls";
+import { makeStyles } from "@fluentui/react-components";
+import { ContentViewRegular } from '@fluentui/react-icons';
+import type { IExampleUser } from "../types/IExampleUser";
+
+const useStyles = makeStyles({
+  title: {
+    textAlign: 'center',
+    margin: '40px 0'
+  }
+});
+
+export default function LandingPage(props: { currentUser: IExampleUser }) {
+  console.log("LandingPage props.currentUser", props.currentUser);
+
+  const styles = useStyles();
+  const navigate = useNavigate();
+
+  const icons: IHHMIHomeIcon[] = [
+    {
+      key: "Example",
+      text: 'Example',
+      icon: <div style={{ paddingBottom: '10px' }}><ContentViewRegular /></div>,
+      onClick: () => { navigate("/example"); }
+    }
+  ];
+
+  return (
+    <div>
+      <h2 className={styles.title}>Welcome to the Example App</h2>
+      <HHMIHomeIcons icons={icons} />
+    </div>
+  );
+}

package/template/hhmiexample.client/src/pages/NotAuthorizedPage.tsx

@@ -0,0 +1,18 @@
+import { makeStyles } from "@fluentui/react-components";
+
+const useStyles = makeStyles({
+  notAuthorizedContainer: {
+    padding: '40px',
+    height: '100vh',
+    width: '100vw'
+  }
+});
+
+export default function NotAuthorizedPage() {
+  const styles = useStyles();
+  return (
+    <div className={styles.notAuthorizedContainer}>
+      <p>You do not have access to this site. Please contact the administrator to request access.</p>
+    </div>
+  );
+}

package/template/hhmiexample.client/src/services/AppService.ts

@@ -0,0 +1,297 @@
+//import * as aiHelper from './AppInsights';
+import type { IExampleUser, IExampleUserSettings } from "../types/IExampleUser";
+
+export async function AuthMe() {
+  const authMeUrl = "/.auth/me";
+  const authMe = await fetch(authMeUrl, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*'
+    },
+    credentials: 'same-origin'
+  });
+  return authMe;
+}
+
+export async function AuthRefresh() {
+  const refreshUrl = "/.auth/refresh";
+  const refreshResult = await fetch(refreshUrl, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*'
+    },
+    credentials: 'same-origin'
+  });
+  return refreshResult;
+}
+
+export async function getADUser(): Promise<IAuthMeResponse | null> {
+  try {
+    const authMeBlob1 = await AuthMe();
+    console.log("authMeBlob1", authMeBlob1);
+
+    const refreshResult = await AuthRefresh();
+    console.log("refresh-result", refreshResult);
+
+    const authMeBlob2 = await AuthMe();
+    console.log("authMeBlob2", authMeBlob2);
+
+    let authMe: IAuthMeResponse | null = null;
+    const authMeResponse: IAuthMeResponse[] = await authMeBlob2.json();
+
+    if (authMeResponse.length > 0) {
+      authMe = authMeResponse[0];
+      window.sessionStorage.setItem("AUTHME-IDTOKEN", authMe.id_token);
+      window.sessionStorage.setItem("AUTHME-ACCESSTOKEN", authMe.access_token);
+    }
+
+    return authMe;
+  } catch (error) {
+    console.log("Authentication error:", error);
+    if (process.env.NODE_ENV === 'production') {
+      console.log("Production environment - redirecting to login");
+      window.location.href = "/.auth/login/aad?post_login_redirect_url=" + window.location.href;
+    } else {
+      console.log("Development environment - continuing without authentication");
+    }
+    return null;
+  }
+}
+
+export async function HeartBeat(): Promise<string> {
+  return fetch("/api/HeartBeat", {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    }
+  }).then(blob => blob.text()).then(data => {
+    return data;
+  }).catch((e) => {
+    console.log(e);
+    return e;
+  });
+}
+
+export async function getCollabEnvironment(): Promise<string> {
+  return fetch("/api/Environment", {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    }
+  }).then(blob => blob.text()).then(env => {
+    console.log("getCollabEnvironment - " + env);
+    return env;
+  });
+}
+
+export async function syncData<T>(params: ISyncData): Promise<T | T[]> {
+  return fetch("/api/SyncData", {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Access-Control-Allow-Origin': '*',
+    },
+    body: JSON.stringify(params)
+  }).then(blob => blob.json())
+    .then(data => {
+      console.log("syncData response", data);
+      if (params.IsArray === false) {
+        if (data.singleOutput) {
+          return data.singleOutput as T;
+        }
+      } else {
+        return data.arrayOutput as T[];
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+      return e;
+    });
+}
+
+export async function getExampleUser(userId: string): Promise<IExampleUser | null> {
+  const getUserParams: ISyncData = {
+    StoredProcedure: "example.p_Get_Example_User",
+    IsArray: false,
+    Parameters: [
+      { ParameterName: "@UserId", ParameterValue: userId }
+    ]
+  };
+
+  return syncData<IExampleUser>(getUserParams).then((user) => {
+    console.log("syncData - getExampleUser", user);
+
+    if (user && typeof user === 'object' && !Array.isArray(user)) {
+      const hasValidUserId = user.UserId && typeof user.UserId === 'string' && user.UserId.trim() !== '';
+
+      if (hasValidUserId) {
+        return user as IExampleUser;
+      }
+    }
+
+    return null;
+  });
+}
+
+export async function manageExampleUserSettings(user: IExampleUserSettings, currentUserId: string): Promise<IExampleUserSettings> {
+  const userSettings = await syncData<IExampleUserSettings>({
+    StoredProcedure: "example.p_Example_Manage_UserSettings",
+    IsArray: false,
+    Parameters: [
+      { ParameterName: "@UserId", ParameterValue: user.UserId },
+      { ParameterName: "@IsDarkTheme", ParameterValue: user.IsDarkTheme },
+      { ParameterName: "@EditorId", ParameterValue: currentUserId }
+    ]
+  });
+
+  console.log("syncData - manageExampleUserSettings", userSettings);
+
+  return userSettings as IExampleUserSettings;
+}
+
+export interface IPutFileResponse {
+  azureStorageContainer: string;
+  azureStorageFileName: string;
+  fileExtension: string;
+  fileId: string;
+};
+
+export async function putFile(content: string, fileExtension: string, fileId: string): Promise<IPutFileResponse> {
+  const url: string = "/api/SyncFiles";
+  const blob = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      "Access-Control-Allow-Origin": "*",
+    },
+    body: JSON.stringify({ Content: content })
+  });
+  const data = await blob.json();
+  console.log("putFile returned", data.singleOutput);
+  data.singleOutput.fileExtension = fileExtension;
+  data.singleOutput.fileId = fileId;
+  return data.singleOutput;
+}
+
+export async function searchDistributionLists(mail: string): Promise<IDistributionList[]> {
+  const accessToken = window.sessionStorage.getItem("AUTHME-ACCESSTOKEN");
+  if (mail !== null && mail.trim().length > 0 && accessToken !== null) {
+    const url = `https://graph.microsoft.com/v1.0/groups?$select=mailEnabled,mail,displayName,description&$filter=mailEnabled eq true and (startsWith(displayName, '${mail}') or startsWith(mail, '${mail}'))`;
+    console.log("Get Users URL", url);
+    return fetch(url, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Access-Control-Allow-Origin': '*',
+        'Authorization': 'Bearer ' + accessToken,
+      }
+    })
+      .then(blob => blob.json())
+      .then(data => {
+        const lists: IDistributionList[] = data.value;
+        console.log("searchDistributionLists returned Lists", lists);
+        if (lists === null || lists === undefined) {
+          return [];
+        }
+        return lists;
+      })
+      .catch(e => {
+        console.log(e);
+        return e;
+      });
+  }
+  return [];
+}
+
+/** Stub for template: returns empty array. Replace with real implementation (e.g. syncData to dbo.p_SearchForWorker) per project. */
+export async function searchUserByEmailWDHCM(_filter: string): Promise<IUserQueryResult[]> {
+  return [];
+}
+
+/** Stub for template: returns empty array. Replace with real implementation per project if needed. */
+export async function getAllActiveJaneliaLabs(): Promise<IJaneliaLabSupOrg[]> {
+  return [];
+}
+
+export interface IJaneliaLabSupOrg {
+  SupOrgCode: string;
+  LocationCode: string;
+  SupOrgName: string;
+  SupOrgSubType: string;
+  SuperiorSupOrgCode: string;
+  LabCoordinatorId: string;
+}
+
+export interface IAuthMeResponse {
+  access_token: string;
+  expires_on: string;
+  id_token: string;
+  provider_name: string;
+  refresh_token: string;
+  user_claims: IAuthMeUserClaim[];
+  user_id: string;
+}
+
+interface IAuthMeUserClaim {
+  typ: string;
+  val: string;
+}
+
+export interface IDistributionList {
+  description: string;
+  displayName: string;
+  mail: string;
+  mailEnabled: boolean;
+}
+
+export interface ISyncData {
+  StoredProcedure: string;
+  IsArray: boolean;
+  Parameters: ISyncDataParameter[]
+}
+
+export interface ISyncDataParameter {
+  ParameterName: string;
+  ParameterValue: string | number | Date | boolean | null | undefined;
+}
+
+export interface IWDHCMSearchUser {
+  Building: string;
+  BusinessTitle: string;
+  Email: string;
+  EmployeeId: string;
+  LocationCode: string;
+  LocationName: string;
+  NameFirstPreferred: string;
+  NameLastPreferred: string;
+  NameMiddlePreferred: string;
+  Phone1: string;
+  Phone1Type: string;
+  Phone2: string;
+  Phone2Type: string;
+  PhotoURL: string;
+  SecondaryLocation: string;
+  SecondaryWorkspace: string;
+  UserIdO365: string;
+  WorkSpaceName: string;
+}
+
+export interface IUserQueryResult {
+  displayName: string;
+  givenName: string;
+  id: string;
+  jobTitle: string;
+  mail: string;
+  officeLocation: string;
+  surname: string;
+  userPrincipalName: string;
+  photoURL: string;
+}
+
+export interface IArrayOutput {
+  jsonData: string;
+}

package/template/hhmiexample.client/src/types/IExampleUser.ts

@@ -0,0 +1,19 @@
+export interface IExampleUserSettings {
+    UserId: string;
+    IsDarkTheme: boolean;
+}
+
+export interface IExampleUser {
+    UserId: string;
+    Name: string;
+    Title: string;
+    Email: string;
+    SupOrgCode: string;
+    IsEnabled: boolean;
+    IsDeveloper: boolean;
+    IsAppManager: boolean;
+    IsPowerUser: boolean;
+    IsSuperUser: boolean;
+    PhotoURL: string;
+    IsDarkTheme: boolean;
+}

package/template/hhmiexample.client/src/types/IMessageLocation.ts

@@ -0,0 +1,8 @@
+const MessageLocation = {
+    Grid: "Grid",
+    Drawer: "Drawer",
+} as const;
+
+type MessageLocation = (typeof MessageLocation)[keyof typeof MessageLocation];
+
+export { MessageLocation };

package/template/hhmiexample.client/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="react" />
+/// <reference types="react-dom" />

package/template/hhmiexample.client/tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["react", "react-dom", "vite/client", "vite-plugin-svgr/client", "node"],
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/template/hhmiexample.client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/hhmiexample.client/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/hhmiexample.client/vite.config.ts

@@ -0,0 +1,61 @@
+import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+import plugin from '@vitejs/plugin-react';
+import fs from 'fs';
+import path from 'path';
+import child_process from 'child_process';
+import { env } from 'process';
+import svgr from 'vite-plugin-svgr';
+
+const baseFolder =
+    env.APPDATA !== undefined && env.APPDATA !== ''
+        ? `${env.APPDATA}/ASP.NET/https`
+        : `${env.HOME}/.aspnet/https`;
+
+const certificateName = "hhmiexample.client";
+const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
+const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
+
+if (!fs.existsSync(baseFolder)) {
+    fs.mkdirSync(baseFolder, { recursive: true });
+}
+
+if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
+    if (0 !== child_process.spawnSync('dotnet', [
+        'dev-certs',
+        'https',
+        '--export-path',
+        certFilePath,
+        '--format',
+        'Pem',
+        '--no-password',
+    ], { stdio: 'inherit', }).status) {
+        throw new Error("Could not create certificate.");
+    }
+}
+
+const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
+    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7289';
+
+export default defineConfig({
+    plugins: [plugin(), svgr()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+    },
+    server: {
+        proxy: {
+            '^/weatherforecast': {
+                target,
+                secure: false
+            }
+        },
+        port: parseInt(env.DEV_SERVER_PORT || '61636'),
+        https: {
+            key: fs.readFileSync(keyFilePath),
+            cert: fs.readFileSync(certFilePath),
+        }
+    }
+})