App shell for Service Account Dashboard

examples/Web Apps/Framework Examples/React/.gitignore

@@ -0,0 +1 @@
+.vite/

examples/Web Apps/Framework Examples/React/ServiceAccountManager/.env.development

@@ -0,0 +1,6 @@
+# NOTE: This is a tracked file. 
+#If adding sensitive data, add this file to .gitignore and make an example file
+
+# Development should use a locally running server to proxy to the api domain 
+# (e.g. https://demo-api.lifecyclesolutions.ni.com)
+VITE_SYSTEMLINK_SERVER_URL=http://localhost:4000/apiProxy 

examples/Web Apps/Framework Examples/React/ServiceAccountManager/.env.production

@@ -0,0 +1,10 @@
+# NOTE: This is a tracked file. 
+# If adding sensitive data, add this file to .gitignore and make an example file
+
+
+# Production should use the actual website domain of the SystemLink environment that is hosting it
+# e.g. https://demo.lifecyclesolutions.ni.com 
+
+# Empty url will result in the domain shown in browser
+VITE_SYSTEMLINK_SERVER_URL="" # Keep blank
+

examples/Web Apps/Framework Examples/React/ServiceAccountManager/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/Web Apps/Framework Examples/React/ServiceAccountManager/README.md

@@ -0,0 +1,96 @@
+# Service Account Manager
+
+**This application is still under development!**
+
+A React + Vite application for managing service account users.
+
+## Prerequisites
+
+- Node.js
+- npm
+- Access to a SystemLink environment
+- A SystemLink API key (for local development through the API proxy)
+
+## Why a local proxy is required
+
+When running this app locally, browser requests to SystemLink API domains are
+blocked by CORS. Use the API Service Proxy to forward requests from localhost to
+your SystemLink API server.
+
+## Run Locally
+
+### 1. Start the API proxy
+
+From `examples/Web Apps/Dev Tools/ApiServiceProxy`:
+
+```bash
+npm ci
+```
+
+Create `proxyConfig.js` from `proxyConfig.example.js`, then set:
+
+- SystemLink API URL (for example, `https://demo-api.lifecyclesolutions.ni.com`)
+- API key
+
+Start proxy:
+
+```bash
+npm run start
+```
+
+The proxy runs at `http://localhost:4000`.
+
+### 2. Configure this app for local development
+
+In this project folder (`ServiceHealthDashboard`), `.env.development` should
+point to the proxy:
+
+```bash
+VITE_SYSTEMLINK_SERVER_URL=http://localhost:4000/apiProxy
+```
+
+This value is already configured in the repo.
+
+### 3. Install and run the app
+
+From `examples/Web Applications/Framework Examples/React/ServiceHealthDashboard`:
+
+```bash
+npm ci
+npm run dev
+```
+
+Open the URL printed by Vite (typically `http://localhost:5173`).
+
+## Useful Commands
+
+From this project folder:
+
+```bash
+npm run dev      # Start dev server
+npm run build    # Build production assets into dist/
+npm run preview  # Preview the production build locally
+npm run lint     # Run ESLint
+npm run lint:fix # Run ESLint and auto-fix issues
+```
+
+## Deployment using the SystemLink CLI
+
+Prereq:
+**[Install](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)**
+the SystemLink CLI to your machine and
+**[login](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)**
+to the CLI.
+
+1. `cd` into the project folder and run `npm run build` to create `dist/` folder
+2. Create .nipkg file using `slcli webapp pack dist/`
+3. Publish the webapp with
+   `slcli webapp publish dist.nipkg --name NAME --workspace WORKSPACE`. Specify
+   the webapp NAME and the user WORKSPACE
+4. After any changes are made, repack the webapp (step 2) and update the webapp
+   with `slcli webapp publish dist.nipkg --id ID`. (Use `slcli webapp list` to
+   get the ID)
+
+For more details on
+[WebApp Management](https://github.com/ni-kismet/systemlink-cli?tab=readme-ov-file#installation)
+see the SL-CLI docs

examples/Web Apps/Framework Examples/React/ServiceAccountManager/eslint.config.js

@@ -0,0 +1,82 @@
+import { defineConfig } from 'eslint/config';
+import react from 'eslint-plugin-react';
+
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+
+import { javascriptConfig } from '@ni/eslint-config-javascript';
+import { typescriptConfig } from '@ni/eslint-config-typescript';
+
+export default defineConfig([
+    {
+        ignores: ['dist/**'],
+    },
+    {
+        files: ['**/*.ts', '**/*.tsx'],
+        plugins: {
+            react,
+            'react-refresh': reactRefresh,
+            'react-hooks': reactHooks,
+        },
+        extends: [
+            typescriptConfig,
+            react.configs.flat.recommended,
+            react.configs.flat['jsx-runtime'],
+            reactHooks.configs.flat.recommended,
+        ],
+        languageOptions: {
+            parserOptions: {
+                project: './tsconfig.app.json',
+                tsconfigRootDir: import.meta.dirname,
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        rules: {
+            // The React components should use PascalCase
+            '@typescript-eslint/naming-convention': [
+                'error',
+                {
+                    selector: 'variable',
+                    format: ['camelCase', 'PascalCase'],
+                },
+            ],
+            'react-refresh/only-export-components': [
+                'error',
+                { allowConstantExport: true },
+            ],
+            // "@typescript-eslint/strict-boolean-expressions": "off",
+            // "no-alert": "off",
+        },
+    },
+
+    {
+        files: ['vite.config.ts'],
+        extends: [typescriptConfig],
+        languageOptions: {
+            parserOptions: {
+                project: './tsconfig.node.json',
+                tsconfigRootDir: import.meta.dirname.pathname,
+            },
+        },
+        rules: {
+            // Configuration scripts will not be in published package and are allowed to use devDependencies
+            'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+            // Build scripts should give verbose logging
+            'no-console': 'off',
+            // Rollup config files use default exports
+            'import/no-default-export': 'off',
+        },
+    },
+
+    {
+        files: ['**/*.js'],
+        extends: [javascriptConfig],
+    },
+]);

examples/Web Apps/Framework Examples/React/ServiceAccountManager/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Service Account Manager</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app/main.tsx"></script>
+  </body>
+</html>