tapping settings modal added to first login

ui/src/components/Header/EntHeader.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import logo from '../assets/MizuEntLogo.svg';
 import './Header.sass';
 import userImg from '../assets/user-circle.svg';
@@ -12,6 +12,7 @@ import {useSetRecoilState} from "recoil";
 import entPageAtom, {Page} from "../../recoil/entPage";
 import {useNavigate} from "react-router-dom";
 import {RouterRoutes} from "../../helpers/routes";
+import { SettingsModal } from "../SettingsModal/SettingModal";
 
 const api = Api.getInstance();
 
@@ -23,6 +24,19 @@ interface EntHeaderProps {
 export const EntHeader: React.FC<EntHeaderProps> = ({isFirstLogin, setIsFirstLogin}) => {
     const navigate = useNavigate();
 
+    const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+
+    useEffect(() => {
+        if(isFirstLogin) {
+            setIsSettingsModalOpen(true)
+        }
+    }, [isFirstLogin])
+
+    const onSettingsModalClose = () => {
+        setIsSettingsModalOpen(false);
+        setIsFirstLogin(false);
+    }
+
     return <div className="header">
         <div>
             <div className="title">
@@ -33,9 +47,11 @@ export const EntHeader: React.FC<EntHeaderProps> = ({isFirstLogin, setIsFirstLog
             <img className="headerIcon" alt="settings" src={settingImg} style={{marginRight: 25}} onClick={() => navigate(RouterRoutes.SETTINGS)}/>
             <ProfileButton/>
         </div>
+        <SettingsModal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} isFirstLogin={isFirstLogin}/>
     </div>;
 }
 
+
 const ProfileButton = () => {
 
     const setEntPage = useSetRecoilState(entPageAtom);

ui/src/components/Modals/AddWorkspaceModal/AddWorkspaceModal.tsx

@@ -42,7 +42,7 @@ const AddWorkspaceModal: FC<AddWorkspaceModalProp> = ({isOpen,onCloseModal, work
             setCheckedNamespacesKeys(workspace.namespaces);   
           }
             setSearchValue("");     
-            const namespaces = await api.getTapConfig();
+            const namespaces = ["cert-manager", "default", "google-demo"]
             const namespacesMapped = namespaces.map(namespace => {
               return {key: namespace, value: namespace}
             })

ui/src/components/Modals/OasModal/OasModal.tsx

@@ -21,7 +21,6 @@ const OasModal = ({ openModal, handleCloseModal }) => {
         const services = await api.getOasServices();
         setOasServices(services);
       } catch (e) {
-        console.log(e);
         toast.error("Error occurred while fetching services list");
         console.error(e);
       }

ui/src/components/SettingsModal/SettingModal.tsx

@@ -49,7 +49,12 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
 
     const updateTappingSettings = async () => {
         try {
-            await api.setTapConfig(namespaces);
+            const defaultWorkspace = {
+                name: "default",
+                namespaces: Object.keys(namespaces)
+            }
+            await api.createWorkspace(defaultWorkspace);
+            // await api.setTapConfig(namespaces);
             onClose();
             toast.success("Saved successfully");
         } catch (e) {
@@ -78,7 +83,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
                 <div style={{padding: 32, paddingBottom: 0}}>
                     <div className="settingsTitle">Tapping Settings</div>
                     <div className="settingsSubtitle" style={{marginTop: 20}}>
-                        Please choose from below the namespaces for tapping, traffic for namespaces selected will be displayed
+                        Please choose from below the namespaces for tapping, traffic for namespaces selected will be displayed as default workspace.
                     </div>
                     {isLoading ? <div style={{textAlign: "center", padding: 20}}>
                         <img alt="spinner" src={spinner} style={{height: 35}}/>