start feature environments UI + lot of minor fixes (input validation …

…etc)
viktormarinho · Oct 4, 2023 · c1fca34 · c1fca34
1 parent 5182ce3
commit c1fca34
Show file tree

Hide file tree

Showing 41 changed files with 229 additions and 50 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -24,3 +24,4 @@ dotenv = "0.15.0"
 rust-embed = "6.8.1"
 mime_guess = "2"
 uuid = { version = "1.4.1", features = ["v4"] }
+async-trait = "0.1.73"
diff --git a/packages/client/src/app.css b/packages/client/src/app.css
@@ -94,12 +94,28 @@ h1 {
   padding: 8px;
   cursor: pointer;
 }
+
 .btn-secondary:hover {
   background-color: var(--hover-bg);
 }
+
 .btn-secondary > span {
   color: var(--sec-content);
   font-size: 16px;
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   font-weight: 500;
+}
+
+select {
+  padding: 8px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 16px;
+  border: none;
+  color: var(--sec-content);
+}
+
+select:hover {
+  background-color: var(--hover-bg);
 }
diff --git a/packages/client/src/lib/components/Feature.svelte b/packages/client/src/lib/components/Feature.svelte
@@ -1,18 +1,18 @@
 <script lang=ts>
-  import { Feature } from "../types/feature";
+  import { EnvironmentFeature } from "../types/feature";
   import ApiButton from "./ApiButton.svelte";
   import ApiDefinitions from "./ApiDefinitions.svelte";
   import CopyButton from "./CopyButton.svelte";
 
-  export let feature: Feature;
+  export let feature: EnvironmentFeature;
 
   let showApiDefs = false;
 </script>
 
 <div class="feature-container">
   <div class="feature">
-        <CopyButton text={feature.id} />
-        <span class="name">{feature.id}</span>
+        <CopyButton text={feature.feature_id} />
+        <span class="name">{feature.feature_id}</span>
         <ApiButton on:click={() => (showApiDefs = !showApiDefs)} selected={showApiDefs}/>
         <span class="tag" class:tag-active={feature.active}
           >{feature.active ? "Active" : "Disabled"}</span
@@ -26,7 +26,7 @@
         </button>
       </div>
       <div class:show={showApiDefs} class="no-h">
-        <ApiDefinitions name={feature.id} active={feature.active}/>
+        <ApiDefinitions name={feature.feature_id} active={feature.active}/>
       </div>
 </div>
 

diff --git a/packages/client/src/lib/components/Features.svelte b/packages/client/src/lib/components/Features.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Feature } from "../types/feature";
+  import { EnvironmentFeature } from "../types/feature";
   import FeatureComponent from './Feature.svelte';
 
-  export let features: (Feature & { api_defs?: boolean })[] = [];
+  export let features: (EnvironmentFeature & { api_defs?: boolean })[] = [];
 
   async function toggleFeature(id: string) {
     const res = await fetch("/api/features/toggle", {

diff --git a/packages/client/src/lib/components/Input.svelte b/packages/client/src/lib/components/Input.svelte
@@ -6,6 +6,7 @@
     export let value = '';
     export let help = '';
     export let error = '';
+    export let maxLength = '';
 
     function typeAction(node) {
         node.type = type;
@@ -16,7 +17,7 @@
     <div class="container" class:error={error.length}>
         <label class="control">
             <slot></slot>
-            <input use:typeAction placeholder={placeholder} bind:value={value} />
+            <input use:typeAction placeholder={placeholder} bind:value={value} maxlength={maxLength} />
         </label>
         {#if error.length}
             <div class="error-p">

diff --git a/packages/client/src/lib/components/NewCredential.svelte b/packages/client/src/lib/components/NewCredential.svelte
@@ -56,6 +56,7 @@
 
 <form on:submit={createCredential}>
   <Input
+    maxLength="35"
     bind:value={newCredentialName}
     error={newCredentialNameError}
     placeholder="Credential name"
@@ -72,4 +73,7 @@
     display: flex;
     gap: 8px;
   }
+  form:last-child {
+    flex-grow: 0;
+  }
 </style>
diff --git a/packages/client/src/lib/components/NewFeature.svelte b/packages/client/src/lib/components/NewFeature.svelte
@@ -1,7 +1,7 @@
 <script lang=ts>
   import { errors } from "../errors";
   import EnableIcon from "../icons/Enable.svelte";
-import { clickOutside } from "../util/clickOutside";
+  import { clickOutside } from "../util/clickOutside";
   import Button from "./Button.svelte";
   import Input from "./Input.svelte";
   import Portal from "./Portal.svelte";
@@ -49,14 +49,14 @@ import { clickOutside } from "../util/clickOutside";
 </script>
 
 <button class="btn-secondary" on:click={() => (open = true)}>
-  <span> Create feature + </span>
+  <span> Feature </span>
 </button>
 {#if open}
     <Portal>
         <div use:clickOutside on:click_outside={() => (open = false)} class="hidden" class:open={open}>
             <form class="modal-content" on:submit={createFeature}>
                 <span>New feature</span>
-                <Input type="text" bind:value={createFeatureData.name} placeholder="Feature name" error={''}>
+                <Input maxLength="35" type="text" bind:value={createFeatureData.name} placeholder="Feature name" error={createFeatureErrors.name}>
                     <EnableIcon width='32' height='32'/>
                 </Input>
                 <p>Feature identifier: <strong>{displayName}</strong></p>
@@ -100,4 +100,8 @@ import { clickOutside } from "../util/clickOutside";
   .modal-content > p {
     font-size: 12px;
   }
+
+  strong {
+    overflow-wrap: break-word;
+  }
 </style>
diff --git a/packages/client/src/lib/components/NewProject.svelte b/packages/client/src/lib/components/NewProject.svelte
@@ -50,7 +50,7 @@
     <div use:clickOutside on:click_outside={() => (open = false)} class="hidden" class:open={open}>
         <form class="modal-content" on:submit={createProject}>
             <span>New project</span>
-            <Input type="text" bind:value={createProjectData.name} placeholder="Project name" error={createProjectErrors.name}>
+            <Input maxLength="35" type="text" bind:value={createProjectData.name} placeholder="Project name" error={createProjectErrors.name}>
                 <Tag/>
             </Input>
             <Button loading={loading} text="Create">

diff --git a/packages/client/src/lib/components/Projects.svelte b/packages/client/src/lib/components/Projects.svelte
@@ -28,8 +28,8 @@
       on:click={() => push(`#/admin/project/${project.id}`)}
       class="project"
     >
-      <span><Folder /> {project.name}</span>
-      <span>{resolveLabel(project.feature_count)}</span>
+      <span class="title"><span><Folder /></span> <h4>{project.name}</h4></span>
+      <span class="label">{resolveLabel(project.feature_count)}</span>
     </button>
   {/each}
 </div>
@@ -54,6 +54,7 @@
     justify-content: space-between;
     padding: 20px 10px;
     align-items: center;
+    gap: 1rem;
   }
   .project:hover {
     background-color: whitesmoke;
@@ -65,6 +66,12 @@
     font-weight: 500;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 1rem;
+  }
+  .title > h4 {
+    margin: 0;
+  }
+  .label {
+    flex-shrink: 0;
   }
 </style>
diff --git a/packages/client/src/lib/components/User.svelte b/packages/client/src/lib/components/User.svelte
@@ -67,6 +67,7 @@
     border-radius: 8px;
     top: 8px;
     background-color: white;
+    z-index: 10;
     display: flex;
     box-shadow: var(--shadow);
     flex-direction: column;

diff --git a/packages/client/src/lib/icons/Adjustments.svelte b/packages/client/src/lib/icons/Adjustments.svelte
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-adjustments-horizontal" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+   <path d="M4 6l8 0"></path>
+   <path d="M16 6l4 0"></path>
+   <path d="M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+   <path d="M4 12l2 0"></path>
+   <path d="M10 12l10 0"></path>
+   <path d="M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
+   <path d="M4 18l11 0"></path>
+   <path d="M19 18l1 0"></path>
+</svg>
diff --git a/packages/client/src/lib/icons/Environment.svelte b/packages/client/src/lib/icons/Environment.svelte
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-codesandbox" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M20 7.5v9l-4 2.25l-4 2.25l-4 -2.25l-4 -2.25v-9l4 -2.25l4 -2.25l4 2.25z"></path>
+   <path d="M12 12l4 -2.25l4 -2.25"></path>
+   <path d="M12 12l0 9"></path>
+   <path d="M12 12l-4 -2.25l-4 -2.25"></path>
+   <path d="M20 12l-4 2v4.75"></path>
+   <path d="M4 12l4 2l0 4.75"></path>
+   <path d="M8 5.25l4 2.25l4 -2.25"></path>
+</svg>
diff --git a/packages/client/src/lib/icons/Plus.svelte b/packages/client/src/lib/icons/Plus.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+   <path d="M12 5l0 14"></path>
+   <path d="M5 12l14 0"></path>
+</svg>