Merge pull request #426 from metrico/fix/datasources_inputs

fix: datasources url fields
metrico · Jun 19, 2024 · 19ef129 · 19ef129
2 parents edbfbbf + acdb8f5
commit 19ef129
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 14 deletions.
diff --git a/packages/main/package.json b/packages/main/package.json
@@ -63,6 +63,7 @@
     "slate-history": "^0.93.0",
     "slate-react": "^0.105.0",
     "tss-react": "^4.9.10",
+    "zod": "^3.23.8",
     "zustand": "^4.5.2"
   },
   "devDependencies": {

diff --git a/packages/main/views/DataSources/components/DataSourcesFiller.tsx b/packages/main/views/DataSources/components/DataSourcesFiller.tsx
@@ -6,6 +6,7 @@ import setDataSources from "../store/setDataSources";
 import { Button, Field } from "../ui";
 import DOMPurify from "isomorphic-dompurify";
 import useTheme from "@ui/theme/useTheme"
+import {z} from 'zod'
 const InlineFlex = (theme: any) => css`
     display: flex;
     flex-direction: column;
@@ -50,21 +51,27 @@ const ForAllButton = css`
     flex: 1;
 `;
 
+export const urlSchema = z.string().url()
+
 export const DataSourcesFiller = (props: any) => {
     const [url, setUrl] = useState("");
     const [user, setUser] = useState("");
     const [password, setPassword] = useState("");
     const [oneForAll, setOneForAll] = useState(false);
     const [basicAuth, setBasicAuth] = useState(false);
+    const [urlValid, setUrlValid] = useState(false)
     const dataSources = useSelector((store: any) => store.dataSources);
     const dispatch: any = useDispatch();
     const submitMessage = "Save";
     const theme = useTheme();
 
     const urlChange = (e: any) => {
            const value = e?.target?.value || "";
-    const strippedValue = value.replace(/\/$/, '');
-        setUrl(() => strippedValue);
+        const message = urlSchema.safeParse(value)
+
+        setUrlValid(()=> message.success)
+
+           setUrl(() => value);
     };
     const userChange = (e: any) => {
         setUser(() => e.target.value);
@@ -123,7 +130,7 @@ export const DataSourcesFiller = (props: any) => {
                         value={DOMPurify.sanitize(url)}
                         label={"url"}
                         onChange={urlChange}
-                        placeholder={"http://qryn.dev"}
+                        placeholder={window.location.origin}
                     />
                     {basicAuth && (
                         <>
@@ -154,10 +161,13 @@ export const DataSourcesFiller = (props: any) => {
                         </div>
                         <Button
                             value={DOMPurify.sanitize(submitMessage)}
+                            disabled={!urlValid}
+
                             onClick={onUseForAll}
                             editing={false}
-                            primary={true}
+                            primary={urlValid}
                         />
+
                     </div>
                 </div>
             )}

diff --git a/packages/main/views/DataSources/styles.ts b/packages/main/views/DataSources/styles.ts
@@ -78,7 +78,7 @@ export const PageContainer: any = styled.div`
             cursor: pointer;
         }
         .ds-settings {
-            background: ${({ theme }: any) => theme.background};
+            background: ${({ theme }: any) => theme.shadow};
         }
     }
     .plugins-cont {
@@ -210,15 +210,16 @@ export const SettingsTitle: any = styled.div`
 `;
 
 export const DataSourceSettingsCont: any = styled.div`
-    background: ${({ theme }: any) => theme.deep};
     padding: 10px;
     border-radius: 0px 0px 3px 3px;
     border-top: 1px solid ${({ theme }: any) => theme.accentNeutral};
 `;
 
 export const DsButtonStyled: any = styled(BtnSmall)`
+    
     background: ${(props: any) =>
         props.primary ? props.theme.primary : props.theme.neutral};
+
     border: 1px solid ${({ theme }: any) => theme.accentNeutral};
     color: ${(props: any) =>
         props.primary ? props.theme.maxContrast : props.theme.contrast};
@@ -229,7 +230,7 @@ export const DsButtonStyled: any = styled(BtnSmall)`
     height: 26px;
     display: flex;
     &:hover {
-        background: ${({ theme }: any) => theme.primaryLight};
+        background: ${({ theme, disabled }: any) => disabled ? theme.neutral : theme.primaryLight};
         color: ${(props: any) =>
             props.primary ? props.theme.contrast : props.theme.maxContrast};
     }

diff --git a/packages/main/views/DataSources/styles/Container.tsx b/packages/main/views/DataSources/styles/Container.tsx
@@ -73,7 +73,7 @@ export const Container: any = styled.div<{theme:any}>`
             cursor: pointer;
         }
         .ds-settings {
-            background: ${({ theme }) => theme.background};
+            background: ${({ theme }) => theme.shadow};
         }
     }
 `;
diff --git a/packages/main/views/DataSources/ui/Button.tsx b/packages/main/views/DataSources/ui/Button.tsx
@@ -3,9 +3,9 @@ import { DsButtonStyled } from "../styles";
 
 
 export const Button = (props: any) => {
-    const { value, onClick, primary, title } = props;
+    const { value, onClick, primary, title, disabled } = props;
     return (
-        <DsButtonStyled title={title} onClick={onClick} primary={primary}>
+        <DsButtonStyled disabled={disabled} title={title} onClick={onClick} primary={primary}>
             {value}
         </DsButtonStyled>
     );

diff --git a/packages/main/views/DataSources/views/Settings.tsx b/packages/main/views/DataSources/views/Settings.tsx
@@ -24,11 +24,8 @@ export const Settings = (props: any) => {
     });
     const onFieldChange = (prop: any, value: any) => {
         let val = value;
-        if (prop === "url") {
-            const strippedValue = value.replace(/\/$/, "");
-            val = strippedValue;
-        }
         const arrayClone = JSON.parse(JSON.stringify(state));
+
         arrayClone.forEach((field: any) => {
             if (field.id === id) {
                 field[prop] = val;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml