fix: transpile patternfly icons package

fix: typo in start.sh script fix: update rekor server endpoint fix: make value dynamic fix: use runtimeConfig to resolve endpoint
securesign · Mar 15, 2024 · 589bbde · 589bbde
1 parent 4953764
commit 589bbde
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 23 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,25 +1,25 @@
 FROM registry.access.redhat.com/ubi9/nodejs-18@sha256:773645c3eae02529e09c04a843a0c6783de45b084b325685b043b7818c7a8bf6 as Build
 #
 COPY . .
-COPY start.sh /start.sh
 USER root
+ENV NODE_ENV production
 EXPOSE 3000
 RUN echo "export PATH=${PATH}:$HOME/node_modules/.bin" >> ~/.bashrc && \
     npm install --ignore-scripts && \
     npm run build && \
     chmod -R 777 /opt/app-root/src/.npm && \
-    npm cache clean --force && \
-    chmod +x /start.sh
+    echo "NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN = ${NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN}" && \
+    npm cache clean --force
 USER 1001
-CMD ["/bin/sh", "/start.sh"]
+CMD ["node_modules/.bin/next", "start"]
 
 LABEL \
       com.redhat.component="trusted-artifact-signer-rekor-ui" \
       name="trusted-artifact-signer-rekor-ui" \
       version="0.0.1" \
       summary="User Interface for checking Rekor Entries" \
-      description="Provides a user interface for checking Rekor Entries through an Node App" \
-      io.k8s.description="Provides a user interface for checking Rekor Entries through an Node App" \
-      io.k8s.display-name="Provides a user interface for checking Rekor Entries through an Node App" \
+      description="Provides a user interface for checking Rekor Entries through a Node App" \
+      io.k8s.description="Provides a user interface for checking Rekor Entries through a Node App" \
+      io.k8s.display-name="Provides a user interface for checking Rekor Entries through a Node App" \
       io.openshift.tags="rekor-ui, rekor, cli, rhtas, trusted, artifact, signer, sigstore" \
       maintainer="[email protected]"
diff --git a/next.config.js b/next.config.js
@@ -1,12 +1,19 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-	modularizeImports: {
-		"@patternfly/react-icons": {
-			transform: "@patternfly/react-icons/{{member}}",
-		},
-	},
 	reactStrictMode: true,
-	transpilePackages: ["@patternfly/react-core", "@patternfly/react-styles"],
+	publicRuntimeConfig: {
+		// remove private env variables
+		processEnv: Object.fromEntries(
+			Object.entries(process.env).filter(([key]) =>
+				key.includes("NEXT_PUBLIC_"),
+			),
+		),
+	},
+	transpilePackages: [
+		"@patternfly/react-core",
+		"@patternfly/react-icons",
+		"@patternfly/react-styles",
+	],
 };
 
 module.exports = nextConfig;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,10 +1,30 @@
 import Document, { Head, Html, Main, NextScript } from "next/document";
 
+const nextPublicENV = Object.keys(process.env)
+	.filter(key => key.startsWith("NEXT_PUBLIC_"))
+	.reduce(
+		(env, key) => {
+			env[key] = process.env[key] ?? "";
+			return env;
+		},
+		{} as { [key: string]: string },
+	);
+
 class AppDocument extends Document {
 	render() {
 		return (
 			<Html lang="en">
 				<Head></Head>
+				<script
+					dangerouslySetInnerHTML={{
+						__html: `
+                        console.table(${JSON.stringify(nextPublicENV)});
+		        window.process = window.process || {};
+		        window.process.env = window.process.env || {};
+			Object.assign(window.process.env, ${JSON.stringify(nextPublicENV)});
+                  `,
+					}}
+				></script>
 				<body>
 					<Main />
 					<NextScript />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -18,7 +18,7 @@ import {
 import { RekorClientProvider } from "../modules/api/context";
 import { Explorer } from "../modules/components/Explorer";
 import { Settings } from "../modules/components/Settings";
-import { CogIcon, GithubIcon } from "@patternfly/react-icons";
+import { CogIcon } from "@patternfly/react-icons";
 import Link from "next/link";
 import Image from "next/image";
 import NOSSRWrapper from "../modules/utils/noSSR";
@@ -112,3 +112,12 @@ const PageComponent: NextPage = () => (
 	</RekorClientProvider>
 );
 export default PageComponent;
+
+export async function getServerSideProps() {
+	return {
+		props: {
+			NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN:
+				process.env.NEXT_PUBLIC_REKOR_DEFAULT_DOMAIN,
+		}, // will be passed to the page component as props
+	};
+}
diff --git a/start.sh b/start.sh