Add responsibleselector to modal

src/containers/ConceptPage/ConceptForm/ConceptForm.tsx

@@ -245,11 +245,12 @@ const ConceptForm = ({
             <ConceptFormFooter
               entityStatus={concept?.status}
               conceptChanged={!!conceptChanged}
+              inModal={inModal}
               savedToServer={savedToServer}
               isNewlyCreated={isNewlyCreated}
               showSimpleFooter={!concept?.id}
               onClose={onClose}
-              responsibleId={concept?.responsible?.responsibleId}
+              responsibleId={concept?.responsible?.responsibleId ?? ndlaId}
             />
           </FormWrapper>
         );

src/containers/ConceptPage/ConceptForm/ConceptFormFooter.tsx

@@ -7,6 +7,7 @@
  */
 
 import { useFormikContext } from "formik";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -15,6 +16,7 @@ import { FormActionsContainer } from "../../../components/FormikForm";
 import SaveButton from "../../../components/SaveButton";
 import EditorFooter from "../../../components/SlateEditor/EditorFooter";
 import { SAVE_BUTTON_ID } from "../../../constants";
+import ResponsibleSelect from "../../../containers/FormikForm/components/ResponsibleSelect";
 import { useConceptStateMachine } from "../../../modules/concept/conceptQueries";
 import { isFormikFormDirty } from "../../../util/formHelper";
 import { AlertDialogWrapper } from "../../FormikForm";
@@ -44,13 +46,13 @@ const ConceptFormFooter = ({
   savedToServer,
   isNewlyCreated,
   showSimpleFooter,
-  onClose,
   responsibleId,
 }: Props) => {
   const { t } = useTranslation();
   const formikContext = useFormikContext<ConceptFormValues>();
   const conceptStateMachine = useConceptStateMachine();
-  const { values, errors, initialValues, dirty, isSubmitting, submitForm } = formikContext;
+  const [responsible, setResponsible] = useState<string | undefined>(undefined);
+  const { values, errors, initialValues, dirty, isSubmitting, submitForm, setFieldValue } = formikContext;
   const formIsDirty = isFormikFormDirty({
     values,
     initialValues,
@@ -60,15 +62,31 @@ const ConceptFormFooter = ({
 
   const disableSave = Object.keys(errors).length > 0;
 
+  const updateResponsible = useCallback(
+    async (responsible: string | undefined) => {
+      try {
+        setResponsible(responsible);
+        setFieldValue("responsibleId", responsible ? responsible : null);
+      } catch (error) {
+        //catchError(error, createMessage);
+      }
+    },
+    [setFieldValue],
+  );
+
   if (inModal) {
     return (
       <StyledFormActionsContainer>
-        <Button variant="secondary" onClick={onClose}>
-          {t("form.abort")}
-        </Button>
+        <ResponsibleSelect
+          key="concept-modal-responsible-select"
+          responsible={responsible}
+          setResponsible={setResponsible}
+          onSave={updateResponsible}
+          responsibleId={responsibleId}
+        />
         <SaveButton
           id={SAVE_BUTTON_ID}
-          type={!inModal ? "submit" : "button"}
+          type={"button"}
           loading={isSubmitting}
           formIsDirty={formIsDirty}
           showSaved={!!savedToServer && !formIsDirty}