Merge pull request #442 from zenml-io/dev

Author: Cahllagerfeld

src/index.css

@@ -132,3 +132,7 @@ html {
   top: 50%;
   transform: translateY(-50%);
 }
+
+.react-flow__controls-button svg {
+  background-color: transparent !important;
+}

src/ui/components/lineage/index.module.scss

@@ -28,17 +28,17 @@
   display: flex;
   flex-direction: row-reverse;
   font-family: Arial, Helvetica, sans-serif !important;
-  border: 1px solid #443E99 !important;
+  border: 1px solid #443e99 !important;
   border-radius: 4px;
   font-size: 8px;
   background: #ffffff;
   min-width: 6rem;
 }
-.stepBody:hover{
+.stepBody:hover {
   display: flex;
   flex-direction: row-reverse;
   font-family: Arial, Helvetica, sans-serif !important;
-  border: 1px solid #443E9980 !important;
+  border: 1px solid #443e9980 !important;
   border-radius: 4px;
   font-size: 8px;
   background-color: #f5f4ff;
@@ -50,7 +50,7 @@
   display: flex;
   flex-direction: row-reverse;
   font-family: Arial, Helvetica, sans-serif !important;
-  border: 3px solid #443E99 !important;
+  border: 3px solid #443e99 !important;
   border-radius: 4px;
   font-size: 8px;
   background: #ffffff;
@@ -60,7 +60,7 @@
   display: flex;
   flex-direction: row-reverse;
   font-family: Arial, Helvetica, sans-serif !important;
-  border: 3px solid #443E99 !important;
+  border: 3px solid #443e99 !important;
   border-radius: 4px;
   font-size: 8px;
   background: #f5f4ff;
@@ -103,8 +103,7 @@
   clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
 }
 
-.nodeContainer
-{
+.nodeContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -189,20 +188,17 @@
   width: 100%;
   padding-left: 20px;
   padding-right: 20px;
-  background-color: "pink";
+  background-color: 'pink';
   justify-content: center;
   align-items: center;
 }
 
-
 .closeArrow {
   height: 500px;
   width: 500px;
   background-color: aqua;
 }
 
-
-
 // SIDE BAR
 
 .sidebarMainContainer {
@@ -230,7 +226,7 @@
   z-index: -1000;
 }
 
-.btnContainer>img {
+.btnContainer > img {
   z-index: -1000;
 }
 

src/ui/components/lineage/index.tsx

@@ -230,7 +230,13 @@ export const LayoutFlow: React.FC<any> = (graph: any) => {
               }}
               fitView
             >
-              <Controls />
+              <Controls
+                style={{
+                  top: '0px',
+                  bottom: '50%',
+                  boxShadow: 'none',
+                }}
+              />
             </ReactFlow>
           </div>
         </div>

src/ui/components/lineage/sidebarTabsSwitchers/stepTabSwitcher.tsx

@@ -21,16 +21,16 @@ const stylesInActive = {
 
 const tabs = [
   {
-    title: 'Attributes',
-    case: '__ATTRIBUTE',
+    title: 'Logs',
+    case: '__LOG',
   },
   {
     title: 'Code',
     case: '__CODE',
   },
   {
-    title: 'Logs',
-    case: '__LOG',
+    title: 'Attributes',
+    case: '__ATTRIBUTE',
   },
 ];
 
@@ -76,7 +76,7 @@ const tabs = [
 // };
 
 const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
-  const [show, setShow] = useState('__ATTRIBUTE');
+  const [show, setShow] = useState('__LOG');
   const [dynamicWidth, setDynamicWidth] = useState<number | undefined>(79);
   const [dynamicLeft, setDynamicLeft] = useState<number | undefined>(21);
   const divRefs = useRef<(HTMLSpanElement | null)[]>([]);
@@ -101,10 +101,11 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
     switch (tab) {
       case '__LOG':
         return setShow('__LOG');
-      case '__ATTRIBUTE':
-        return setShow('__ATTRIBUTE');
       case '__CODE':
         return setShow('__CODE');
+      case '__ATTRIBUTE':
+        return setShow('__ATTRIBUTE');
+
       default:
         return '';
     }
@@ -150,7 +151,20 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
         </div>
       ) : (
         <>
-          {show === '__ATTRIBUTE' ? (
+          {show === '__LOG' && <DisplayLogs selectedNode={node} />}
+          {show === '__CODE' && (
+            <div className={styles.codeContainer}>
+              <SyntaxHighlighter
+                customStyle={{ width: '100%', height: '80%', fontSize: 20 }}
+                wrapLines={true}
+                language="python"
+                style={okaidia}
+              >
+                {node.source_code ? node.source_code : ''}
+              </SyntaxHighlighter>
+            </div>
+          )}
+          {show === '__ATTRIBUTE' && (
             <>
               <table cellSpacing="0" className="sidebar_table">
                 <tbody>
@@ -386,24 +400,7 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
                 </tbody>
               </table>
             </>
-          ) : (
-            ''
-          )}
-          {show === '__CODE' ? (
-            <div className={styles.codeContainer}>
-              <SyntaxHighlighter
-                customStyle={{ width: '100%', height: '80%', fontSize: 20 }}
-                wrapLines={true}
-                language="python"
-                style={okaidia}
-              >
-                {node.source_code ? node.source_code : ''}
-              </SyntaxHighlighter>
-            </div>
-          ) : (
-            ''
           )}
-          {show === '__LOG' ? <DisplayLogs selectedNode={node} /> : ''}
         </>
       )}
     </>

src/ui/layouts/connectors/RegisterConnector/CreateConnector/index.tsx

@@ -1241,13 +1241,17 @@ export const CreateConnector: React.FC<{ connectorType: any; state: any }> = ({
                     const currentValue = e.target.value;
                     const previousValues = previousValuesRef.current;
                     if (currentValue !== previousValues) {
-                      // matchedAuthMethod?.config_schema?.required?.includes(
-                      //   elementName,
-                      // ) &&
                       onVerify();
                     }
                     previousValuesRef.current = currentValue;
-                    // inputRef.current.value = currentValue;
+                  }
+                  if (!e.target.value && previousValuesRef.current) {
+                    const currentValue = e.target.value;
+                    const previousValues = previousValuesRef.current;
+                    if (currentValue !== previousValues) {
+                      onVerify();
+                    }
+                    previousValuesRef.current = currentValue;
                   }
                 }}
                 onChange={(e: any) => {