Migrate common library dependency to kubeflow/notebooks

.github/workflows/test-node.yaml

@@ -40,8 +40,8 @@ jobs:
         - name: Fetch Kubeflow and Build Common Library
           run: |
             COMMIT=$(cat frontend/COMMIT)
-            cd /tmp && git clone https://github.com/kubeflow/kubeflow.git
-            cd kubeflow
+            cd /tmp && git clone https://github.com/kubeflow/notebooks.git
+            cd notebooks
             git checkout $COMMIT
             cd components/crud-web-apps/common/frontend/kubeflow-common-lib
             npm ci --no-audit
@@ -54,10 +54,10 @@ jobs:
             npm link kubeflow
             # Copy styles from kubeflow source to local styles directory
             mkdir -p ./src/styles/
-            cp -r /tmp/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./src/styles/
+            cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./src/styles/
             # Also copy to node_modules for the copyCSS script
             mkdir -p ./node_modules/kubeflow/styles/
-            cp -r /tmp/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./node_modules/kubeflow/styles/
+            cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./node_modules/kubeflow/styles/
         - name: Run Unit Tests
           run: |
             cd frontend
@@ -77,8 +77,8 @@ jobs:
         - name: Fetch Kubeflow and Build Common Library
           run: |
             COMMIT=$(cat frontend/COMMIT)
-            cd /tmp && git clone https://github.com/kubeflow/kubeflow.git
-            cd kubeflow
+            cd /tmp && git clone https://github.com/kubeflow/notebooks.git
+            cd notebooks
             git checkout $COMMIT
             cd components/crud-web-apps/common/frontend/kubeflow-common-lib
             npm ci --no-audit
@@ -91,13 +91,13 @@ jobs:
             npm link kubeflow
             # Copy styles from kubeflow source to local styles directory
             mkdir -p ./src/styles/
-            cp -r /tmp/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./src/styles/
+            cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./src/styles/
             # Also copy to node_modules for the copyCSS script
             mkdir -p ./node_modules/kubeflow/styles/
-            cp -r /tmp/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./node_modules/kubeflow/styles/
+            cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/styles/* ./node_modules/kubeflow/styles/
             # Copy assets as well
             mkdir -p ./node_modules/kubeflow/assets/
-            cp -r /tmp/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/* ./node_modules/kubeflow/assets/
+            cp -r /tmp/notebooks/components/crud-web-apps/common/frontend/kubeflow-common-lib/projects/kubeflow/src/assets/* ./node_modules/kubeflow/assets/
         - name: Run E2E Tests
           run: |
             cd frontend

.gitignore

@@ -22,3 +22,7 @@ Sessionx.vim
 tags
 # Persistent undo
 [._]*.un~
+
+.angular
+web-application-development
+frontend/src/styles/

Dockerfile

@@ -5,7 +5,7 @@ RUN apt-get update && apt-get install git -y
 
 WORKDIR /kf
 COPY ./frontend/COMMIT ./
-RUN git clone https://github.com/kubeflow/kubeflow.git && \
+RUN git clone https://github.com/kubeflow/notebooks.git kubeflow && \
     COMMIT=$(cat ./COMMIT) && \
     cd kubeflow && \
     git checkout $COMMIT

README.md

@@ -143,7 +143,7 @@ Expected response:
 
 The frontend is build with [Angular](https://angular.io/) and the backend is written with the Python [Flask](https://flask.palletsprojects.com/en/1.1.x/) framework.
 
-This web application is utilizing common code from the [kubeflow/kubeflow](https://github.com/kubeflow/kubeflow/tree/master/components/crud-web-apps/common) repository. We want to enforce the same user experience across our different Kubeflow web applications and also keep them in the same development state. In order to achieve this the applications will be using this shared common code.
+This web application is utilizing common code from the [kubeflow/notebooks](https://github.com/kubeflow/notebooks/tree/master/components/crud-web-apps/common) repository. We want to enforce the same user experience across our different Kubeflow web applications and also keep them in the same development state. In order to achieve this the applications will be using this shared common code.
 
 This will require us to fetch this common code when we want to either build the application locally or in an OCI container image.
 
@@ -169,8 +169,8 @@ cd $KSERVE_MODELS_WEB_APPLICATION_REPOSITORY/frontend
 # Setup dependencies and build common library
 make setup
 
-# Optional: Specify custom Kubeflow repository path. Default: `../../kubeflow` (relative to the frontend directory)
-# make setup KF_REPO=/path/to/kubeflow
+# Optional: Specify custom Kubeflow repository path. Default: `../../notebooks` (relative to the frontend directory)
+# make setup KF_REPO=/path/to/notebooks
 # Clean Command: Provides a make clean target to remove node_modules
 # make clean
 
@@ -211,7 +211,7 @@ python3.12 -m venv web-application-development
 source web-application-development/bin/activate
 
 # install the dependencies on the activated virtual environment
-KUBEFLOW_REPOSITORY="/path/to/kubeflow/kubeflow" make -C backend install-deps
+KUBEFLOW_REPOSITORY="/path/to/kubeflow/notebooks" make -C backend install-deps
 
 # run the backend
 make -C backend run-dev

backend/Makefile

@@ -1,9 +1,9 @@
 SHELL=bash
 
 # In order to develop locally you will need to use common python code
-# from the kubeflow/kubeflow repo. You can clone the repo in a specific
+# from the kubeflow/notebooks repo. You can clone the repo in a specific
 # folder and use the following ENV Var to configure it.
-KUBEFLOW_REPO ?= /tmp/kubeflow
+KUBEFLOW_REPO ?= $(or $(KUBEFLOW_REPOSITORY),/tmp/notebooks)
 COMMON_BACKEND_DIR ?= ${KUBEFLOW_REPO}/components/crud-web-apps/common/backend
 
 install-deps:

frontend/COMMIT

@@ -1 +1 @@
-78969ee
+0b835a7848ddcadf2c920a8e14aeae121ac982d9

frontend/Makefile

@@ -4,8 +4,8 @@
 #   make setup KUBEFLOW_REPOSITORY=/path/to/kubeflow
 #   make setup KF_REPO=/path/to/kubeflow
 
-KUBEFLOW_REPOSITORY ?= $(or $(KF_REPO),../../kubeflow)
-KUBEFLOW_REMOTE ?= https://github.com/kubeflow/kubeflow
+KUBEFLOW_REPOSITORY ?= $(or $(KF_REPO),../../notebooks)
+KUBEFLOW_REMOTE ?= https://github.com/kubeflow/notebooks
 
 COMMIT_FILE := ./COMMIT
 COMMON_LIBRARY_DIRECTORY := $(KUBEFLOW_REPOSITORY)/components/crud-web-apps/common/frontend/kubeflow-common-lib
@@ -22,27 +22,24 @@ setup:
 	    echo "Cloning $(KUBEFLOW_REMOTE) into $(KUBEFLOW_REPOSITORY)"; \
 	    git clone "$(KUBEFLOW_REMOTE)" "$(KUBEFLOW_REPOSITORY)"; \
 	fi
+	@echo ">> Checking repository status"
+	@TARGET_COMMIT=$$(cat "$(COMMIT_FILE)"); \
+	cd "$(KUBEFLOW_REPOSITORY)" && \
+	git fetch "$(KUBEFLOW_REMOTE)" notebooks-v1 && \
+	git checkout "$$TARGET_COMMIT"
 	@if [ ! -d "$(COMMON_LIBRARY_DIRECTORY)" ]; then \
 	    echo "Expected common lib at: $(COMMON_LIBRARY_DIRECTORY)"; \
 	    echo "Verify KUBEFLOW_REPOSITORY is correct."; \
 	    exit 1; \
 	fi
-	@echo ">> Checking kubeflow-common-lib status"
-	@TARGET_COMMIT=$$(cat "$(COMMIT_FILE)"); \
-	if [ -d "$(COMMON_LIBRARY_DISTRIBUTION)" ] && [ "$$(cd "$(COMMON_LIBRARY_DIRECTORY)" && git rev-parse HEAD)" = "$$(cd "$(COMMON_LIBRARY_DIRECTORY)" && git rev-parse "$$TARGET_COMMIT")" ]; then \
-	    echo ">> kubeflow-common-library is up-to-date at commit $$TARGET_COMMIT; skipping build"; \
-	else \
-	    echo ">> Building kubeflow-common-library at commit $$TARGET_COMMIT"; \
-	    cd "$(COMMON_LIBRARY_DIRECTORY)" && \
-	    git fetch --all --tags && \
-	    git checkout "$$TARGET_COMMIT" && \
-	    npm install && \
-	    npm run build; \
-	fi
-	@cd "$(COMMON_LIBRARY_DIRECTORY)" && cd dist/kubeflow && npm link
+	@echo ">> Building kubeflow-common-library"
+	@cd "$(COMMON_LIBRARY_DIRECTORY)" && \
+	npm install && \
+	npm run build
 	@echo ">> Installing frontend dependencies and linking kubeflow-common-library"
 	@npm install
-	@npm link kubeflow
+	@rm -rf node_modules/kubeflow
+	@ln -s "$$(readlink -f $(COMMON_LIBRARY_DISTRIBUTION))" node_modules/kubeflow
 	@echo "✔ Setup complete. Now run: npm run build:watch"
 
 clean: