Add Login page (#22)

jfrog · Jun 28, 2023 · a39be82 · a39be82
1 parent 2f9788b
commit a39be82
Show file tree

Hide file tree

Showing 65 changed files with 2,781 additions and 173 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -172,10 +172,6 @@
 		"prefer-rest-params": "error",
 		"prefer-spread": "error",
 		"prefer-template": "error",
-		"quotes": [
-			"error",
-			"single"
-		],
 		"rest-spread-spacing": [
 			"error",
 			"never"

diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,7 @@
 </head>
 
 <body>
+  <div id="overlay"></div>
   <div id="root"></div>
 </body>
 

diff --git a/src/App.module.css b/src/App.module.css
@@ -5,11 +5,17 @@
 	height: calc(100vh);
 }
 
-.App-body {
+.AppBody {
 	color: white;
 	padding: 15px;
 }
 
+.loading {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+}
+
 * {
 	margin: 0;
 	padding: 0;

diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,19 +1,27 @@
 import { render, screen } from '@testing-library/react'
 import App from './App'
-import { webviewEventType } from './api/webviewEvent'
-import { IDependencyPage, IEosPage, IIaCPage, ISecretsPage, PageType } from './model/webviewPages'
+import {
+	IDependencyPage,
+	IEosPage,
+	IIaCPage,
+	ILoginPage,
+	ISecretsPage,
+	PageType
+} from './model/webviewPages'
 import { ISeverity } from './model/severity'
 import { IImpactGraph } from './model/impactGraph'
 import { sendWebviewPage } from './utils/testUtils'
 import { IAnalysisStep } from './model/analysisStep'
+import { WebviewReceiveEventType } from './api'
+import { LoginConnectionType, LoginProgressStatus } from './model/login'
 
 describe('App component', () => {
 	test('renders the Dependency page when the page type is "Dependency"', async () => {
 		render(<App />)
 
 		// Load Dependency.
 		const pageData = {
-			type: webviewEventType.ShowPage,
+			type: WebviewReceiveEventType.ShowPage,
 			pageData: {
 				id: 'Dependency-ID',
 				pageType: PageType.Dependency,
@@ -36,7 +44,7 @@ describe('App component', () => {
 
 		// Load Eos page.
 		const pageData = {
-			type: webviewEventType.ShowPage,
+			type: WebviewReceiveEventType.ShowPage,
 			pageData: {
 				pageType: PageType.Eos,
 				header: 'Header-eos',
@@ -54,7 +62,7 @@ describe('App component', () => {
 
 		// Load IaC page.
 		const pageData = {
-			type: webviewEventType.ShowPage,
+			type: WebviewReceiveEventType.ShowPage,
 			pageData: {
 				pageType: PageType.IaC,
 				header: 'Header-iac',
@@ -74,7 +82,7 @@ describe('App component', () => {
 
 		// Load Secrets page.
 		const pageData = {
-			type: webviewEventType.ShowPage,
+			type: WebviewReceiveEventType.ShowPage,
 			pageData: {
 				pageType: PageType.Secrets,
 				header: 'Header-secret',
@@ -89,10 +97,25 @@ describe('App component', () => {
 		expect(screen.getByText('Header-secret')).toBeInTheDocument()
 	})
 
-	test('renders "Nothing to show" when the page type is not recognized', () => {
+	test('renders the Login page when the page type is "Login"', async () => {
 		render(<App />)
 
-		// Assert that "Nothing to show" text is rendered.
-		expect(screen.getByText('Nothing to show')).toBeInTheDocument()
+		const pageData = {
+			type: WebviewReceiveEventType.ShowPage,
+			pageData: {
+				pageType: PageType.Login,
+				url: 'www.example.com',
+				status: LoginProgressStatus.Initial,
+				connectionType: LoginConnectionType.BasicAuthOrToken
+			} as ILoginPage
+		}
+		await sendWebviewPage(pageData)
+
+		expect(screen.getByText('Welcome to JFrog')).toBeInTheDocument()
+	})
+
+	test('renders loading spinner initially', () => {
+		const { container } = render(<App />)
+		expect(container.querySelector('.loader')).toBeInTheDocument()
 	})
 })
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,36 +7,46 @@ import Secrets from './components/Page/Secrets/Secrets'
 import { WebviewPage, PageType } from './model/webviewPages'
 import { EventManager } from './api/eventManager'
 import { eventManagerContext } from './store/eventContext'
+import { Spinner, State } from './components/UI/Spinner/Spinner'
+import { Login } from './components/Page/Login/Login'
 
 /**
  * The main page on which the Webview will be drawn based on the incoming request page type.
  */
 function App(): JSX.Element {
-	const [data, setDependencyData] = useState<WebviewPage>({} as WebviewPage)
-	const eventManager = useMemo(() => new EventManager(setDependencyData), [])
+	const [pageData, setPageData] = useState<WebviewPage>({} as WebviewPage)
+
+	const eventManager = useMemo(() => new EventManager(setPageData), [])
 	let page
 
-	switch (data.pageType) {
+	switch (pageData.pageType) {
 		case PageType.Dependency:
-			page = <Dependency data={data} />
+			page = <Dependency data={pageData} />
 			break
 		case PageType.Eos:
-			page = <Eos data={data} />
+			page = <Eos data={pageData} />
 			break
 		case PageType.IaC:
-			page = <IaC data={data} />
+			page = <IaC data={pageData} />
 			break
 		case PageType.Secrets:
-			page = <Secrets data={data} />
+			page = <Secrets data={pageData} />
+			break
+		case PageType.Login:
+			page = <Login data={pageData} />
 			break
 		default:
-			page = <>Nothing to show</>
+			page = (
+				<div className={css.loading}>
+					<Spinner state={State.Loading} />
+				</div>
+			)
 	}
 
 	return (
 		<div className={css.App}>
 			<eventManagerContext.Provider value={eventManager}>
-				<div className={css['App-body']}>{page}</div>
+				<div className={css.AppBody}>{page}</div>
 			</eventManagerContext.Provider>
 		</div>
 	)

diff --git a/src/api/eventManager.test.ts b/src/api/eventManager.test.ts
@@ -1,6 +1,6 @@
+import { WebviewReceiveEventType } from '.'
 import { IPageData, sendWebviewPage } from '../utils/testUtils'
 import { EventManager } from './eventManager'
-import { webviewEventType } from './webviewEvent'
 
 describe('EventManager util', () => {
 	let setPageStateMock: jest.Mock
@@ -16,7 +16,7 @@ describe('EventManager util', () => {
 
 	test('sets the event receiver and handles ShowPage event', async () => {
 		const pageData = {
-			type: webviewEventType.ShowPage,
+			type: WebviewReceiveEventType.ShowPage,
 			pageData: { title: 'Test Page' }
 		}
 		await sendWebviewPage(pageData)
@@ -29,7 +29,7 @@ describe('EventManager util', () => {
 		const consoleLogSpy = jest.spyOn(global.console, 'warn')
 		const emitterFunc = 'return console.warn'
 		const setEmitterEvent = {
-			type: webviewEventType.SetEmitter,
+			type: WebviewReceiveEventType.SetEmitter,
 			emitterFunc
 		} as IPageData
 

diff --git a/src/api/eventManager.ts b/src/api/eventManager.ts
@@ -1,35 +1,46 @@
+import {
+	WebviewReceiveEvent,
+	WebviewReceiveEventType,
+	WebviewSendEvent,
+	WebviewSendEventType
+} from '.'
 import { IAnalysisStep } from '../model/analysisStep'
+import { ISendLoginEventData } from '../model/login'
 import { WebviewPage } from '../model/webviewPages'
-import { IdeEvent, IdeEventType, JumpToCodeEvent } from './ideEvent'
-import { WebviewEvent, webviewEventType } from './webviewEvent'
+import { SendJumpToCodeEvent } from './sendEvent/jumpToCode'
+import { SendLoginEvent } from './sendEvent/login'
 
 export class EventManager {
-	private sendFunc = new Function('request', 'console.log(request)')
+	protected sendFunc = new Function('request', 'console.log(request)')
 
 	constructor(private setPageState: React.Dispatch<React.SetStateAction<WebviewPage>>) {
 		this.setEventReceiver()
 	}
 
-	private sendEvent = (req: IdeEvent): void => {
+	private sendEvent = (req: WebviewSendEvent): void => {
 		this.sendFunc(req)
 	}
 
 	private setEventReceiver(): void {
 		window.addEventListener('message', event => {
-			const eventData: WebviewEvent = event.data
+			const eventData: WebviewReceiveEvent = event.data
 
 			switch (eventData.type) {
-				case webviewEventType.SetEmitter:
+				case WebviewReceiveEventType.SetEmitter:
 					this.sendFunc = new Function(eventData.emitterFunc)()
 					break
-				case webviewEventType.ShowPage:
+				case WebviewReceiveEventType.ShowPage:
 					this.setPageState(eventData.pageData)
 					break
 			}
 		})
 	}
 
 	public jumpToCode(data: IAnalysisStep): void {
-		this.sendEvent({ type: IdeEventType.JUMP_TO_CODE, data: data } as JumpToCodeEvent)
+		this.sendEvent({ type: WebviewSendEventType.JumpToCode, data: data } as SendJumpToCodeEvent)
+	}
+
+	public Login(data: ISendLoginEventData): void {
+		this.sendEvent({ type: WebviewSendEventType.Login, data: data } as SendLoginEvent)
 	}
 }
diff --git a/src/api/ideEvent.test.ts b/src/api/ideEvent.test.ts
diff --git a/src/api/ideEvent.ts b/src/api/ideEvent.ts
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -0,0 +1,20 @@
+import { SendLoginEvent } from './sendEvent/login'
+import { SendJumpToCodeEvent } from './sendEvent/jumpToCode'
+import { ReceiveSetEmitterEvent } from './receiveEvent/setEmitter'
+import { ReceiveShowPageEvent } from './receiveEvent/showPage'
+
+// Send event to the IDEs.
+export enum WebviewSendEventType {
+	JumpToCode = 'SHOW_CODE',
+	Login = 'LOGIN'
+}
+
+export type WebviewSendEvent = SendJumpToCodeEvent | SendLoginEvent
+
+// Receive events from the IDEs.
+export enum WebviewReceiveEventType {
+	SetEmitter = 'SET_EMITTER',
+	ShowPage = 'SHOW_DATA'
+}
+
+export type WebviewReceiveEvent = ReceiveShowPageEvent | ReceiveSetEmitterEvent
diff --git a/src/api/receiveEvent/index.ts b/src/api/receiveEvent/index.ts
@@ -0,0 +1,2 @@
+export { ReceiveSetEmitterEvent } from './setEmitter'
+export { ReceiveShowPageEvent } from './showPage'
diff --git a/src/api/receiveEvent/setEmitter.test.ts b/src/api/receiveEvent/setEmitter.test.ts
@@ -0,0 +1,18 @@
+import { ReceiveSetEmitterEvent } from '.'
+import { WebviewReceiveEventType } from '..'
+
+describe('Event Types', () => {
+	test('defines webviewEventType enum correctly', () => {
+		expect(WebviewReceiveEventType.SetEmitter).toEqual('SET_EMITTER')
+	})
+
+	test('defines SetEmitterEvent interface correctly', () => {
+		const eventData: ReceiveSetEmitterEvent = {
+			type: WebviewReceiveEventType.SetEmitter,
+			emitterFunc: 'exampleEmitterFunc'
+		}
+
+		expect(eventData.type).toEqual(WebviewReceiveEventType.SetEmitter)
+		expect(eventData.emitterFunc).toEqual('exampleEmitterFunc')
+	})
+})
diff --git a/src/api/receiveEvent/setEmitter.ts b/src/api/receiveEvent/setEmitter.ts
@@ -0,0 +1,6 @@
+import { WebviewReceiveEventType } from '..'
+
+export interface ReceiveSetEmitterEvent {
+	type: WebviewReceiveEventType.SetEmitter
+	emitterFunc: string
+}
diff --git a/src/api/receiveEvent/showPage.test.ts b/src/api/receiveEvent/showPage.test.ts
@@ -0,0 +1,29 @@
+import { WebviewReceiveEventType } from '..'
+import { IDependencyPage } from '../../model/webviewPages'
+import { ReceiveShowPageEvent } from './showPage'
+
+describe('Event Types', () => {
+	test('defines webviewEventType enum correctly', () => {
+		expect(WebviewReceiveEventType.SetEmitter).toEqual('SET_EMITTER')
+	})
+
+	test('defines ShowPageEvent interface correctly', () => {
+		const eventData: ReceiveShowPageEvent = {
+			type: WebviewReceiveEventType.ShowPage,
+			pageData: {} as IDependencyPage
+		}
+
+		expect(eventData.type).toEqual(WebviewReceiveEventType.ShowPage)
+		expect(eventData.pageData).toBeDefined()
+	})
+
+	test('defines WebviewEvent union type correctly', () => {
+		const event: ReceiveShowPageEvent = {
+			type: WebviewReceiveEventType.ShowPage,
+			pageData: {} as IDependencyPage
+		}
+
+		expect(event.type).toEqual(WebviewReceiveEventType.ShowPage)
+		expect(event.pageData).toBeDefined()
+	})
+})
diff --git a/src/api/receiveEvent/showPage.ts b/src/api/receiveEvent/showPage.ts
@@ -0,0 +1,7 @@
+import { WebviewReceiveEventType } from '..'
+import { WebviewPage } from '../../model/webviewPages'
+
+export interface ReceiveShowPageEvent {
+	type: WebviewReceiveEventType.ShowPage
+	pageData: WebviewPage
+}
diff --git a/src/api/sendEvent/index.ts b/src/api/sendEvent/index.ts
@@ -0,0 +1,2 @@
+export { SendJumpToCodeEvent } from './jumpToCode'
+export { SendLoginEvent } from './login'
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,7 @@ @@
     </head>
     <body>
+      <div id="overlay"></div>
       <div id="root"></div>
     </body>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { ReceiveSetEmitterEvent } from './setEmitter'
		export { ReceiveShowPageEvent } from './showPage'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { SendJumpToCodeEvent } from './jumpToCode'
		export { SendLoginEvent } from './login'