Save suite button fixes

ui/src/src/components/ui/Dialog.tsx

@@ -25,7 +25,7 @@ const Dialog = ({ children, className, onOverlayClick, onClose, ...other }: Dial
   return (
     <HeadlessDialog
       {...other}
-      className="text-neutral z-20 inset-0 fixed flex items-center justify-center overflow-y-auto"
+      className="text-neutral z-20 inset-0 fixed flex items-center justify-center overflow-y-auto font-sans"
       onClose={onClose}
     >
       <div className="flex items-center justify-center min-h-screen">
@@ -50,7 +50,7 @@ const Close = ({ className, ...other }: ButtonHTMLAttributes<HTMLButtonElement>)
     )}
     {...other}
   >
-    <XCircleIcon className="w-5 h-5" />
+    <XCircleIcon className="w-6 h-6" />
   </button>
 );
 

ui/src/src/index.css

@@ -5,6 +5,7 @@
 @tailwind utilities;
 
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');
 
 body {
   margin: 0;

ui/src/src/testcases/TestCasesFilters.tsx

@@ -16,10 +16,9 @@ export type TestCasesFiltersProps = {
   disabled?: boolean;
   onChangeGroups: (value: string[]) => void;
   onChangeFilters: (value: (FilterValue | ExistingAttributeFilter)[]) => void;
-} & (
-  | { showSave: true; onSaveSuiteClick: () => void }
-  | { showSave?: false | undefined; onSaveSuiteClick?: () => void }
-);
+  showSave?: boolean;
+  onSaveSuiteClick?: () => void;
+};
 
 const TestCasesFilter = ({
   projectAttributes,

ui/src/src/testcases/TestCasesPanel.tsx

@@ -1,9 +1,12 @@
 import Button from "../components/ui/Button";
 import { PropsWithChildren, useMemo } from "react";
 import PlayIcon from "@heroicons/react/solid/PlayIcon";
+import PlusCircleIcon from "@heroicons/react/outline/PlusCircleIcon";
 import { ExistingAttribute, FakeAttribute } from "../domain";
 import TestCase from "./TestCase";
 import { mapClientAttributeToServer } from "../services/backend";
+import { captionClasses } from "../components/ui/typography";
+import clsx from "clsx";
 
 export type TestCasesPanelProps = PropsWithChildren<{
   projectID: string;
@@ -19,10 +22,14 @@ const TestCasesPanel = ({ children, selectedTestCaseID, projectID, attributes }:
   return (
     <div className="flex mt-5 gap-3">
       <div className="w-1/3 bg-white ml-8 pb-8  border">
-        <div className="flex gap-2 pt-5 pl-5 items-middle flex-wrap">
-          <h2 className="text-xl text-neutral flex-grow">Test cases</h2>
+        <div className="flex gap-2 pt-5 pl-5 items-center flex-wrap">
+          <h2 className={clsx(captionClasses, "m-0 flex-grow")}>Test cases</h2>
+          <Button.Link className="flex gap-2 items-center">
+            <PlusCircleIcon className="w-6 h-6" />
+            Add
+          </Button.Link>
           <Button.Primary className="flex gap-2 pl-3 pr-3 items-center">
-            <PlayIcon className="w-5 h-5" />
+            <PlayIcon className="w-6 h-6" />
             Launch
           </Button.Primary>
         </div>

ui/src/src/testcases/TestCasesScreen.tsx

@@ -51,6 +51,8 @@ const TextCasesScreen: FunctionComponent<TestCasesScreenProps> = ({ projectID })
         onChangeFilters={handleChangeFilters}
         onChangeGroups={handleChangeGroups}
         onToggleTestCase={toggleTestCase}
+        showSaveSuite
+        onSaveSuiteClick={() => setShowSaveDialog("true")}
       />
     </>
   );

ui/src/src/testcases/TestCasesScreenStateless.tsx

@@ -19,6 +19,8 @@ export type TestCasesScreenStatelessProps = {
   projectID: string;
   isTestCaseSelected: (id: string) => boolean;
   onToggleTestCase: (id: string) => void;
+  showSaveSuite?: boolean;
+  onSaveSuiteClick?: () => void;
 };
 
 export const TestCasesScreenStateless = ({
@@ -30,10 +32,12 @@ export const TestCasesScreenStateless = ({
   exclusionState,
   beforeFilters,
   disableFilters,
+  showSaveSuite,
+  onSaveSuiteClick,
   ...other
 }: TestCasesScreenStatelessProps) => (
   <div className="tailwind" style={{ marginLeft: "-15px", marginRight: "-15px" }}>
-    <div className="bg-neutral-fade6 pt-8 pb-8">
+    <div className="bg-neutral-fade6 pt-8 pb-8 font-sans text-neutral">
       {beforeFilters}
       <TestCasesFilter
         disabled={disableFilters}
@@ -42,6 +46,8 @@ export const TestCasesScreenStateless = ({
         filters={filters}
         onChangeFilters={onChangeFilters}
         onChangeGroups={onChangeGroups}
+        showSave={!!showSaveSuite}
+        onSaveSuiteClick={onSaveSuiteClick}
       />
 
       <Suspense

ui/src/src/testcases/TestSuiteScreen.tsx

@@ -5,7 +5,7 @@ import { atomFamily, RecoilState, selectorFamily, useRecoilState, useRecoilValue
 import { FilterValue } from "../components/ui/Filter";
 import { ExistingAttributeFilter, ExistingSuite, listToBoolHash } from "../domain";
 
-import { attributesSelector, WithProjectID } from "./testCasesScreen.data";
+import { attributesSelector } from "./testCasesScreen.data";
 
 import { TestCasesScreenStateless } from "./TestCasesScreenStateless";
 import SuiteHeader from "./SuiteHeader";
@@ -15,14 +15,12 @@ export type TestSuiteScreenProps = {
   suiteID: string;
 };
 
-type SuiteSelectorParams = WithProjectID & { suiteID: string };
-
-const suiteAtom = atomFamily<ExistingSuite | undefined, SuiteSelectorParams>({
+const suiteAtom = atomFamily<ExistingSuite | undefined, TestSuiteScreenProps>({
   key: "existing-suite",
   default: undefined,
 });
 
-const suiteSelector = selectorFamily<ExistingSuite, SuiteSelectorParams>({
+const suiteSelector = selectorFamily<ExistingSuite, TestSuiteScreenProps>({
   key: "suite",
   get:
     ({ projectID, suiteID }) =>
@@ -35,15 +33,15 @@ const suiteSelector = selectorFamily<ExistingSuite, SuiteSelectorParams>({
     },
 });
 
-const useSaveSuite = (suiteState: RecoilState<ExistingSuite>, projectID: string, suiteID: string) => {
+const useSaveSuite = (suiteState: RecoilState<ExistingSuite>, params: TestSuiteScreenProps) => {
   const [suite, setSuite] = useRecoilState(suiteState);
   const [isSaving, setIsSaving] = useState(false);
   const save = async (updatedSuite: Partial<ExistingSuite>) => {
     setIsSaving(true);
     try {
       const savedSuite = await backendService
-        .project(projectID)
-        .testSuites.single(suiteID)
+        .project(params.projectID)
+        .testSuites.single(params.suiteID)
         .update({ ...suite, ...updatedSuite });
       setSuite(savedSuite);
     } finally {
@@ -59,7 +57,7 @@ const TestSuiteScreen: FunctionComponent<TestSuiteScreenProps> = ({ projectID, s
   const suiteState = suiteSelector(selectorParams);
 
   const suite = useRecoilValue(suiteState);
-  const [saveSuite, isSaving] = useSaveSuite(suiteState, projectID, suiteID);
+  const [saveSuite, isSaving] = useSaveSuite(suiteState, selectorParams);
   const exclusionHash = useMemo(() => listToBoolHash(suite.excludedTestCases), [suite.excludedTestCases]);
   const isTestCaseSelected = (id: string) => !exclusionHash[id];
   const setExcludedTestCasesHandler = useCallback(

ui/src/tailwind.config.js

@@ -27,11 +27,11 @@ module.exports = {
       purple: "#8C54FF",
     },
     fontFamily: {
-      sans: ["Noto Sans", "sans-serif"],
+      sans: ["Rubik", "Noto Sans", "sans-serif"],
     },
     fontSize: {
       base: "16px",
-      sm: "12px",
+      sm: "13px",
       lg: "28px",
       xl: "34px",
       xxl: "48px",