Merge pull request #209 from bitovi/TR-100-Team-Issue-Configuration-2

padding and divider changes
bitovi · Nov 20, 2024 · a84e786 · a84e786
2 parents 186f93f + c0053b6
commit a84e786
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 96 deletions.
diff --git a/public/react/Configure/components/Teams/AllTeamsDefaultsForm.tsx b/public/react/Configure/components/Teams/AllTeamsDefaultsForm.tsx
@@ -10,6 +10,7 @@ import TextField from "./components/TextField";
 import Select from "./components/Select";
 import Hr from "../../../components/Hr";
 import { FormToggle } from "./components/Toggle";
+import { RequiredAsterisk } from "./components/Label";
 
 export interface AllTeamsDefaultFormProps {
   save: (newConfiguration: Configuration) => void;
@@ -36,13 +37,17 @@ const AllTeamsDefaultForm: FC<AllTeamsDefaultFormProps> = ({ save, userData, aug
 
   return (
     <form
+      className="py-2"
       onSubmit={handleSubmit((values, event) => {
         event?.preventDefault();
 
         save(values);
       })}
     >
       <Flex direction="column" gap="space.100">
+        <div className="flex gap-1">
+          <RequiredAsterisk /> <p className="text-sm text-slate-300"> indicates a required field</p>
+        </div>
         <Select
           name="estimateField"
           label="Estimate Field"
@@ -96,7 +101,7 @@ const AllTeamsDefaultForm: FC<AllTeamsDefaultFormProps> = ({ save, userData, aug
           control={control}
           onSave={update}
           label="Spread effort"
-          description="Spread estimate access dates"
+          description="Spread estimate across dates"
         />
         {/* <EnableableTextField
               toggleLabel="Estimates"

diff --git a/public/react/Configure/components/Teams/ConfigureTeams.tsx b/public/react/Configure/components/Teams/ConfigureTeams.tsx
@@ -11,6 +11,7 @@ import { Accordion, AccordionContent, AccordionTitle } from "../../../components
 import { useTeamData } from "./services/team-configuration";
 import ConfigureTeamsForm from "./ConfigureTeamsForm";
 import { useTeamForm } from "./useTeamForm";
+import Hr from "../../../components/Hr";
 
 interface IssueAccordionProps {
   teamName: string;
@@ -38,7 +39,9 @@ const IssueAccordion: FC<IssueAccordionProps> = ({
     <Accordion startsOpen={hierarchyLevel === "defaults"}>
       <AccordionTitle>
         <Heading size="small">
-          {hierarchyLevel === "defaults" ? "Team defaults" : getHierarchyLevelName(hierarchyLevel)}
+          {hierarchyLevel === "defaults"
+            ? `Team defaults (${formData.teamName})`
+            : getHierarchyLevelName(hierarchyLevel)}
         </Heading>
         {isSaving && (
           <div>
@@ -68,7 +71,7 @@ const ConfigureTeams: FC<ConfigureTeamsProps> = ({ teamName, jiraFields, onUpdat
       if (lhs === "defaults") return -1;
       if (rhs === "defaults") return 1;
 
-      return parseInt(lhs) - parseInt(rhs);
+      return parseInt(rhs) - parseInt(lhs);
     })
     .filter((issueType): issueType is keyof TeamConfiguration => {
       if (teamName === "__GLOBAL__") {
@@ -82,17 +85,22 @@ const ConfigureTeams: FC<ConfigureTeamsProps> = ({ teamName, jiraFields, onUpdat
 
   return (
     <>
-      {hierarchyLevels.map((hierarchyLevel) => {
+      {hierarchyLevels.map((hierarchyLevel, index) => {
+        const isLast = index === hierarchyLevels.length - 1;
+
         return (
-          <IssueAccordion
-            key={hierarchyLevel}
-            teamName={teamName}
-            hierarchyLevel={hierarchyLevel}
-            onUpdate={onUpdate}
-            jiraFields={jiraFields}
-            augmentedTeamData={augmentedTeamData}
-            {...teamData}
-          />
+          <>
+            <IssueAccordion
+              key={hierarchyLevel}
+              teamName={teamName}
+              hierarchyLevel={hierarchyLevel}
+              onUpdate={onUpdate}
+              jiraFields={jiraFields}
+              augmentedTeamData={augmentedTeamData}
+              {...teamData}
+            />
+            {!isLast && <Hr className="my-2 h-[2px]" />}
+          </>
         );
       })}
     </>

diff --git a/public/react/Configure/components/Teams/ConfigureTeamsForm.tsx b/public/react/Configure/components/Teams/ConfigureTeamsForm.tsx
@@ -12,6 +12,8 @@ import Hr from "../../../components/Hr";
 import InheritanceTextField from "./components/InheritanceTextField";
 import InheritanceToggleField from "./components/InheritanceToggleField";
 import InheritanceSelect from "./components/InheritanceSelect";
+import { RequiredAsterisk } from "./components/Label";
+import { HelperMessage } from "@atlaskit/form";
 
 export interface ConfigureTeamsFormProps {
   onInitialDefaultsLoad?: (overrides: Partial<NormalizeIssueConfig>) => void;
@@ -40,86 +42,91 @@ const ConfigureTeamsForm: FC<ConfigureTeamsFormProps> = ({
   const selectableFields = jiraFields.map(({ name }) => ({ value: name, label: name }));
 
   return (
-    <Flex direction="column" gap="space.100">
-      <InheritanceTextField
-        isInheriting={!userData.velocityPerSprint}
-        onInheritanceChange={(shouldCustomize) => toggleInheritance("velocityPerSprint", shouldCustomize)}
-        name="velocityPerSprint"
-        type="number"
-        label="Velocity per sprint"
-        unit="estimating units"
-        min={1}
-        register={register}
-        onSave={update}
-      />
-      <InheritanceTextField
-        isInheriting={!userData.tracks}
-        onInheritanceChange={(shouldCustomize) => toggleInheritance("tracks", shouldCustomize)}
-        name="tracks"
-        type="number"
-        label="Tracks"
-        min={1}
-        register={register}
-        onSave={update}
-      />
-      <InheritanceToggleField
-        isInheriting={!userData.spreadEffortAcrossDates && typeof userData.spreadEffortAcrossDates === "object"}
-        onInheritanceChange={(shouldCustomize) => toggleInheritance("spreadEffortAcrossDates", shouldCustomize)}
-        name="spreadEffortAcrossDates"
-        control={control}
-        onSave={update}
-        label="Spread effort"
-        description="Spread estimate access dates"
-      />
-      <InheritanceTextField
-        isInheriting={!userData.sprintLength}
-        onInheritanceChange={(shouldCustomize) => toggleInheritance("sprintLength", shouldCustomize)}
-        name="sprintLength"
-        type="number"
-        label="Sprint length"
-        unit="business days"
-        min={1}
-        register={register}
-        onSave={update}
-      />
-      <Hr />
-      <InheritanceSelect
-        isInheriting={!userData.estimateField}
-        onInheritanceChange={(shouldCustomize) => toggleInheritance("estimateField", shouldCustomize)}
-        name="estimateField"
-        label="Estimate Field"
-        jiraFields={selectableFields}
-        control={control}
-        onSave={update}
-      />
-      <InheritanceSelect
-        isInheriting={!userData.confidenceField}
-        onInheritanceChange={(shouldCustomize) => toggleInheritance("confidenceField", shouldCustomize)}
-        name="confidenceField"
-        label="Confidence field"
-        jiraFields={[{ value: "confidence-not-used", label: "Don't use confidence" }, ...selectableFields]}
-        control={control}
-        onSave={update}
-      />
-      <InheritanceSelect
-        isInheriting={!userData.startDateField}
-        onInheritanceChange={(shouldCustomize) => toggleInheritance("startDateField", shouldCustomize)}
-        name="startDateField"
-        label="Start date field"
-        jiraFields={selectableFields}
-        control={control}
-        onSave={update}
-      />
-      <InheritanceSelect
-        isInheriting={!userData.dueDateField}
-        onInheritanceChange={(shouldCustomize) => toggleInheritance("dueDateField", shouldCustomize)}
-        name="dueDateField"
-        label="End date field"
-        jiraFields={selectableFields}
-        control={control}
-        onSave={update}
-      />
-    </Flex>
+    <div className="py-2">
+      <Flex direction="column" gap="space.100">
+        <div className="flex gap-1">
+          <RequiredAsterisk /> <p className="text-sm text-slate-300"> indicates a required field</p>
+        </div>
+        <InheritanceTextField
+          isInheriting={!userData.velocityPerSprint}
+          onInheritanceChange={(shouldCustomize) => toggleInheritance("velocityPerSprint", shouldCustomize)}
+          name="velocityPerSprint"
+          type="number"
+          label="Velocity per sprint"
+          unit="estimating units"
+          min={1}
+          register={register}
+          onSave={update}
+        />
+        <InheritanceTextField
+          isInheriting={!userData.tracks}
+          onInheritanceChange={(shouldCustomize) => toggleInheritance("tracks", shouldCustomize)}
+          name="tracks"
+          type="number"
+          label="Tracks"
+          min={1}
+          register={register}
+          onSave={update}
+        />
+        <InheritanceToggleField
+          isInheriting={!userData.spreadEffortAcrossDates && typeof userData.spreadEffortAcrossDates === "object"}
+          onInheritanceChange={(shouldCustomize) => toggleInheritance("spreadEffortAcrossDates", shouldCustomize)}
+          name="spreadEffortAcrossDates"
+          control={control}
+          onSave={update}
+          label="Spread effort"
+          description="Spread estimate across dates"
+        />
+        <InheritanceTextField
+          isInheriting={!userData.sprintLength}
+          onInheritanceChange={(shouldCustomize) => toggleInheritance("sprintLength", shouldCustomize)}
+          name="sprintLength"
+          type="number"
+          label="Sprint length"
+          unit="business days"
+          min={1}
+          register={register}
+          onSave={update}
+        />
+        <Hr />
+        <InheritanceSelect
+          isInheriting={!userData.estimateField}
+          onInheritanceChange={(shouldCustomize) => toggleInheritance("estimateField", shouldCustomize)}
+          name="estimateField"
+          label="Estimate Field"
+          jiraFields={selectableFields}
+          control={control}
+          onSave={update}
+        />
+        <InheritanceSelect
+          isInheriting={!userData.confidenceField}
+          onInheritanceChange={(shouldCustomize) => toggleInheritance("confidenceField", shouldCustomize)}
+          name="confidenceField"
+          label="Confidence field"
+          jiraFields={[{ value: "confidence-not-used", label: "Don't use confidence" }, ...selectableFields]}
+          control={control}
+          onSave={update}
+        />
+        <InheritanceSelect
+          isInheriting={!userData.startDateField}
+          onInheritanceChange={(shouldCustomize) => toggleInheritance("startDateField", shouldCustomize)}
+          name="startDateField"
+          label="Start date field"
+          jiraFields={selectableFields}
+          control={control}
+          onSave={update}
+        />
+        <InheritanceSelect
+          isInheriting={!userData.dueDateField}
+          onInheritanceChange={(shouldCustomize) => toggleInheritance("dueDateField", shouldCustomize)}
+          name="dueDateField"
+          label="End date field"
+          jiraFields={selectableFields}
+          control={control}
+          onSave={update}
+        />
+      </Flex>
+    </div>
   );
 };
 

diff --git a/public/react/components/Accordion/AccordionTitle/AccordionTitle.tsx b/public/react/components/Accordion/AccordionTitle/AccordionTitle.tsx
@@ -16,7 +16,7 @@ const AccordionTitle: FC<AccordionTitleProps> = ({ children }) => {
   const Icon = isOpen ? ChevronDownLargeIcon : ChevronRightLargeIcon;
 
   return (
-    <div className="flex items-center justify-between p-4 cursor-pointer bg-white" onClick={() => setIsOpen(!isOpen)}>
+    <div className="flex items-center justify-between p-2 cursor-pointer bg-white" onClick={() => setIsOpen(!isOpen)}>
       <div className="flex items-center space-x-2 w-full">
         <Icon label={isOpen ? "open" : "closed"} />
         <div className="flex items-center justify-between w-full">{children}</div>

diff --git a/public/react/components/Hr/Hr.tsx b/public/react/components/Hr/Hr.tsx
@@ -2,8 +2,12 @@ import type { FC } from "react";
 
 import React from "react";
 
-const Hr: FC = () => {
-  return <hr className="h-px my-4 bg-gray-200 border-0 dark:bg-gray-700"></hr>;
+interface HrProps {
+  className?: string;
+}
+
+const Hr: FC<HrProps> = ({ className }) => {
+  return <hr className={`h-px my-4 bg-gray-200 border-0 dark:bg-gray-700 ${className || ""}`}></hr>;
 };
 
 export default Hr;