Merge pull request #565 from CBIIT/CRDCDH-1991

CRDCDH-1991 (V2) Additional Organization Rebranding Changes
CBIIT · Dec 18, 2024 · f7fb49e · f7fb49e
2 parents ef123ee + 656a2c7
commit f7fb49e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/src/components/DataSubmissions/DataSubmissionSummary.test.tsx b/src/components/DataSubmissions/DataSubmissionSummary.test.tsx
@@ -138,7 +138,7 @@ describe("Basic Functionality", () => {
       dataCommons: "Test Commons AAAAAA",
       organization: {
         _id: "",
-        name: "Test Organization AAAAAA",
+        name: "Test Program AAAAAA",
       },
       conciergeName: "Test Concierge AAAAAA",
       conciergeEmail: "[email protected]",
@@ -157,7 +157,7 @@ describe("Basic Functionality", () => {
     expect(getByText("Collaborators")).toBeVisible();
     expect(getByText("Study")).toBeVisible();
     expect(getByText("Data Commons")).toBeVisible();
-    expect(getByText("Organization")).toBeVisible();
+    expect(getByText("Program")).toBeVisible();
     expect(getByText("Primary Contact")).toBeVisible();
 
     // Check values
@@ -166,7 +166,7 @@ describe("Basic Functionality", () => {
     expect(getByText("Submitter Test A...")).toBeVisible();
     expect(getByText("AAAAAAAAAAAAAAAA...")).toBeVisible();
     expect(getByText("Test Commons AAAAAA")).toBeVisible(); // Not truncated
-    expect(getByText("Test Organizatio...")).toBeVisible();
+    expect(getByText("Test Program AAA...")).toBeVisible();
     expect(getByText("Test Concierge A...")).toBeVisible();
 
     expect(getByText("2")).toBeVisible();

diff --git a/src/components/DataSubmissions/DataSubmissionSummary.tsx b/src/components/DataSubmissions/DataSubmissionSummary.tsx
@@ -43,7 +43,6 @@ const StyledReviewCommentsButton = styled(Button)(() => ({
     padding: "11px 10px",
     border: "1px solid #B3B3B3",
     color: "#BE4511",
-    fontFamily: "'Nunito', 'Rubik', sans-serif",
     fontSize: "16px",
     fontStyle: "normal",
     fontWeight: 700,
@@ -70,7 +69,6 @@ const StyledHistoryButton = styled(Button)(() => ({
     padding: "11px 20px",
     border: "1px solid #B3B3B3",
     color: "#004A80",
-    fontFamily: "'Nunito', 'Rubik', sans-serif",
     fontSize: "16px",
     fontStyle: "normal",
     fontWeight: 700,
@@ -253,10 +251,7 @@ const DataSubmissionSummary: FC<Props> = ({ dataSubmission }) => {
             value={dataSubmission?.dataCommons}
             truncateAfter={false}
           />
-          <SubmissionHeaderProperty
-            label="Organization"
-            value={dataSubmission?.organization?.name}
-          />
+          <SubmissionHeaderProperty label="Program" value={dataSubmission?.organization?.name} />
           <SubmissionHeaderProperty
             label="Primary Contact"
             value={

diff --git a/src/content/organizations/OrganizationView.tsx b/src/content/organizations/OrganizationView.tsx
@@ -26,7 +26,7 @@ import {
 } from "../../graphql";
 import ConfirmDialog from "../../components/AdminPortal/Organizations/ConfirmDialog";
 import usePageTitle from "../../hooks/usePageTitle";
-import { formatFullStudyName, mapOrganizationStudyToId } from "../../utils";
+import { filterAlphaNumeric, formatFullStudyName, mapOrganizationStudyToId } from "../../utils";
 import { useSearchParamsContext } from "../../components/Contexts/SearchParamsContext";
 import BaseSelect from "../../components/StyledFormComponents/StyledSelect";
 import BaseOutlinedInput from "../../components/StyledFormComponents/StyledOutlinedInput";
@@ -95,7 +95,13 @@ const BaseInputStyling = {
   width: "363px",
 };
 
-const StyledTextField = styled(BaseOutlinedInput)(BaseInputStyling);
+const StyledTextField = styled(BaseOutlinedInput)({
+  ...BaseInputStyling,
+  "& .MuiInputBase-inputMultiline": {
+    resize: "vertical",
+    minHeight: "44px",
+  },
+});
 const StyledSelect = styled(BaseSelect)(BaseInputStyling);
 
 const StyledButtonStack = styled(Stack)({
@@ -394,29 +400,46 @@ const OrganizationView: FC<Props> = ({ _id }: Props) => {
                 </StyledLabel>
                 <StyledTextField
                   {...register("name", { required: true })}
-                  size="small"
                   inputProps={{ "aria-labelledby": "organizationName" }}
                   error={!!errors.name}
                   required
                 />
               </StyledField>
               <StyledField>
                 <StyledLabel id="abbreviationLabel">Abbreviation</StyledLabel>
-                <StyledTextField
-                  {...register("abbreviation", { required: true, setValueAs: (v) => v?.trim() })}
-                  size="small"
-                  inputProps={{ "aria-labelledby": "abbreviationLabel" }}
-                  error={!!errors.abbreviation}
-                  required
+                <Controller
+                  name="abbreviation"
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field }) => (
+                    <StyledTextField
+                      {...field}
+                      onChange={(e) => {
+                        field.onChange(filterAlphaNumeric(e.target.value?.toUpperCase(), "- "));
+                      }}
+                      inputProps={{
+                        "aria-labelledby": "abbreviationLabel",
+                        maxLength: 100,
+                      }}
+                      placeholder="100 characters allowed"
+                      error={!!errors.abbreviation}
+                      required
+                    />
+                  )}
                 />
               </StyledField>
               <StyledField>
                 <StyledLabel id="descriptionLabel">Description</StyledLabel>
                 <StyledTextField
                   {...register("description", { required: false })}
-                  size="small"
-                  inputProps={{ "aria-labelledby": "descriptionLabel" }}
+                  inputProps={{
+                    "aria-labelledby": "descriptionLabel",
+                    maxLength: 500,
+                  }}
                   error={!!errors.description}
+                  placeholder="500 characters allowed"
+                  rows={2}
+                  multiline
                 />
               </StyledField>
               <StyledField>