refactor: padding and sizing improvements

- Use eds typography, reduce hierarchy size on title - Make parent space items, not individually - Re-insert the plugin wrapper (created duplicate padding) - Remove unecessary css classes
equinor · May 30, 2024 · 4040605 · 4040605
1 parent 3ee18f1
commit 4040605
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 151 deletions.
diff --git a/packages/dm-core-plugins/src/job/JobControl/JobControl.tsx b/packages/dm-core-plugins/src/job/JobControl/JobControl.tsx
@@ -13,7 +13,13 @@ import {
   useDocument,
   useJob,
 } from '@development-framework/dm-core'
-import { Button, Chip, Icon, Tooltip } from '@equinor/eds-core-react'
+import {
+  Button,
+  Chip,
+  Icon,
+  Tooltip,
+  Typography,
+} from '@equinor/eds-core-react'
 import { gear } from '@equinor/eds-icons'
 import { AxiosError } from 'axios'
 import _ from 'lodash'
@@ -167,87 +173,91 @@ export const JobControl = (props: IUIPlugin) => {
     throw new Error(JSON.stringify(error || jobEntityError, null, 2))
 
   return (
-    <div className=' dm-plugin-padding flex-col border rounded-md bg-equinor-lightgray'>
-      {internalConfig.title && <h2>{config.title}</h2>}
-      {asCronJob && (
-        <div className='rounded-md p-2 m-2 bg-white border'>
-          <ConfigureRecurring
-            asCron={asCronJob}
-            readOnly={true}
-            schedule={schedule}
-            setSchedule={(s: TSchedule) => {
-              setSchedule(s)
-              setCronValues(parseCronStringToCronValues(s.cron))
-            }}
-            cronValues={cronValues}
-            setCronValues={(c: TCronValues) => {
-              setSchedule({
-                ...schedule,
-                cron: parseCronValuesToCronString(c),
-              })
-              setCronValues(c)
-            }}
-            registered={status === JobStatus.Registered}
-          />
-        </div>
-      )}
-      <JobButtonWrapper>
-        <div className='flex items-center space-x-2'>
-          {getControlButton(status, remove, start, false, jobIsLoading)}
-          <div className='flex flex-row items-center'>
-            <p className='text-sm text-center'>Status:</p>
-            <Chip variant={getVariant(status)} data-testid={'jobStatus'}>
-              {status ?? 'Not registered'}
-            </Chip>
+    <div className='dm-plugin-padding'>
+      <div className='flex flex-col gap-1 border rounded-md bg-equinor-lightgray p-2'>
+        {internalConfig.title && (
+          <Typography variant='h6'>{config.title}</Typography>
+        )}
+        {asCronJob && (
+          <div className='rounded-md p-2 bg-white border'>
+            <ConfigureRecurring
+              asCron={asCronJob}
+              readOnly={true}
+              schedule={schedule}
+              setSchedule={(s: TSchedule) => {
+                setSchedule(s)
+                setCronValues(parseCronStringToCronValues(s.cron))
+              }}
+              cronValues={cronValues}
+              setCronValues={(c: TCronValues) => {
+                setSchedule({
+                  ...schedule,
+                  cron: parseCronValuesToCronString(c),
+                })
+                setCronValues(c)
+              }}
+              registered={status === JobStatus.Registered}
+            />
           </div>
+        )}
+        <JobButtonWrapper>
+          <div className='flex items-center space-x-2'>
+            {getControlButton(status, remove, start, false, jobIsLoading)}
+            <div className='flex flex-row items-center'>
+              <p className='text-sm'>Status:</p>
+              <Chip variant={getVariant(status)} data-testid={'jobStatus'}>
+                {status ?? 'Not registered'}
+              </Chip>
+            </div>
 
-          {!internalConfig.hideLogs && <JobLog logs={logs} error={error} />}
-        </div>
-
-        {internalConfig.runnerTemplates &&
-          internalConfig.runnerTemplates.length > 0 && (
-            <div className={'flex flex-row items-center justify-end'}>
-              <Tooltip
-                title={`Change runner. Current: ${(
-                  (asCronJob
-                    ? jobEntity.applicationInput?.runner.type
-                    : jobEntity.runner?.type) || 'None'
-                )
-                  .split('/')
-                  .at(-1)}`}
-              >
-                <Button
-                  disabled={[JobStatus.Starting, JobStatus.Running].includes(
-                    // @ts-ignore
-                    status
-                  )}
-                  onClick={() => setTemplateMenuIsOpen(true)}
-                  variant='ghost_icon'
+            {!internalConfig.hideLogs && <JobLog logs={logs} error={error} />}
+          </div>
+
+          {internalConfig.runnerTemplates &&
+            internalConfig.runnerTemplates.length > 0 && (
+              <div className={'flex flex-row items-center justify-end'}>
+                <Tooltip
+                  title={`Change runner. Current: ${(
+                    (asCronJob
+                      ? jobEntity.applicationInput?.runner.type
+                      : jobEntity.runner?.type) || 'None'
+                  )
+                    .split('/')
+                    .at(-1)}`}
                 >
-                  <Icon data={gear} size={24} />
-                </Button>
-              </Tooltip>
-              <TemplateMenu
-                templates={internalConfig.runnerTemplates || []}
-                onSelect={(template: TTemplate) =>
-                  handleRunnerTemplateSelect(template)
-                }
-                onClose={() => setTemplateMenuIsOpen(false)}
-                isOpen={isTemplateMenuOpen}
-                title='Runner'
-                selected={templates.findIndex((template: TJobHandler) =>
-                  _.isEqual(template, jobEntity.runner)
-                )}
-              />
-            </div>
-          )}
-      </JobButtonWrapper>
-
-      {status === JobStatus.Running && progress !== null && (
-        <div className='px-4 pb-2'>
-          <Progress progress={progress} />
-        </div>
-      )}
+                  <Button
+                    disabled={[JobStatus.Starting, JobStatus.Running].includes(
+                      // @ts-ignore
+                      status
+                    )}
+                    onClick={() => setTemplateMenuIsOpen(true)}
+                    variant='ghost_icon'
+                  >
+                    <Icon data={gear} size={24} />
+                  </Button>
+                </Tooltip>
+                <TemplateMenu
+                  templates={internalConfig.runnerTemplates || []}
+                  onSelect={(template: TTemplate) =>
+                    handleRunnerTemplateSelect(template)
+                  }
+                  onClose={() => setTemplateMenuIsOpen(false)}
+                  isOpen={isTemplateMenuOpen}
+                  title='Runner'
+                  selected={templates.findIndex((template: TJobHandler) =>
+                    _.isEqual(template, jobEntity.runner)
+                  )}
+                />
+              </div>
+            )}
+        </JobButtonWrapper>
+
+        {status === JobStatus.Running && progress !== null && (
+          <div className='px-4 pb-2'>
+            <Progress progress={progress} />
+          </div>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/packages/dm-core-plugins/src/job/JobCreate.tsx b/packages/dm-core-plugins/src/job/JobCreate.tsx
@@ -16,7 +16,13 @@ import {
   useDocument,
   useJob,
 } from '@development-framework/dm-core'
-import { Button, Chip, Icon, Tooltip } from '@equinor/eds-core-react'
+import {
+  Button,
+  Chip,
+  Icon,
+  Tooltip,
+  Typography,
+} from '@equinor/eds-core-react'
 import { gear } from '@equinor/eds-icons'
 import { useEffect, useState } from 'react'
 
@@ -166,75 +172,73 @@ export const JobCreate = (props: IUIPlugin & { config: TJobPluginConfig }) => {
     if (jobDocument.type === EBlueprint.RECURRING_JOB) setAsCronJob(true)
   }, [jobDocument])
   return (
-    <div
-      className={
-        'dm-plugin-padding flex-col border rounded-md bg-equinor-lightgray'
-      }
-    >
-      {config.title && <h2>{config.title}</h2>}
-      {config.recurring !== false && (
-        <ConfigureRecurring
-          asCron={asCronJob}
-          setAsCron={setAsCronJob}
-          readOnly={true}
-          schedule={schedule}
-          setSchedule={(s: TSchedule) => {
-            setSchedule(s)
-            setCronValues(parseCronStringToCronValues(s.cron))
-          }}
-          cronValues={cronValues}
-          setCronValues={(c: TCronValues) => {
-            setSchedule({ ...schedule, cron: parseCronValuesToCronString(c) })
-            setCronValues(c)
-          }}
-          registered={status === JobStatus.Registered}
-        />
-      )}
-      <JobButtonWrapper>
-        <div className='flex items-center space-x-2'>
-          {getControlButton(
-            status,
-            deregister,
-            createAndStartJob,
-            false,
-            jobIsLoading
-          )}
-          <div className='flex flex-row items-center'>
-            <p className='text-sm text-center'>Status:</p>
-            <Chip variant={getVariant(status)} data-testid={'jobStatus'}>
-              {status ?? 'Not registered'}
-            </Chip>
-          </div>
-          {!config.hideLogs && <JobLog logs={logs} error={error} />}
-        </div>
-        {config.jobTemplates.length > 1 && (
-          <div className={'flex flex-row items-center'}>
-            <Tooltip title={`Change Job template. Current: `}>
-              <Button
-                onClick={() => setTemplateMenuIsOpen(true)}
-                variant='ghost_icon'
-                disabled={[JobStatus.Starting, JobStatus.Running].includes(
-                  // @ts-ignore
-                  status
-                )}
-              >
-                <Icon data={gear} size={24} />
-              </Button>
-            </Tooltip>
-            <TemplateMenu
-              templates={config.jobTemplates || []}
-              onSelect={(_: any, index: number) => setSelectedTemplate(index)}
-              onClose={() => setTemplateMenuIsOpen(false)}
-              isOpen={isTemplateMenuOpen}
-              title='Job template'
-              selected={selectedTemplate}
-            />
+    <div className='dm-plugin-padding'>
+      <div className='flex-col border rounded-md bg-equinor-lightgray p-2'>
+        {config.title && <Typography variant='h6'>{config.title}</Typography>}
+        {config.recurring !== false && (
+          <ConfigureRecurring
+            asCron={asCronJob}
+            setAsCron={setAsCronJob}
+            readOnly={true}
+            schedule={schedule}
+            setSchedule={(s: TSchedule) => {
+              setSchedule(s)
+              setCronValues(parseCronStringToCronValues(s.cron))
+            }}
+            cronValues={cronValues}
+            setCronValues={(c: TCronValues) => {
+              setSchedule({ ...schedule, cron: parseCronValuesToCronString(c) })
+              setCronValues(c)
+            }}
+            registered={status === JobStatus.Registered}
+          />
+        )}
+        <JobButtonWrapper>
+          <div className='flex items-center space-x-2'>
+            {getControlButton(
+              status,
+              deregister,
+              createAndStartJob,
+              false,
+              jobIsLoading
+            )}
+            <div className='flex flex-row items-center'>
+              <p className='text-sm text-center'>Status:</p>
+              <Chip variant={getVariant(status)} data-testid={'jobStatus'}>
+                {status ?? 'Not registered'}
+              </Chip>
+            </div>
+            {!config.hideLogs && <JobLog logs={logs} error={error} />}
           </div>
+          {config.jobTemplates.length > 1 && (
+            <div className={'flex flex-row items-center'}>
+              <Tooltip title={`Change Job template. Current: `}>
+                <Button
+                  onClick={() => setTemplateMenuIsOpen(true)}
+                  variant='ghost_icon'
+                  disabled={[JobStatus.Starting, JobStatus.Running].includes(
+                    // @ts-ignore
+                    status
+                  )}
+                >
+                  <Icon data={gear} size={24} />
+                </Button>
+              </Tooltip>
+              <TemplateMenu
+                templates={config.jobTemplates || []}
+                onSelect={(_: any, index: number) => setSelectedTemplate(index)}
+                onClose={() => setTemplateMenuIsOpen(false)}
+                isOpen={isTemplateMenuOpen}
+                title='Job template'
+                selected={selectedTemplate}
+              />
+            </div>
+          )}
+        </JobButtonWrapper>
+        {status === JobStatus.Running && progress !== null && (
+          <Progress progress={progress} />
         )}
-      </JobButtonWrapper>
-      {status === JobStatus.Running && progress !== null && (
-        <Progress progress={progress} />
-      )}
+      </div>
     </div>
   )
 }
diff --git a/packages/dm-core-plugins/src/job/common.tsx b/packages/dm-core-plugins/src/job/common.tsx
@@ -115,12 +115,8 @@ export const JobLog = (props: {
 }
 export const JobButtonWrapper = styled.div`
   display: flex;
-  padding-top: 0.5rem;
   flex-direction: row;
   align-items: center;
-  text-align: center;
-  padding-inline: 0.5rem; 
-  margin-bottom: 0.5rem;
   justify-content: space-between;
   min-width: max-content;
 `